Логика

<hgroup> Объединяет блоки в группу для одного заголовка

<hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>

<address> размечается контактная информация о человеке, людях или организации.

<time> - для вывода даты и времени

https://doka.guide/html/time/

<search> - Семантический тег-обёртка для блока с поиском или фильтром

<menu> - для создания выпадающего или иного меню, не является навигацией


<figure> - небольшая группа элементов, объединённые общим смыслом

<figure> представляет автономное содержимое (необязательно с подписью), являющееся самостоятельным элементом основного потока.

С помощью элемента можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.

<figcaption> - описание для группы элементов внутри <figure>

Можно использовать для:

  • изображения и описания к нему;

  • отформатированный блок текста (код) и описание;

  • Автора и цитату


<dl> - список терминов

<dt> - термин в списке терминов

<dd> - определение термина

<dfn> используется для вывода терминов или расшифровки сокращений.

У <dfn> есть встроенная роль term. Скринридеры не рассказывают о роли, но зачитывают саму аббревиатуру и её расшифровку из title.

<dl> и <dt> можно использовать в качестве альтернативы списку <ul> -> <li>. Например в футере, список из социальных сетей или способов связи.

<temaplate> Это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.

<fieldset> группирует элементы формы (поля ввода <input>, <textarea>, выпадающие списки <select> и другие) в блок с характерным выделением границ. Опционально с помощью тега <legend> внутри <fieldset> можно задать заголовок для создаваемой группы (он может быть только один и обязательно должен идти первым вложенным элементом).

<wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если текст не влезает в родительский элемент. Это полезно для адаптивной вёрстки если у вас в тексте есть длинные слова или, например, ссылки.

<video> - для вывода видео

<audio> - для вывода аудио

<data> позволяет хранить в своём содержимом данные в формате, понятном человеку, а в атрибуте value — в формате, понятном машинам.

Жили у бабуси <data value="2">два</data> весёлых гуся.

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

<ins> используется для отображения добавленного контента. Например, нового пункта в списке дел или новой части кода.

У тега есть встроенная роль insertion. Благодаря ей пользователи скринридеров знают, что содержимое было добавлено.

<kbd> обозначает пользовательский ввод: с клавиатуры, голосом, указателем или другим образом.

<output> позволяет выводить результаты вычислений или действий пользователя. Относится к элементам семантической вёрстки.

У тега есть встроенная роль status. Благодаря ей скринридеры и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется. Это делает часть страницы интерактивной или «живой» областью.

<samp> используется для оформления вывода данных, которые показываются пользователю в результате выполнения программы. Содержимое этого элемента воспринимается устройствами как простой текст.

Last updated