Семантический HTML

Благодаря более чем 100 элементам HTML и возможности создавать собственные элементы существует бесконечное количество способов разметки вашего контента; но некоторые способы — особенно семантически — лучше других.

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

В этой серии статей еще не рассматривались многие элементы HTML, но даже без знания HTML следующие два фрагмента кода показывают, как семантическая разметка может придать контенту контекст. Оба используют подсчет слов вместо ipsum lorem , чтобы сэкономить время на прокрутку — используйте свое воображение, чтобы расширить «тридцать слов» до 30 слов:

В первом фрагменте кода используются <div> и <span> — два элемента без семантического значения.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Вы понимаете, что означают эти слова? Не совсем.

Давайте перепишем этот код с семантическими элементами:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Какой блок кода несет смысл? Используя только несемантические элементы <div> и <span> , вы действительно не сможете определить, что представляет собой содержимое первого блока кода. Второй пример кода с семантическими элементами предоставляет достаточный контекст для того, чтобы непрограммист мог расшифровать цель и значение, даже не сталкиваясь с HTML-тегом. Он определенно предоставляет разработчику достаточный контекст, чтобы понять структуру страницы, даже если он не понимает ее содержание, например, содержимое на иностранном языке.

Во втором блоке кода мы можем понять архитектуру, даже не понимая содержания, поскольку семантические элементы придают смысл и структуру. Вы можете сказать, что первый заголовок — это баннер сайта, а <h1> , вероятно, является названием сайта. Нижний колонтитул — это нижний колонтитул сайта: пять слов могут быть заявлением об авторских правах или служебным адресом.

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

Объектная модель доступности (AOM)

Когда браузер анализирует полученный контент, он создает объектную модель документа (DOM) и объектную модель CSS (CSSOM). Затем он также строит дерево доступности. Вспомогательные устройства, такие как программы чтения с экрана, используют AOM для анализа и интерпретации контента. DOM — это дерево всех узлов документа. AOM похож на семантическую версию DOM.

Давайте сравним, как обе эти структуры документа отображаются на панели специальных возможностей Firefox:

На рисунке 2 во втором блоке кода есть четыре ориентира. Он использует семантические ориентиры, называемые <header> , <main> , <footer> и <nav> для «навигации». Ориентиры обеспечивают структуру веб-контента и обеспечивают возможность навигации по важным разделам контента с помощью клавиатуры для пользователей программ чтения с экрана.

Обратите внимание, что <header> и <footer> являются ориентирами и играют роли banner и contentinfo соответственно, когда они не вложены в другие ориентиры. AOM Chrome показывает это следующим образом:

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

Совершенно очевидно, что использование семантических элементов повышает доступность, а использование несемантических элементов снижает доступность. HTML обычно доступен по умолчанию. Наша задача как разработчиков — защитить доступную по умолчанию природу HTML и обеспечить максимальную доступность для наших пользователей. Вы можете проверить AOM в инструментах разработчика .

Атрибут role

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

Каждый семантический элемент имеет неявную роль, некоторые из которых зависят от контекста. Как мы видели на скриншоте инструментов разработки специальных возможностей Firefox, <header> , <main> , <footer> и <nav> верхнего уровня были ориентирами, а <header> , вложенный в <main> был разделом. На снимке экрана Chrome перечислены роли ARIA этих элементов: <main> — main , <nav> — navigation , а <footer> , поскольку это нижний колонтитул документа, — contentinfo . Если <header> является заголовком документа, ролью по умолчанию является banner , который определяет раздел как глобальный заголовок сайта. Когда <header> или <footer> вложен в элемент секционирования, он не является ориентиром. Это видно на скриншотах обоих инструментов разработчика.

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

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

Используя атрибут role , вы можете присвоить любому элементу роль, в том числе роль, отличную от той, которую подразумевает тег. Например, <button> имеет неявную роль button . С помощью role="button" вы можете семантически превратить любой элемент в кнопку: <p role="button">Click Me</p> .

Хотя добавление role="button" к элементу сообщит средствам чтения с экрана, что элемент является кнопкой, оно не меняет внешний вид или функциональность элемента. Элемент button предоставляет множество функций без каких-либо действий с вашей стороны. Элемент button автоматически добавляется в последовательность упорядочивания вкладок документа, то есть по умолчанию он доступен для фокусировки с клавиатуры. Клавиши Enter и пробел активируют кнопку. Кнопки также имеют все методы и свойства, предоставляемые им интерфейсом HTMLButtonElement . Если вы не используете семантическую кнопку для своей кнопки, вам придется запрограммировать все эти функции обратно. Гораздо проще просто использовать <button> .

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

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

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

Семантические элементы

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

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

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

Далее вы будете использовать семантические элементы для построения структуры документа .

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

Проверьте свои знания семантического HTML.