Атрибут показывает на странице текст, в случае, если изображение не загрузилось.
<img src="wrong/path/to/img.png" 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="Иван Иванов">
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>
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>Может также содержать подсказку, которая всплывает, когда пользователь наводит курсор на элемент.
Это одни из основных атрибутов в HTML. Если у кого нибудь есть свои часто использованные атрибуты, то можно поделиться здесь...
