1.3. HTML-атрибуты
HTML-атрибуты это специальные слова, которые управляют поведением HTML-элемента. Они добавляют дополнительную функциональность, либо меняют поведение элемента по умолчанию. Атрибуты элемента выражаются внутри начального тега элемента.
Атрибут имеет имя и значение. Имена атрибутов должны состоять из одного или нескольких символов, кроме управляющих, таких как пробел, ", ', >, / и =. Имена и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Некоторые атрибуты не требуют значение, потому что у них есть только одна опция. Они называются логическими атрибутами.
Атрибуты могут быть указаны четырьмя различными способами:
- имя атрибута, например, disabled
- значение атрибута без кавычек, например, autocapitalize=sentences
- значение атрибута в одинарных кавычках, например, type='checkbox'
- значение атрибута в двойных кавычках, например, class="external icon-link"
Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.
| Атрибут | Описание, принимаемое значение |
|---|---|
| accesskey | Значение атрибута используется браузером в качестве руководства для создания сочетания клавиш, которое активирует или фокусирует элемент. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры.
Синтаксис: accesskey="A" |
| autocapitalize | Дает подсказку браузеру, каким образом вводимый текст будет автоматически писаться с заглавной буквы при вводе/редактировании пользователем. Атрибут не влияет на поведение при наборе текста на физической клавиатуре, только на поведение других механизмов ввода, таких как виртуальные клавиатуры на мобильных устройствах и голосовой ввод. Атрибут autocapitalize никогда не приводит к автоматическому включению заглавных букв для элемента <input> типа url, email или password.
Разрешенные значения: on или sentences — первая буква каждого предложения по умолчанию заглавная; все остальные буквы по умолчанию в нижнем регистре. words — первая буква каждого слова по умолчанию заглавная; все остальные буквы по умолчанию в нижнем регистре. characters — все буквы по умолчанию должны быть в верхнем регистре. Синтаксис: autocapitalize="sentences" |
| autofocus | Логический атрибут, указывающий, что элемент должен быть сфокусирован при загрузке страницы или при отображении <dialog>, частью которого он является. Не более одного элемента в документе или диалоговом окне может иметь атрибут autofocus. Если применить к нескольким элементам, то фокус получит первый из них.
Синтаксис: autofocus |
| class | Представляет собой разделенный пробелом список классов элемента с учетом регистра. Классы позволяют CSS и Javascript выбирать и получать доступ к элементам с помощью селекторов классов или функций, таких как метод DOM document.getElementsByClassName.
Синтаксис: class="toc" class="external icon-link" |
| contenteditable | Указывает, может ли элемент быть доступным для редактирования пользователем. Цвет курсора в области редактирования можно изменить с помощью CSS-свойства caret-color.
Разрешенные значения: false — элемент недоступен для редактирования. Синтаксис: contenteditable="false" |
| data-* | Создает пользовательские атрибуты данных, которые позволяют сценариям обмениваться информацией между HTML и его представлением DOM. Доступ к ним дает свойство HTMLElement.dataset.
Символ * может быть заменен любым именем в соответствии с правилом создания имен XML со следующими ограничениями: Синтаксис: <img class="spaceship cruiserX3" src="shipX3.png" |
| dir | Указывает направление текста элемента. Является обязательным для элемента <bdo>.
Разрешенные значения: rtl — справа налево и должно использоваться для языков, которые пишут справа налево (например, арабский). auto — позволяет браузеру использовать базовый алгоритм, который анализирует символы внутри элемента, пока не найдет символ с сильной направленностью, а затем применяет эту направленность ко всему элементу. Синтаксис: dir="auto" |
| draggable | Указывает, можно ли перетаскивать элемент либо с помощью собственного поведения браузера, либо с помощью HTML Drag and Drop API.
Разрешенные значения: false — элемент нельзя перетащить. auto — значение по умолчанию, означает, что поведение перетаскивания является поведением браузера по умолчанию: перетаскивать можно только выделенный текст, изображения и ссылки. Синтаксис: draggable="true" |
| enterkeyhint | Указывает, какой текст или значок должен отображаться на клавише ввода виртуальной клавиатуры.
Разрешенные значения: done — текст, означающий, что больше нечего вводить, и редактор метода ввода (IME) будет закрыт. go — текст, означающий, что пользователь должен перейти к цели введенного им текста. next — текст, означающий, что пользователь должен перейти к следующему полю, которое будет принимать текст. previous — текст, означающий, что пользователь должен перейти в предыдущее поле, которое будет принимать текст. search — текст, означающий, что пользователь должен перейти к результатам поиска введенного им текста. send — текст, означающий, что пользователь должен отправить введенный текст. Синтаксис: enterkeyhint="go" |
| hidden | Указывает браузеру, что элемент должен быть скрыт.
Синтаксис: hidden |
| id | Определяет уникальный идентификатор элемента. Его цель — идентифицировать элемент при связывании (используя идентификатор фрагмента — якорь), сценарии или стилизации с помощью CSS. Значение id не должно содержать пробелов. В отличие от атрибута class, элементы могут иметь только одно единственное значение идентификатора.
Синтаксис: id="content" |
| inputmode | Указывает, какой механизм ввода будет наиболее полезен для пользователей, что позволяет браузеру отображать соответствующую виртуальную клавиатуру. Браузеры могут поддерживать данный атрибут в элементах управления формы, например, <textarea>, или в элементах, для которых задан атрибут contenteditable.
Разрешенные значения: text — значение по умолчанию, отображается виртуальная клавиатура для ввода текста. decimal — отображается клавиатура для ввода дробных чисел, содержащая цифры и десятичный разделитель для языкового стандарта пользователя (обычно . или ,). Устройства могут отображать или не отображать клавишу -. numeric — отображается цифровая клавиатура ввода. Устройства могут отображать или не отображать клавишу -. Это ключевое слово полезно для ввода PIN-кода. tel — отображается клавиатура с возможностью ввода номера телефона. Она включает клавиши для цифр от 0 до 9, символ # и *. Поля, для которых требуется номер телефона, обычно должны использовать вместо этого <input type="tel">. search — отображается клавиатура, оптимизированная для поиска. Например, клавиша возврата/отправки может быть помечена как «Поиск» вместе с возможными другими оптимизациями. Поля, требующие поискового запроса, должны использовать вместо этого <input type="search">. email — отображается клавиатура, оптимизированная для ввода адресов электронной почты, например, с символами @ и .. Для полей, которым требуются адреса электронной почты, следует использовать <input type="email">. url — отображается клавиатура, оптимизированная для ввода URL-адресов, например, с символами / и . и строками www. или .com. Для полей, которым требуется URL-адрес, вместо этого обычно следует использовать <input type="url">. Синтаксис: inputmode="numeric" |
| is | Атрибут является частью спецификации пользовательских элементов, он указывает, что существующий стандартный элемент на самом деле является пользовательским элементом, а значение атрибута задает его имя.
Синтаксис: <p is="word-count"> |
| itemid | Предоставляет микроданные в виде уникального глобального идентификатора элемента. Например, книги можно идентифицировать по номеру ISBN. Словари, определяемые атрибутом itemtype, могут быть разработаны таким образом, чтобы элементы однозначно ассоциировались со своим глобальным идентификатором, выражая глобальные идентификаторы в виде URL-адресов, заданных в атрибуте itemid. Точное значение URL-адресов, указанных в itemid, зависит от используемого словаря.
Атрибут может быть указан только для элемента, для которого заданы атрибуты itemscope и itemtype. Синтаксис: itemid="urn:isbn:0-330-34032-8" |
| itemprop | Описывает свойства сущности.
Синтаксис: itemprop="name" |
| itemref | Свойства, которые не являются потомками элемента с атрибутом itemscope, могут быть связаны с элементом с помощью глобального атрибута itemref. itemref предоставляет список идентификаторов элементов (не itemid) в другом месте документа с дополнительными свойствами. Атрибут может быть указан только для элементов, для которых указан атрибут itemscope.
Атрибут itemref не является частью модели данных микроданных. Это просто синтаксическая конструкция, помогающая авторам добавлять аннотации к страницам, где аннотируемые данные не соответствуют древовидной структуре. Например, он позволяет авторам размечать данные в таблице, чтобы каждый столбец определял отдельный элемент, сохраняя свойства в ячейках. Синтаксис: itemref="a b" |
| itemscope | Используется для установки области, указывая, что HTML-код, содержащийся в данном блоке, описывает некоторую сущность, заданную itemtype.
Синтаксис: itemscope |
| itemtype | Указывает тип сущности, описанной в словаре по данному url.
Синтаксис: itemtype="http://schema.org/Movie" |
| lang | Указывает основной язык для содержимого элемента и для любого из атрибутов элемента, содержащих текст. Его значение должно быть допустимым языковым тегом BCP 47 или пустой строкой. Установка для атрибута пустой строки означает, что основной язык неизвестен.
Синтаксис: lang="en-GB" |
| nonce | Определяет криптографический одноразовый номер, который может использоваться политикой безопасности контента для определения того, будет ли разрешена данная выборка для данного элемента. Атрибут полезен для включения элементов, таких как встроенный <script> или <style> в список разрешенных, что поможет избежать использования директивы CSP unsafe-inline.
Синтаксис: nonce="8IBTHwOdqNKAWeKl7plt8g==" |
| slot | Используется для назначения слота элементу.
Синтаксис: slot="title" |
| spellcheck | Определяет, может ли элемент быть проверен на наличие орфографических ошибок, является просто подсказкой для браузера. Если этот атрибут не установлен, его значение по умолчанию определяется типом элемента и браузером.
Разрешенные значения: false — элемент не следует проверять на орфографические ошибки. Синтаксис: spellcheck="false" |
| style | Содержит объявления стилей CSS, которые следует применить к элементу. Рекомендуется определять стили в отдельном файле или файлах. Этот атрибут и элемент <style> в основном предназначены для быстрой настройки стилей, например, для целей тестирования.
Синтаксис: style="color: blue; background: transparent" |
| tabindex | Указывает, что элемент может быть сфокусирован для перемещения вперед через последовательно фокусируемые области (обычно с помощью клавиши Tab). Атрибут tabindex, если он указан, должен иметь целое значение.
Отрицательное значение означает, что элемент недоступен с помощью последовательной навигации с клавиатуры, но его можно сфокусировать с помощью JavaScript или визуально, щелкнув мышью. Нулевое значение означает, что элемент должен находиться в фокусе при последовательной навигации с помощью клавиатуры после любых положительных значений tabindex, а его порядок определяется исходным порядком документа. Положительное значение означает, что элемент должен находиться в фокусе при последовательной навигации с помощью клавиатуры, а его порядок определяется значением числа. Синтаксис: tabindex="-1" |
| title | Содержит дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Атрибут title может содержать несколько строк, каждый символ перевода строки добавляет ее разрыв. Если элемент не имеет атрибута title, то он наследует его от своего родительского элемента, который, в свою очередь, может наследовать его от своего родительского элемента и так далее. Если для этого атрибута задана пустая строка, это означает, что заголовки его родительских элементов не будут отображаться для этого элемента.
Синтаксис: title="Hypertext Transport Protocol" |
| translate | Указывает, следует ли переводить переводимые значения атрибута элемента и его дочерние текстовые узлы при переводе страницы. Хотя не все браузеры распознают этот атрибут, он учитывается системами автоматического перевода, такими как Google Translate, а также может учитываться инструментами, используемыми людьми-переводчиками. Поэтому важно, чтобы веб-авторы использовали этот атрибут, чтобы пометить контент, который не следует переводить.
Разрешенные значения: no — элемент не должен быть переведен. Синтаксис: translate="no" |