Атрибуты

Атрибуты кратко обсуждались в разделе «Обзор HTML» ; настало время для более глубокого погружения.

Атрибуты — это то, что делает HTML таким мощным. Атрибуты — это имена и пары «имя/значение», разделённые пробелами, которые появляются в открывающем теге и предоставляют информацию об элементе и его функциональности.

Атрибуты определяют поведение, связи и функциональность элементов. Некоторые атрибуты являются глобальными, то есть могут присутствовать в открывающем теге любого элемента. Другие атрибуты применяются к нескольким элементам, но не ко всем, а третьи относятся к конкретному элементу и относятся только к одному. В HTML все атрибуты, кроме булевых и, в некоторой степени, перечисляемых, требуют указания значения.

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

Хотя HTML нечувствителен к регистру, некоторые значения атрибутов чувствительны к регистру. Значения, входящие в спецификацию HTML, нечувствительны к регистру. Определенные строковые значения, такие как имена классов и идентификаторов, чувствительны к регистру. Если значение атрибута чувствительно к регистру в HTML, оно также чувствительно к регистру при использовании в селекторе атрибутов в CSS и JavaScript; в противном случае — нет.

<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">

<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">

Булевы атрибуты

Если присутствует логический атрибут, он всегда имеет значение true. К логическим атрибутам относятся autofocus , inert , checked , disabled , required , reversed , allowfullscreen , default, loop , autoplay , controls , muted , readonly , multiple, и selected . Если присутствует один (или несколько) из этих атрибутов, элемент отключён, обязателен, доступен только для чтения и т. д. Если отсутствует, элемент не является таковым.

Булевы значения могут быть опущены, установлены в качестве пустой строки или быть именем атрибута; но значение не обязательно должно быть равно строке true . Все значения, включая true , false и 😀 , хотя и недействительны, будут преобразованы в true .

Эти три тега эквивалентны:

<input required>
<input required="">
<input required="required">

Если значение атрибута равно false, опустите атрибут. Если значение атрибута равно true, включите атрибут, но не указывайте значение. Например, required="required" не является допустимым значением в HTML; но поскольку required — логическое значение, недопустимые значения преобразуются в true. Однако, поскольку недопустимые перечисляемые атрибуты не обязательно преобразуются в то же значение, что и отсутствующие значения, проще привыкнуть к пропуску значений, чем запоминать, какие атрибуты являются логическими, а какие — перечисляемыми и потенциально могут содержать недопустимое значение.

При переключении между значениями true и false добавляйте и удаляйте атрибут полностью с помощью JavaScript, а не переключайте значение.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

Обратите внимание, что в языках XML, таких как SVG, все атрибуты должны включать значение, включая логические атрибуты.

Перечисленные атрибуты

Перечисляемые атрибуты иногда путают с логическими атрибутами. Это HTML-атрибуты с ограниченным набором предопределённых допустимых значений. Как и логические атрибуты, они имеют значение по умолчанию, если атрибут присутствует, но значение отсутствует. Например, если вы добавляете <style contenteditable> , по умолчанию будет установлено значение <style contenteditable="true"> .

Однако, в отличие от булевых атрибутов, отсутствие атрибута не означает, что он ложный; существующий атрибут с отсутствующим значением не обязательно является истинным; а значение по умолчанию для недопустимых значений не обязательно совпадает со строкой null. Продолжая пример, contenteditable по умолчанию inherit , если отсутствует или недопустим, и может быть явно установлено в false .

Значение по умолчанию зависит от атрибута. В отличие от логических значений, атрибуты не имеют автоматического значения «true» при наличии. Если вы добавляете <style contenteditable="false"> , элемент становится недоступным для редактирования. Если значение недопустимо, например, <style contenteditable="😀"> , или, что удивительно, <style contenteditable="contenteditable"> , значение недопустимо и по умолчанию inherit .

В большинстве случаев с перечисляемыми атрибутами отсутствующие и недопустимые значения совпадают. Например, если атрибут type элемента <input> отсутствует, присутствует, но не имеет значения, или имеет недопустимое значение, по умолчанию используется text . Хотя такое поведение встречается часто, оно не является правилом. Поэтому важно знать, какие атрибуты являются логическими, а какие — перечисляемыми; по возможности опускайте значения, чтобы не ошибиться, и при необходимости проверяйте их значение.

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

Глобальные атрибуты — это атрибуты, которые можно задать для любого HTML-элемента, включая элементы в теге <head> . Существует более 30 глобальных атрибутов . Хотя теоретически все они могут быть добавлены к любому HTML-элементу, некоторые глобальные атрибуты не действуют при установке для некоторых элементов. Например, если задать для тега <meta> значение hidden , то метаконтент не будет отображаться.

id

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

• Цель идентификатора фрагмента ссылки.
• Определение элемента для написания сценария.
• Связывание элемента формы с его меткой.
• Предоставление маркировки или описания для вспомогательных технологий.
• Нацеливание стилей (высокая специфичность или селекторы атрибутов) в CSS.

Значение id — это строка без пробелов. Если оно содержит пробел, документ не будет поврежден, но вам придётся использовать экранированные символы для обозначения id в HTML, CSS и JavaScript. Все остальные символы допустимы. Значение id может быть 😀 или .class , но это не лучшая идея. Чтобы упростить себе и будущему программирование, сделайте первый символ id буквой и используйте только буквы ASCII, цифры, _ и - . Рекомендуется разработать соглашение об именовании id и придерживаться его, поскольку значения id чувствительны к регистру.

id должен быть уникальным для документа. Макет страницы, скорее всего, не нарушится, если id будет использован несколько раз, но JavaScript, ссылки и взаимодействие с элементами могут работать не так, как ожидается.

Идентификатор фрагмента ссылки

Панель навигации содержит четыре ссылки. Мы рассмотрим элемент ссылки позже, но пока отметим, что ссылки не ограничиваются URL-адресами на основе HTTP; они могут быть идентификаторами фрагментов разделов страницы в текущем документе (или в других документах).

На сайте семинара по машинному обучению навигационная панель в заголовке страницы содержит четыре ссылки:

Атрибут href предоставляет гиперссылку, на которую перенаправляется пользователь при активации ссылки. Если URL-адрес содержит символ решётки ( # ), за которым следует строка символов, эта строка является идентификатором фрагмента. Если эта строка совпадает с id элемента на веб-странице, фрагмент является якорем или закладкой на этот элемент. Браузер прокрутит страницу до точки, где определён якорь.

Эти четыре ссылки указывают на четыре раздела нашей страницы, идентифицируемые атрибутом id . Когда пользователь нажимает на любую из четырёх ссылок в панели навигации, элемент, на который ссылается идентификатор фрагмента (элемент, содержащий совпадающий идентификатор без символа # , прокручивается и появляется на экране.

Содержание <main> семинара по машинному обучению состоит из четырёх разделов с идентификаторами. Когда посетитель сайта нажимает на одну из ссылок в <nav> , открывается раздел с этим идентификатором фрагмента. Разметка выглядит примерно так:

<section id="reg">
  <h2>Machine Learning Workshop Tickets</h2>
</section>

<section id="about">
  <h2>What you'll learn</h2>
</section>

<section id="teachers">
  <h2>Your Instructors</h2>
  <h3>Hal 9000 <span>&amp;</span> EVE</h3>
</section>

<section id="feedback">
  <h2>What it's like to learn good and do other stuff good too</h2>
</section>

Сравнивая идентификаторы фрагментов в ссылках <nav> , вы заметите, что каждый из них совпадает с id раздела <section> в <main> . Браузер предоставляет нам бесплатную ссылку «наверх страницы». Если задать атрибут href="#top" без учёта регистра или просто href="#" , пользователь будет прокручивать страницу вверх.

Разделитель в виде решётки в href не является частью идентификатора фрагмента. Идентификатор фрагмента всегда является последней частью URL и не отправляется на сервер.

CSS-селекторы

В CSS можно выбрать каждый раздел, используя селектор идентификатора, например #feedback или, для меньшей специфичности , чувствительный к регистру селектор атрибутов [id="feedback"] .

Скриптинг

На сайте MLW.com есть пасхальное яйцо, доступное только пользователям мыши. Щелчок по кнопке выключателя включает и выключает страницу.

Разметка для изображения выключателя света следующая: html <img src="svg/switch2.svg" id="switch" alt="light switch" class="light" /> Атрибут id можно использовать как параметр для метода getElementById() и, с префиксом # , как часть параметра для методов querySelector() и querySelectorAll() .

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

Наша единственная функция JavaScript использует эту возможность для выбора элементов по их атрибуту id :

<script>
  /* switch is a reserved word in js, so we us onoff instead */
  const onoff = document.getElementById('switch');
  onoff.addEventListener('click', function(){
    document.body.classList.toggle('black');
  });
</script>

<label>

HTML-элемент <label> имеет атрибут for , принимающий в качестве значения id элемента управления формы, с которым он связан. Создание явной метки путём добавления id к каждому элементу управления формы и связывания каждого элемента с атрибутом for гарантирует, что каждому элементу управления формы будет присвоена соответствующая метка.

Хотя каждая метка может быть связана только с одним элементом управления формы, элемент управления формы может иметь более одной связанной метки.

Если элемент управления формы вложен между открывающим и закрывающим тегами <label> , атрибуты for и id не требуются: это называется «неявной» меткой. Метки позволяют всем пользователям понять, для чего предназначен каждый элемент управления формы.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

Связь между for и id делает информацию доступной для пользователей вспомогательных технологий. Кроме того, щелчок в любом месте метки переключает фокус на соответствующий элемент, расширяя область щелчка элемента управления. Это полезно не только для людей с ограниченной подвижностью, из-за которой управление мышью становится менее точным, но и для всех пользователей мобильных устройств с пальцами шире, чем у переключателя.

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

При включении переключателей, поскольку метки описывают значение переключателей, мы охватываем все одноименные кнопки в <fieldset> , а <legend> представляет собой метку или вопрос для всего набора.

Другие возможности доступности

Использование id в обеспечении доступности и удобства использования не ограничивается метками. Во введении к тексту раздел <section> был преобразован в ориентир региона путем ссылки на id раздела <h2> в качестве значения aria-labelledby для раздела <section> для предоставления доступного имени:

<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Существует более 50 состояний и свойств aria-* , которые можно использовать для обеспечения доступности. aria-labelledby , aria-describedby , aria-details и aria-owns принимают в качестве своего значения список ссылок id , разделенных пробелами. aria-activedescendant , который идентифицирует текущий сфокусированный элемент-потомок, принимает в качестве своего значения одну ссылку id : ссылку на единственный элемент, имеющий фокус (в каждый момент времени фокус может быть только у одного элемента).

class

Атрибут class предоставляет дополнительный способ нацеливания элементов с помощью CSS (и JavaScript), но не служит никакой другой цели в HTML (хотя фреймворки и библиотеки компонентов могут его использовать). Атрибут class принимает в качестве своего значения список классов элемента, разделённых пробелами, с учётом регистра.

Создание продуманной семантической структуры позволяет выбирать элементы на основе их расположения и функции. Разумная структура позволяет использовать селекторы элементов-потомков, селекторы отношений и селекторы атрибутов. Изучая атрибуты в этом разделе, обратите внимание на то, как можно стилизовать элементы с одинаковыми атрибутами или значениями атрибутов. Дело не в том, что не следует использовать атрибут class, просто большинство разработчиков не понимают, что это часто не нужно.

До сих пор MLW не использовал ни одного класса. Можно ли запустить сайт без имени хотя бы одного класса? Посмотрим.

style

Атрибут style позволяет применять встроенные стили, то есть стили, применяемые к одному элементу, для которого задан этот атрибут. В качестве значения атрибута style используются пары CSS-свойство-значение, при этом синтаксис значения совпадает с содержимым блока стилей CSS: после свойств следует двоеточие, как в CSS, а точка с запятой завершает каждое объявление, следуя за значением.

Стили применяются только к элементу, для которого задан атрибут, при этом потомки наследуют унаследованные значения свойств, если они не переопределены другими объявлениями стилей во вложенных элементах, блоках <style> или таблицах стилей. Поскольку значение эквивалентно содержимому одного блока стилей, примененного только к этому элементу, его нельзя использовать для генерируемого контента, создания анимации по ключевым кадрам или применения каких-либо других at-правил.

Хотя style действительно является глобальным атрибутом, использовать его не рекомендуется. Лучше определить стили в отдельном файле или файлах. Тем не менее, атрибут style может быть полезен во время разработки для быстрого оформления, например, для тестирования. Затем возьмите стиль «решения» и вставьте его в связанный CSS- файл.

tabindex

Атрибут tabindex можно добавить к любому элементу, чтобы он получил фокус. Значение tabindex определяет, будет ли он добавлен в порядок табуляции и, при необходимости, в порядок табуляции, отличный от заданного по умолчанию.

Атрибут tabindex принимает в качестве своего значения целое число. Отрицательное значение (обычно используется -1 ) позволяет элементу получать фокус, например, через JavaScript, но не добавляет его в последовательность табуляции. Значение tabindex , равное 0 , делает элемент доступным для фокусировки и перехода по клавише табуляции, добавляя его в порядок табуляции по умолчанию страницы в исходном коде. Значение 1 или более помещает элемент в приоритетную последовательность фокусировки и не рекомендуется к использованию.

На этой странице реализована функция общего доступа с использованием настраиваемого элемента <share-action> , выполняющего функцию кнопки <button> . Нулевой tabindex добавлен для добавления настраиваемого элемента в порядок табуляции клавиатуры по умолчанию:

<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

role button информирует пользователей экранного диктора о том, что этот элемент должен вести себя как кнопка. JavaScript используется для обеспечения функциональности кнопки, включая обработку событий щелчка и нажатия клавиши , а также нажатие клавиш Enter и Space.

Элементы управления формами, ссылки, кнопки и элементы редактирования содержимого могут получать фокус. При нажатии клавиши Tab фокус перемещается на следующий элемент, на который можно навести фокус, как если бы для него было установлено tabindex="0" . Другие элементы по умолчанию не имеют фокуса. Добавление атрибута tabindex к этим элементам позволяет им получать фокус, когда в противном случае они бы его не получили.

Если документ содержит элементы с tabindex , равным 1 или более, они включаются в отдельную последовательность табуляции. Как вы заметите в Codepen, табуляция начинается в отдельной последовательности, от наименьшего значения к наибольшему, а затем проходит по элементам в обычной последовательности в порядке исходного кода.

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

role

Атрибут role является частью спецификации ARIA , а не спецификации WHATWG HTML . Атрибут role может использоваться для придания семантического значения контенту, позволяя программам чтения с экрана информировать пользователей сайта об ожидаемом взаимодействии пользователя с объектом.

Существует несколько распространённых виджетов пользовательского интерфейса, таких как выпадающие списки , строки меню , списки вкладок и древовидные сетки , не имеющие нативного эквивалента в HTML. Например, при создании шаблона дизайна с вкладками можно использовать роли tab , tablist и tabpanel . Тот, кто физически видит пользовательский интерфейс, на собственном опыте усвоил, как перемещаться по виджету и делать различные панели видимыми, нажимая на соответствующие вкладки. Включение роли tab с <button role="tab"> , когда группа кнопок используется для отображения различных панелей, позволяет пользователю программы чтения с экрана понять, что <button> , находящаяся в фокусе, может отображать связанную панель, а не реализовывать типичную функциональность кнопок.

Атрибут role не меняет поведение браузера и не влияет на взаимодействие с клавиатурой или указателем — добавление role="button" к элементу <span> не превращает его в <button> . Именно поэтому рекомендуется использовать семантические HTML-элементы по их прямому назначению. Однако, если использование нужного элемента невозможно, атрибут role позволяет информировать пользователей программы чтения с экрана о том, что несемантический элемент был преобразован в семантический элемент.

contenteditable

Элемент с атрибутом contenteditable , установленным в true , доступен для редактирования, на него можно установить фокус, и он добавляется в последовательность табуляции, как если бы ему было присвоено tabindex="0" . Contenteditable — это перечисляемый атрибут, поддерживающий значения true и false , со значением по умолчанию inherit , если атрибут отсутствует или имеет недопустимое значение.

Эти три открывающих тега эквивалентны:

<style contenteditable>
<style contenteditable="">
<style contenteditable="true">

Если вы добавите <style contenteditable="false"> , элемент не будет доступен для редактирования (если только он не является редактируемым по умолчанию, как, например, <textarea> ). Если значение недопустимо, например, <style contenteditable="😀"> или <style contenteditable="contenteditable"> , по умолчанию будет использоваться значение inherit .

Для переключения между состояниями запросите значение свойства HTMLElement.isContentEditable , доступного только для чтения.

const editor = document.getElementById("myElement");
if(editor.contentEditable) {
  editor.setAttribute("contenteditable", "false");
} else {
  editor.setAttribute("contenteditable", "");
}

Альтернативно это свойство можно указать, установив для editor.contentEditable значение true , false или inherit .

Глобальные атрибуты можно применять ко всем элементам, даже к элементам <style> . Используя атрибуты и немного CSS, можно создать живой CSS-редактор.

<style contenteditable>
style {
  color: inherit;
  display:block;
  border: 1px solid;
  font: inherit;
  font-family: monospace;
  padding:1em;
  border-radius: 1em;
  white-space: pre;
}
</style>

Попробуйте изменить color style на другой, отличный от inherit . Затем попробуйте изменить style на селектор p . Не удаляйте свойство display, иначе блок стиля исчезнет.

Пользовательские атрибуты

Мы лишь поверхностно рассмотрели глобальные атрибуты HTML. Существует ещё больше атрибутов, которые применяются только к одному элементу или ограниченному набору элементов. Даже при наличии сотен определённых атрибутов вам может понадобиться атрибут, которого нет в спецификации. HTML поможет вам.

Вы можете создать любой пользовательский атрибут, добавив префикс data- . Имя атрибута может начинаться с data- , за которым следует любая последовательность строчных символов, не начинающаяся с xml , и не содержащая двоеточия ( : ).

Хотя HTML допускает ошибки и не сломается, если вы создадите неподдерживаемые атрибуты, начинающиеся не с data , или даже если настраиваемый атрибут начнётся с xml или с : , создание корректных настраиваемых атрибутов, начинающихся с data- , имеет свои преимущества. С настраиваемыми атрибутами данных вы можете быть уверены, что случайно не используете существующее имя атрибута. Настраиваемые атрибуты данных рассчитаны на будущее.

Хотя браузеры не реализуют поведение по умолчанию для каких-либо конкретных атрибутов с префиксом data- , существует встроенный API для работы с наборами данных, позволяющий перебирать настраиваемые атрибуты. Настраиваемые свойства — отличный способ передачи информации, специфичной для приложения, через JavaScript. Добавляйте настраиваемые атрибуты к элементам в формате data-name и обращайтесь к ним через DOM, используя dataset[name] для нужного элемента.

<blockquote data-machine-learning="workshop"
  data-first-name="Blendan" data-last-name="Smooth"
  data-formerly="Margarita Maker" data-aspiring="Load Balancer"
  data-year-graduated="2022">
  HAL and EVE could teach a fan to blow hot air.
</blockquote>

Вы можете использовать getAttribute() используя полное имя атрибута, или воспользоваться более простым свойством dataset .

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

Свойство dataset возвращает объект DOMStringMap с атрибутами data- каждого элемента. В <blockquote> есть несколько настраиваемых атрибутов. Наличие свойства dataset означает, что вам не нужно знать, какие именно это настраиваемые атрибуты, чтобы получить доступ к их именам и значениям:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Атрибуты в этой статье глобальные, то есть их можно применять к любому HTML-элементу (хотя не все из них влияют на эти элементы). Далее мы рассмотрим два атрибута из вступительного изображения, которые мы не рассматривали target и href — а также несколько других атрибутов, специфичных для отдельных элементов, в рамках более подробного изучения ссылок.

Проверьте свое понимание

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