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

Семантика текста в HTML5

HTML5 представил много новых семантических элементов, которые делают возможной легкую организацию контента. Они помогают не только организовать контент на уровне всего документа (подробности см. В следующем разделе), но и внутри текстовых блоков, как встроенные теги..

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

См. Этот список для всех семантических элементов текстового уровня, которые используются в настоящее время.

Структура документа в HTML5

Структура документа - это структура документа HTML. Он показывает, как элементы связаны друг с другом. Схема документа была сгенерирована исключительно с помощью элементов отображения, таких как заголовки, заголовки таблиц, заголовки форм и другие, в более ранних версиях HTML, таких как HTML4.01 и XHTML..

В HTML5 алгоритм выделения был улучшен новыми элементами секционирования, а именно:

• за разделы, сгруппированные вокруг определенной темы
• за законченные или автономные композиции такие как сообщение в блоге или виджет
• за навигационные блоки
• за дополнительный контент, такой как боковые панели.

В HTML5 есть пятый элемент секционирования, но он не новый, это тег.

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

Советы по семантически структурированному контенту

Если мы хотим создать хорошо структурированную схему документа, нам нужно обратить внимание на следующие правила:

1. Самым внешним элементом секционирования всегда является тег.

2. Разделы в HTML5 могут быть вложенными.

3. Каждый раздел имеет свою собственную иерархию заголовков. Каждый из них (даже самый внутренний вложенный раздел) может иметь h1 тег.

4. Хотя структура документа в основном определяется 5 элементами секционирования, для него также необходимы соответствующие заголовки для каждого раздела..

5. Это всегда первый элемент заголовка (пусть это будет h1 или тег заголовка более низкого ранга), который определяет заголовок данного раздела. Следующие теги заголовков внутри одного и того же раздела должны быть относительно этого. (Если первый заголовок - это h3 внутри элемента секционирования, не ставьте h3 после этого.)

6. Разделы, определенные

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

7. Каждый раздел (body, section, article, aside, nav) может иметь свой собственный

а также теги, которые определяют заголовок (например, логотип, имя автора, даты, метаинформацию и т. д.) и нижний колонтитул (авторские права, примечания, ссылки и т. д.) этого раздела.

Пример: семантическая схема

Давайте посмотрим на пример семантического контура документа, чтобы понять, как он работает. Наш пример кода приведет к следующей структуре документа:

А вот код с правильным семантическим разделением:

  
 
Добро пожаловать на наш сайт!
 
Вот наш логотип и слоган.
 
  
 
 
Название статьи
 
Подзаголовок статьи
 
 
 
Первая логическая часть (например, «Теория»)
 
Пункт 1 в первом разделе
 
Некоторые другие подзаголовки в первом разделе
 
Пункт 2 в первом разделе
 
 
 
Вторая логическая часть (например, «Практика»)
 
Пункт 1 во втором разделе
 
Пункт 2 во втором разделе
 
  
    

Если вы посмотрите на фрагмент кода выше, вы увидите, что верхние и нижние колонтитулы являются необязательными, мы можем свободно выбирать, хотим мы их использовать или нет, но это Настоятельно рекомендуется всегда включать заголовок для каждого раздела, в противном случае раздел будет “Без названия” в структуре документа.

К счастью, в Интернете есть много отличных инструментов, которые позволяют нам проверять схему документа, на этот раз мы будем использовать инструмент Outliner из html5.org..

Если мы вставим наш фрагмент кода в форму, предоставленную планировщиком, и щелкните “Описать это!” На кнопке мы увидим следующий результат:

Это набросок документа нашего примера кода, это то, как поисковые системы видят это, и программы чтения с экрана читают это своим слабовидящим пользователям. Это семантически, хорошо структурировано, и там нет неприятного “Без названия” разделы в нем.

Если вы хотите посмотреть, как выглядит раздел «Без названия» в Outliner, просто удалите некоторые теги заголовков в примере кода..

Другие аспекты веб-семантики

Семантические HTML-теги и контуры документов - это лишь малая часть веб-семантики. Содержимое веб-страницы можно сделать еще более значимым с помощью протокола доступности WAI-ARIA и структурированных данных, которые можно использовать вместе с протоколом RDFa, микроданными или разметкой JSON-LD..