Атрибуты

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

Атрибуты — это то, что делает 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">

Если значение атрибута ложно, опустите атрибут. Если атрибут имеет значение 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"> .

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

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

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

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

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

id

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

Значение id представляет собой строку без пробелов. Если он содержит пробел, документ не сломается, но вам придется указать id с помощью escape-символов в HTML, CSS и JS. Все остальные символы действительны. Значением 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 для обеспечения доступности и удобства использования не ограничивается метками. Во введении к text <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.

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

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

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

role

Атрибут role является частью спецификации ARIA , а не HTML-спецификации WHATWG . Атрибут 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> есть несколько пользовательских атрибутов. Свойство набора данных означает, что вам не нужно знать, что это за настраиваемые атрибуты, чтобы получить доступ к их именам и значениям: 

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

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

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

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

id должен быть уникальным в документе.

ЛОЖЬ
Попробуйте еще раз.
Истинный
Правильный!

Выберите правильно сформированный пользовательский атрибут.

data-birthday
Правильный
birthday
Попробуйте еще раз.
data:birthday
Попробуйте еще раз