Как объяснялось в предыдущей главе, элементы могут содержать атрибуты, которые используются для установки различных свойств элемента.
Некоторые атрибуты определены глобально и могут использоваться для любого элемента, в то время как другие определены только для определенных элементов. Все атрибуты имеют имя и значение и выглядят так, как показано ниже в примере.
Ниже приведен пример атрибутов HTML5, который иллюстрирует, как разметить элемент div с помощью атрибута с именем class, используя значение «example» —
<div class = "example">...</div>
Атрибуты могут быть указаны только в начальных тегах и никогда не должны использоваться в конечных тегах .
Атрибуты HTML5 нечувствительны к регистру и могут быть записаны в верхнем или смешанном регистре, хотя наиболее распространенное соглашение — придерживаться строчных.
Стандартные атрибуты
Приведенные ниже атрибуты поддерживаются почти всеми тегами HTML 5.
| атрибут | Опции | функция |
|---|---|---|
| ключ доступа | Определяемые пользователем | Определяет сочетание клавиш для доступа к элементу. |
| выравнивать | правый, левый, центр | Горизонтально выравнивает теги |
| фон | URL | Размещает фоновое изображение за элементом |
| BGCOLOR | числовые, шестнадцатеричные, значения RGB | Размещает цвет фона позади элемента |
| учебный класс | Определяемые пользователем | Классифицирует элемент для использования с каскадными таблицами стилей. |
| contenteditable | правда, ложь | Указывает, может ли пользователь редактировать содержимое элемента или нет. |
| контекстное меню | Идентификатор меню | Определяет контекстное меню для элемента. |
| данных XXXX | Определяемые пользователем | Пользовательские атрибуты. Авторы документа HTML могут определять свои собственные атрибуты. Должен начинаться с «data-». |
| перетаскиваемый | правда, ложь, авто | Указывает, разрешено ли пользователю перетаскивать элемент. |
| рост | Числовое значение | Определяет высоту таблиц, изображений или ячеек таблицы. |
| скрытый | скрытый | Указывает, должен ли элемент быть видимым или нет. |
| Я бы | Определяемые пользователем | Называет элемент для использования с каскадными таблицами стилей. |
| вещь | Список элементов | Используется для группировки элементов. |
| itemprop | Список предметов | Используется для группировки предметов. |
| проверка орфографии | правда, ложь | Указывает, должен ли элемент проверять орфографию или грамматику. |
| стиль | Таблица стилей CSS | Определяет встроенный стиль для элемента. |
| предмет | Пользователь определяет идентификатор | Определяет соответствующий элемент элемента. |
| TabIndex | Номер вкладки | Определяет порядок вкладок элемента. |
| заглавие | Определяемые пользователем | «Всплывающее» название для ваших элементов. |
| VALIGN | верх, середина, низ | Вертикально выравнивает теги в элементе HTML. |
| ширина | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
Полный список тегов HTML5 и связанных с ними атрибутов см. В нашей ссылке на теги HTML5 .
Пользовательские атрибуты
В HTML 5 появилась новая функция — добавление пользовательских атрибутов данных.
Пользовательский атрибут данных начинается с data- и будет назван в соответствии с вашими требованиями. Вот простой пример —
<div class = "example" data-subject = "physics" data-level = "complex"> ... </div>
Приведенный выше код будет совершенно корректным HTML5 с двумя пользовательскими атрибутами, называемыми datasubject и data-level . Вы сможете получить значения этих атрибутов, используя JavaScript API или CSS аналогично обычным атрибутам.