В HTML существует специальная категория атрибутов, называемая глобальными атрибутами. Отличительной чертой этих атрибутов является их универсальность: они могут быть применены к любым элементам HTML, независимо от их конкретного типа. Эти атрибуты обогащают элементы дополнительными сведениями или функциями, тем самым усиливая их базовые характеристики и эстетические качества.
Обзор глобальных атрибутов
1. accesskey
Этот атрибут дает возможность присвоить элементу клавишу для ускоренного доступа, что усовершенствует навигацию с помощью клавиатуры. К примеру, сочетание клавиши Alt и выбранной клавиши в веб-браузере сразу активирует этот элемент.
<div accesskey=“h”>Главная</div>
2. autocapitalize
Контролирует изменение регистра букв в текстовых полях. Этот атрибут может иметь различные значения, включая «on», «off», «words», «sentences», и «characters», которые определяют способ автоматической обработки текста.
<input autocapitalize=“words” type=“text”>
3. autofocus
Атрибут подразумевает, что элемент формы должен автоматически получать фокус при загрузке страницы, что упрощает процесс ввода данных пользователем.
<input autofocus type=“text”>
4. contenteditable
Этот атрибут определяет, допускается ли редактирование содержимого и свойств текста непосредственно в браузере, превращая его в интерактивное поле для редактирования.
<div contenteditable=“true”>Редактируй меня</div>
5. draggable
Определяет, разрешено ли перетаскивание элемента. Если установлено значение «true», то элемент можно перетаскивать, что добавляет интерактивность к нему.
<img src=“image.jpg” draggable=“true”>
6. enterkeyhint
Этот атрибут предоставляет указание о том, какое действие должно быть выполнено при нажатии клавиши Enter, такое как отправка формы или переход к следующему полю.
<input enterkeyhint=“send”>
7. hidden
Скрывает элемент на странице, делая его невидимым для пользователя, но сохраняя в структуре HTML.
<div hidden>Скрытый текст</div>
8. inert
Делает элемент неактивным, что полезно для создания модальных окон, которые не должны взаимодействовать с пользователем до определенного момента.
<div inert>Неактивный блок</div>
9. inputmode
Подсказывает браузеру, какую клавиатуру использовать для ввода данных, например «numeric» для числовых данных или «email» для электронных адресов.
<input inputmode=“numeric”>
10. is
Используется для расширения функционала стандартных HTML-элементов с помощью пользовательских компонентов.
<button is=“custom-button”>Кнопка</button>
11. itemid, itemprop, itemref, itemscope, itemtype
Эти атрибуты применяются с использованием Microdata API с целью формирования структурированных данных, которые представляют ценную информацию для поисковых систем.
<div itemscope itemtype=“http://schema.org/Person”>
12. lang
Служит для указания языка содержимого, что способствует улучшению доступности и корректному отображению текста.
<p lang=“en”>English text</p>
13. nonce
Используется в политике безопасности контента (CSP) с целью разрешения выполнения скриптов, что усиливает безопасность веб-страницы.
<script nonce=“yourNonceValue”>
14. dir
Указывает направление текста в элементе, например «ltr» или «rtl» , что особенно важно для многоязычных сайтов. Например, тег «rtl» пригодится для текстов на арабском или иврите.
<p dir=“rtl”>Текст справа налево</p>
15. popover
Нестандартный атрибут, который может использоваться для отображения всплывающей информации.
16. spellcheck
Определяет, должен ли браузер проверять правописание текста в элементе.
<textarea spellcheck=“true”></textarea>
17. style
Применяет индивидуальные стили CSS.
<div style=“color: blue;”>Синий текст</div>
18. tabindex
Определяет порядок перехода между компонентами кода при навигации с помощью клавиши Tab.
<input tabindex=“1”>
19. title
Предназначен для предоставления дополнительной информации о элементе, которая часто отображается в виде всплывающей подсказки.
<div title=“Подсказка”>Наведите сюда</div>
20. translate
Определяет, нужно ли переводить содержимое компонента кода при локализации веб-страницы.
<p translate=“no”>Do not translate</p>
Глобальные атрибуты HTML предоставляют разработчикам важные инструменты для улучшения доступности, интерактивности и визуального представления веб-страниц. Их гибкость и универсальность делают их неотъемлемой частью разработки веб-сайтов.
Вы в поисках удаленной фриланс-работы или хотите заказать верстку сайта на HTML?
Комментарии