16 полезных атрибутов HTML, которые пригодятся всем

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

alt

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

<img src="wrong/path/to/img.png" 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>

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

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