Не все HTML-теги такие самодостаточные, что их можно применять без всяких дополнений. Часто нужна дополнительная информация, чтобы тег был действительно полезным. Для этого разработчики используют атрибуты. Атрибуты тегов помогают браузеру понять, как именно должен отображаться элемент страницы. Мы собрали список атрибутов, которые вам точно пригодятся.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

alt

Атрибут показывает на странице текст, в случае, если изображение не загрузилось.

<img src="wrong/path/to/img.png" alt="прекрасный вид из окна">
Alt-текст поможет понять, что на картинке, если её по каким-то причинам не видно
Alt-текст поможет понять, что на картинке, если её по каким-то причинам не видно

Кстати, у нас в блоге есть подробная инструкция, как правильно писать alt-текст.

autoplay, muted

Autoplay используется для видео и аудио и запускает воспроизведение, когда контент готов и загружен:

<audio src="/music.mp3" autoplay>

Атрибут Autoplay muted запускает видео без звука при загрузке страницы:

<video src="path/to/video.mp4" autoplay muted>

rows, cols

Эти атрибуты задают размер текста в поле ввода: rows определяет количество строк, а cols— количество знаков в строке:

<textarea id="example" name="example" rows="5" cols="33">>
  Пять строк, 33 колонки, два атрибута.
</textarea>

type

Нужен, чтобы задать полю ввода тип. Например, виджет для выбора цвета будем задавать так:

<input type="color">

А так получится поле выбора календарной даты:

<input type="date">
Виджет выбора даты
Виджет выбора даты

Если атрибут type не задан, то по умолчанию поле ввода будет текстовым.

for

Атрибут привязывает тег label к полю ввода, если они разделены:

<label for="username">Как вас зовут</label>
<input type="text" id="username">>

placeholder

Даёт пользователю подсказку, как можно заполнить поле ввода:

<input type="text" id="username" placeholder="Kot Keks">>

lang

Помогает определить язык элемента. Можно использовать не только для HTML, но и для тегов.

<p>This paragraph is English, but the language is not specifically defined.</p>
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>

rel

Его используют вместе с тегами a и link. Он определяет текущий документ как базовый по отношению к тому, на который ведёт ссылка (rel — от relationship).

<a href="#" target="_blank" rel="nofollow noopener">Страница</a>

Атрибут target="_blank" указывает браузеру открыть ссылку в новой вкладке. При этом страница, на которую вы ссылаетесь, получает частичный доступ к текущей странице. Это происходит с помощью объекта window.opener и ставит под угрозу ваши данные. Значение noopener не позволяет предоставить доступ к данным текущей страницы, а noreferrer скрывает адрес страницы, с которой вы перешли.

Значение nofollow объявляет поисковой системе, что документ не имеет влияния на page ranking документа, к которому ведет ссылка, то есть не передаёт ему свою ценность.

Как ставить пустые ссылки

download

Этот атрибут сообщает о том, что ссылка <a> должна быть использована для скачивания файла:

<a href=" download="wallpaper.jpg">Скачать обои для рабочего стола</a>

contentEditable

Помогает изменить текст в элементах, для которых он указан. Например, можете стереть этот абзац.

<p contentEditable="true">Пример какого-то текста, который вы тоже можете стереть</p>

У нас даже есть отдельная статья, где можно посмотреть, как работает этот атрибут.

ping

Атрибут нужен, чтобы узнать, по каким сторонним ссылкам люди переходят на сайт:

<a href="https://www.example.com/article/"
   ping="https://www.example.com/magic/">15 популярных тегов</a>

Ping на якорных ссылках

loading

Задаёт поведение браузера при загрузке изображения. Принимает два значенияeager (картинка загружается всегда, независимо от области просмотра) и lazy (загрузка откладывается, пока изображение не достигнет области просмотра).

<img src="https://example.com/image.jpg" loading="lazy">

list

Определяет список возможных значений поля для ввода, который будет предлагаться пользователю:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice"> />
<datalist id="ice-cream-flavors">>
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
Выбор типа документа при оформлении билета на поезд
Выбор типа документа при оформлении билета на поезд

title

Содержит текст с дополнительной информацией для элемента.

К примеру, может прикрепляться как заголовок для тегов <link><abbr><input> и <menuitem>.

<p>Newlines in <code>title</code> should be taken into account,
like <abbr title="This is a multiline title">example</abbr>.</p>

Может также содержать подсказку, которая всплывает, когда пользователь наводит курсор на элемент:

Подсказка при наведении курсора на элемент
Подсказка при наведении курсора на элемент

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

<img src="picture.jpg" loading="lazy">

<iframe src="supplementary.html" loading="lazy"></iframe>

Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 22 ноября 2023
Знакомство с HTML

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 1 ноября 2023
Специальные символы в HTML

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 23 октября 2023
Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport, то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Читать дальше
HTML
  • 14 сентября 2023
Как отличить h1, h2 и h3

Как отличить h1, h2 и h3

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

Читать дальше
HTML
  • 8 июня 2023
Как правильно вставлять SVG

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.

�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

<svg width="20">
  <rect fill="#fc0"
    width="20"
    height="20"/>
  <line stroke="black"
    x1="0" y1="0"
    x2="20" y2="20"/>
</svg>

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Читать дальше
HTML
  • 1 июня 2023