Полезные атрибуты HTML

XML, Haml, Markdown, Slim, Pug / Flex, Grid, Less, SCSS, Sass / JQuery, TypeScript, CoffeeScript, LiveScript
Ответить
Аватара пользователя
Suver
Site Admin
Сообщения: 14
Зарегистрирован: Ср сен 22, 2021 6:23 pm

html Полезные атрибуты HTML

Сообщение Suver »

alt
Атрибут показывает на странице текст, в случае, если изображение не загрузилось.
<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. Если у кого нибудь есть свои часто использованные атрибуты, то можно поделиться здесь...
Всё написанное здесь сегодня, может быть не так уж и важно завтра... Изображение
Ответить