Общие атрибуты тегов

Общие атрибуты могут использоваться практически для любого тега HTML. Поэтому их и выделяют в отдельную группу, чтобы избежать многочисленных бессмысленных повторов.

accesskey

Позволяет перейти к текстовому полю с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш.
Например, для accesskey="s" работают следующие сочетания:
Internet Explorer: Alt + S
Chrome: Alt + S
Opera: Shift + Esc + S
Safari: Alt + S
Firefox: Shift + Alt + S.

class

Задает один или несколько имен классов для связи элемента со стилевым оформлением. Если указаны несколько классов, то они перечисляются через пробел. Имя класса может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), дефис (-) и подчеркивание (_), первым символом должна быть буква.

<style type="text/css">
    .w100 { width: 100%; }
    .mt10 { margin-top: 10px; }
</style>
<div class="w100 mt10">
    ...
</div>

contenteditable

Указывает можно ли редактировать содержание элемента или нет. Возможные значения: "true", "false". Значение "true" можно вообще не указывать (contenteditable).

contextmenu

Устанавливает контекстное меню для элемента. Значение атрибута – идентификатор меню, созданного с помощью тега <menu>.

Атрибут contextmenu работает только в Firefox.

data-*

Позволяет создавать собственные атрибуты для хранения данных.

Имя атрибута должно обязательно начинаться с префикса data-, далее можно использовать строчные латинские буквы, цифры, дефис (-), двоеточие (:), подчёркивание (_).

Имена атрибутов трансформируются в переменные, к которым можно обращаться для получения данных, по следующим правилам:

• префикс data- удаляется;
• дефис перед буквой удаляется, а буква за ним становится прописной;
• другие дефисы остаются неизменными.

Например, атрибут data-number-of-users преобразуется в переменную numberOfUsers.

Данные из пользовательских атрибутов data-* можно получить через JavaScript или с помощью CSS-функции attr().

Для обращения к атрибутам и получения их значений через JavaScript применяется метод dataset. Его используется также и для установки нового значения пользовательского атрибута.

Пример обработки на JavaScript

<div id="sp" data-sp-id="1234"
 data-date-of-open="01.08.2015"
 data-number-of-goods="644"
 data-number-of-users="52"><b>Совместная покупка</b></div>
<script>
 var el = document.getElementById('sp');
 sp_id = el.dataset.spId; // Получаем значение атрибута data-sp-id
 open = el.dataset.dateOfOpen; // Получаем значение атрибута data-date-of-open
 goods = el.dataset.numberOfGoods; // Получаем значение атрибута data-number-of-goods
 users = el.dataset.numberOfUsers; // Получаем значение атрибута data-number-of-users
 el.dataset.stop = 'Нет'; // Устанавливаем новый атрибут data-stop и его значение
 document.writeln("СП №" + sp_id); // Выводим значение переменной sp_id
 document.writeln("<br>Дата начала: " + open); // Выводим значение переменной open
 document.writeln("<br>Число товаров: " + goods); // Выводим значение переменной goods
 document.writeln("<br>Число участников: " + users); // Выводим значение переменной users
</script>

РЕЗУЛЬТАТ:

Совместная покупка

Пример обработки CSS-функцией attr()

<style>
    .sp::after {
        white-space: pre-line;
        content: '\AСП № ' attr(data-sp-id) '\AДата начала: ' attr(data-date-of-open) '\AЧисло товаров: ' attr( data-number-of-goods) '\AЧисло участников: ' attr(data-number-of-users);
    }
</style>
<div class="sp" data-sp-id="1234"
     data-date-of-open="01.08.2015"
     data-number-of-goods="644"
     data-number-of-users="52"><b>Совместная покупка</b></div>
</div>

РЕЗУЛЬТАТ:

Совместная покупка

dir

Задает направление отображения текста. Возможные значения:

• ltr – слева направо,
• rtr – справа налево.

draggable

Указывает, можно ли перетаскивать элемент с помощью мышки или нет. Возможные значения: "true", "false".

hidden

Элемент скрыт, т.е. он не отображается на странице, но доступен через скрипты.

Атрибут hidden не работает в Safari, Android, iOS.

id

Идентификатор элемента, который используется для обращения к элементу через скрипты. Идентификатор – уникальное имя элемента, т.е. в коде документа должен встречаться только один раз. Идентификатор может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), дефис (-) и подчеркивание (_), первым символом должна быть буква.
В HTML5 id можно использовать также для ссылки на конкретное место Web-страницы.

<a href="#partner">Партнерская программа</a>
...
<h3 id="partner">Партнерская программа</h3>

lang

Язык содержимого элемента.

spellcheck

Определяет проверять или не проверять правописание и грамматику в тексте. Возможные значения: "true", "false". Значение "true" можно вообще не указывать (spellcheck). Результат будет заметен только для полей форм <input> и <textarea>, а также для элементов c установленным атрибутом contenteditable.

style

Внутренние стили элемента.

tabindex

Определяет порядок получения фокуса в форме при переходе между элементами с помощью клавиши Tab. Возможное значение – любое целое положительное число. Переход к элементам, у которых не задан атрибут tabindex, происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.

title

Всплывающий текст, появляющийся при наведении указателя мышки на элемент.