Атрибуты

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

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

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

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

Хотя 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">

Логические атрибуты

Если присутствует логический атрибут, он всегда истинен. К логическим атрибутам относятся: 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");

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

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

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

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

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

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

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

id

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

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

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

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

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

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

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

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

Эти четыре ссылки указывают на четыре раздела нашей страницы, идентифицируемые по атрибуту 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 есть пасхальное яйцо, доступное только пользователям мыши. Нажатие на выключатель света включает и выключает страницу.

Разметка для изображения выключателя света выглядит следующим образом:

<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 JavaScript, so instead, we use onoff */
  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` принимает список классов элемента, разделенных пробелами и учитывающих регистр.

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

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

style

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

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

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

tabindex

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

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

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

<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` вы знаете, что случайно не используете существующее имя атрибута. Пользовательские атрибуты `data` защищены от устаревания в будущем.

Хотя браузеры не будут реализовывать поведение по умолчанию для каких-либо конкретных атрибутов с префиксом data- -name`, существует встроенный 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 — и несколько других атрибутов, специфичных для элементов, поскольку мы более подробно рассмотрим ссылки.

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

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