Глобальные атрибуты HTML

Практикуете HTML-верстку и хотите зарабатывать на этом?
Регистрируйтесь на бирже Ворк24!
Планируете заказать верстку сайта на HTML?
Эксперты Ворк24 помогут!

обложка_Глобальные атрибуты HTML.png

В 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>

20231117_130923.png

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”>

20231117_131350.png

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>

20231117_131008.png

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>

20231117_131146.png

20. translate

Определяет, нужно ли переводить содержимое компонента кода при локализации веб-страницы.

<p translate=“no”>Do not translate</p>

Глобальные атрибуты HTML предоставляют разработчикам важные инструменты для улучшения доступности, интерактивности и визуального представления веб-страниц. Их гибкость и универсальность делают их неотъемлемой частью разработки веб-сайтов.

Вы в поисках удаленной фриланс-работы или хотите заказать верстку сайта на HTML?

Комментарии

Нет комментариев

Следующая статья

Тег <audio> в HTML
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки
Быстрое выполнение от 1 дня
Безопасная сделка
Прямой эфир