Необычные HTML-теги, с которыми стоит познакомиться

Перевод статьи «Unusual HTML tags worth knowing».

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

Упорядочивание и придание смысла странице, а не только ее представлению, это семантический HTML. Элемент <p> содержит абзац и все знают, как он должен выглядеть.

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

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

<abbr>: аббревиатуры

Этот элемент используется для указания расшифровки аббревиатур (см. пример ниже). С его помощью вы можете добавить расшифровку аббревиатуры, использованной в тексте (на случай, если читатель с ней не знаком), не загромождая сам текст. Для этого используется атрибут title.

See the Pen <abbr> example by Christopher Kade (@christopherkade) on CodePen.

Docs

<dfn>: определения

Этими тегами можно окружить слово, которое поясняется в контексте предложения. Родительные элементы <p>, <dt>/<dd> или <section> будут при этом считаться определением выделенного слова.

See the Pen <dfn> example by Christopher Kade (@christopherkade) on CodePen.

Docs

<address>: контактная информация

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

See the Pen <address> example by Christopher Kade (@christopherkade) on CodePen.

Контактная информация может включать имена мейнтейнеров документа, ссылки на их веб-страницы, e-mail для фидбэка, телефонные номера и т. д. Но элемент address не следует применять для обычного почтового адреса, изложенного простым текстом в столбик!

Docs

<cite>: цитирование

Этот элемент используется для указания источника цитаты.

See the Pen <cite> example by Christopher Kade (@christopherkade) on CodePen.

Docs

<del>: удаленный текст

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

See the Pen <del> example by Christopher Kade (@christopherkade) on CodePen.

Docs

<hgroup>: многоуровневые заголовки

При помощи этого тега можно сгруппировать заголовки в документе (<h1>-<h6>). Таким образом подзаголовки не будут создавать отдельные, собственные разделы.

See the Pen <hgroup> example by Christopher Kade (@christopherkade) on CodePen.

Этот элемент был удален из спецификаций HTML5 (W3C), но он по-прежнему есть в WHATWG-версии HTML. Он частично реализован в большинстве браузеров, так что вряд ли исчезнет. Больше информации.

Docs

<ins>: вставленный текст

Этот тег служит для представления участка текста, который был добавлен в документ. Примерно, как на Github показываются замененные строки кода.

See the Pen <ins> example by Christopher Kade (@christopherkade) on CodePen.

Docs

Заключение

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]