Универсальные атрибуты

Содержание

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

accesskey

Атрибут accesskey позволяет получить доступ к элементу с помощью сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

Обычно элемент при использовании комбинации клавиш получает фокус, но конкретное действие зависит от применяемого элемента. К примеру, для <a> произойдёт переход по ссылке, для текстовых полей можно вводить текст, для флажков (<input type="checkbox">) будет поставлена галочка и т. д.

Синтаксис

accesskey="c"

Значения

Цифра (0-9) или латинская буква (a-z).

Значение по умолчанию

Нет.

class

Атрибут class задаёт стилевой класс, который позволяет связать определённый элемент со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.

Синтаксис

class="<имя класса>"

Значения

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

Значение по умолчанию

Нет.

contenteditable

Атрибут contenteditable сообщает, что элемент доступен для редактирования пользователем — можно удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.

Синтаксис

contenteditable="true | false"

Значения

  • true - Включает режим редактирования.
  • false - Запрещает редактирование элемента.

Вместо true допустимо указывать пустое значение (contenteditable="") или вообще его не писать (contenteditable).

Значение по умолчанию

По умолчанию наследует значение родителя.

contextmenu

Атрибут contextmenu устанавливает контекстное меню для элемента.

Синтаксис

contextmenu="<идентификатор>"

Значения

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

Значение по умолчанию

Нет.

data-*

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

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

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

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

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth.

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

значение = элемент.dataset.атрибут
элемент.dataset.атрибут = значение

Здесь имя атрибута — это переменная, полученная путём изменения атрибута по вышеприведённым правилам (dateOfBirth, а не data-date-of-birth или date-of-birth).

dir

Атрибут dir задаёт направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

Синтаксис

dir="ltr | rtl"

Значения

  • ltr - Текст отображается как обычно — слева направо.
  • rtl - Текст инвертируется и отображается справа налево.

Значение по умолчанию

  • ltr

draggable

Атрибут draggable указывает, можно ли перетаскивать элемент используя Drag and Drop API.

Синтаксис

draggable="true | false | auto"

Значения

  • true - Разрешает перетаскивание элемента.
  • false - Запрещает перетаскивание элемента.
  • auto - Задаёт поведение браузера по умолчанию.

Значение по умолчанию

  • auto

dropzone

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

Синтаксис

dropzone="copy | link | move"

Значения

  • copy - копирование перетаскиваемых пользователем данных.
  • link - перетаскиваемые пользователем данных будут скопированы и связаны со своим исходником.
  • move - перемещение перетаскиваемых пользователем данных.

Значение по умолчанию

  • copy

hidden

Атрибут hidden скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты.

Синтаксис

hidden

Значения

В качестве значения можно указать hidden (hidden="hidden") или оставить атрибут пустым (hidden="" или hidden).

Значение по умолчанию

По умолчанию атрибут выключен.

id

Атрибут id задаёт стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Синтаксис

id="<имя идентификатора>"

Значения

Идентификатор состоит по меньшей мере из одного символа и не должен содержать пробел. В имя идентификатора допустимо включать цифры, символ подчёркивания, дефис и др.

В HTML4 идентификатор не должен начинаться с цифры и содержать другие символы, кроме дефиса, подчёркивания и точки. Придерживайтесь этих правил, если вам требуется взаимодействие идентификаторов с JavaScript или совместимость со старыми браузерами.

Значение по умолчанию

Нет.

itemid

Атрибут itemid определяет уникальный глобальный идентификатор элемента для микроданных. Применяется только к таким элементам, у которых одновременно заданы атрибуты itemscope и itemtype. Кроме того, itemid допустимо использовать со словарями, поддерживающих глобальные идентификаторы. К примеру, для словаря http://schema.org/Book, который описывает книги, в качестве идентификатора может служить ISBN — уникальный международный номер книжного издания.

Синтаксис

itemid=<адрес>

Значения

В качестве значения указывается относительный или абсолютный адрес документа, который служит идентификатором. Кроме того, допустимо задавать и обычный текст.

Значение по умолчанию

Нет.

itemprop

Атрибут itemprop используется для добавления свойств словаря микроданных к элементу. Имя свойства определяется значением itemprop, а значение свойства определяется содержимым HTML-элемента, к примеру, текстом который располагается внутри элемента.

Синтаксис

itemprop="<свойство>"

Значения

Свойство определяется словарём данных. К примеру, на Schema.org, которую поддерживает Яндекс и Google, перечислены словари с их возможными свойствами.

Значение по умолчанию

Нет.

itemref

Свойства, которые не являются потомками элемента с атрибутом itemscope, можно связать с элементом с помощью атрибута itemref. В значении данного атрибута указывается список идентификаторов элементов, которые содержат дополнительные свойствами в других местах документа.

Атрибут itemref может быть указан только для элементов, которые содержат атрибут itemscope.

Атрибут itemref не является частью модели микроданных. Это всего лишь синтаксическая конструкция, помогающая авторам добавлять аннотацию на страницу, которая не содержит удобную древовидную структуру.

Синтаксис

itemref="<идентификатор>"

Значения

Одно или несколько значений атрибута id разделённых пробелом.

Значение по умолчанию

Нет.

itemscope

Атрибут itemscope задаёт область действия словаря в структуре данных. Как правило, работает совместно с атрибутом itemtype и задаёт пределы, где itemtype будет активен.

Синтаксис

itemscope

Значения

У этого атрибута нет значений.

Значение по умолчанию

Нет.

itemtype

Атрибут itemtype указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных. Яндекс и Google поддерживают стандарт разметки Schema.org, соответственно, в качестве значения itemtype указывается адрес словаря на этом сайте. К примеру, для разметки организаций используется значение http://schema.org/Organization.

Синтаксис

itemtype=<адрес>

Значения

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

Значение по умолчанию

Нет.

lang

Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang. Браузер использует его значение для правильного отображения некоторых символов.

Синтаксис

lang="код языка"

Значения

См. коды языков

Значение по умолчанию

Нет.

spellcheck

Атрибут spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм (<input>, <textarea>), а также редактируемых элементов (у них установлен атрибут contenteditable).

Браузер может не поддерживать проверку орфографии или она может быть отключена.

При включении проверки слова с ошибками подчёркиваются красной волнистой линией.

Синтаксис

spellcheck="true | false"

Значения

  • true - Включает режим проверки правописания.
  • false - Отключает проверку.

Вместо true допустимо указывать пустое значение (spellcheck="") или вообще его не писать (spellcheck).

Значение по умолчанию

Зависит от настроек браузера.

style

Атрибут style применяется для определения стиля элемента с помощью правил CSS.

Синтаксис

style="<правила описания стилей>"

Значения

В качестве значений указываются стилевые правила: вначале следует имя стилевого свойства, затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой.

Значение по умолчанию

Нет.

tabindex

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде. Заблокированные элементы (у которых установлен атрибут disabled) не участвуют в переходе и фокус не получают.

Синтаксис

tabindex="<число>"

Значения

Любое целое число.

Отрицательное значение говорит, что элемент может получить фокус, но к нему нельзя перейти с помощью клавиатуры.

Ноль, неверное значение или когда атрибут tabindex не задан означает, что к элементу можно перейти с помощью клавиатуры, но переход происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.

Положительное значение определяет порядок элемента в последовательности перехода через клавиатуру: чем больше число, тем больше раз требуется нажать Tab для перехода к элементу.

Максимальное значение не должно превышать 32767.

Значение по умолчанию

0

title

Атрибут title добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменён напрямую с помощью HTML-кода или стилей.

Синтаксис

title="<текст>"

Значения

Произвольная текстовая строка.

Значение по умолчанию

Нет.



4 июня 2017 г.