В HTML есть более сотни различных элементов, и их все можно применять к фрагментам текста для того, чтобы придать им особое значение в документе. Большинство из нас знает лишь несколько из них, например, элементы <p>, <div> и <body>…
Но на самом деле в дебрях рекомендаций W3C скрыто гораздо больше. Именно поэтому в этой статье я решил углубиться в HTML—документацию, чтобы рассказать о практичном наборе элементов, который улучшит ваш сайт даже не в одном, а в двух аспектах: доступности и SEO.
Вслед за тем, что уже было сказано, давайте начнем!
? <abbr> - Аббревиатура
Это могут быть как сокращения (например, Corporation ? Corp.), так и аббревиатуры (например, Cascading Style Sheets ? CSS). Кроме того, вы можете использовать его атрибут title для того, чтобы указать полную форму слова или аббревиатуры, чтобы программы для чтения с экрана могли ее прочитать, а пользователи могли навести на него курсор и увидеть полную форму.
? <ins> и <del> - Вставка и удаление
Элементы <ins> и <del> показывают фрагменты текста, которые были добавлены или удалены. Вероятно, вы уже могли видеть эти элементы в запросах на включение внесенных изменений в Git.
? <dfn>, <var>, <kbd>, <samp> и <output> - Технические элементы
Это элементы, которые показывают в документе отдельные технически ориентированные части, такие как определения, переменные, нажатие клавиши и т.д.
? <bdo> - Направленность текста
Этот элемент меняет направление текста, чтобы он отображался задом наперед. Управлять им можно с помощью атрибута dir.
Несмотря на то, что это не основной вариант его использования, он все же может перевернуть текст только с помощью HTML!
? <mark> - Выделение текста
Цель данного элемента – выделить текст на подобие того, как если бы вы использовали маркер.
? <area> - Интерактивные области изображений
Этот элемент можно использовать для того, чтобы определенные области вашего изображения стали своего рода ссылками.
? <dl>, <dd> и <dt> - Список описаний
Эти элементы можно использовать для создания семантически точного списка с описаниями, в котором вы определяете несколько терминов в одном блоке текста.
? <sup> и <sub> - Верхние и нижние индексы
С помощью этих двух элементов можно добавлять верхние индексы (например, х2) и нижние индексы (например, х0).
? <figure> и <figcaption> - Маркированные изображения
Для того, чтобы добавить любой элемент по вашему желанию, например, изображение, вы можете использовать <figure>. После чего вы можете добавить <figcaption> в качестве его последнего дочернего элемента, где вы можете добавить текст, который будет описывать то, что находится выше него.
? <progress> и <meter> - Отслеживание прогресса
Эти элементы позволяют создавать семантически точные элементы индикатора протекания процесса, которые показывают, сколько еще осталось до его завершения.
? <details> - Раскрываемые меню
Этот элемент можно использовать для того, чтобы создать свое собственное меню, которое будет иметь название и сможет раскрываться при нажатии кнопки. JavaScript здесь не потребуется.
? <dialog> - Всплывающие диалоговые окна
С помощью этого элемента можно создавать семантически точные диалоговые окна. Сам по себе он мало что может, поэтому вам придется также использовать CSS и JavaScript, чтобы добавить функциональности.
? <datalist> - Рекомендации по текстовому вводу
Этот элемент позволяет вручную добавлять варианты для текстового ввода. Вы можете добавить все, что захотите!
? <fieldset> - Группировка элементов формы
С помощью элемента <fieldset> можно сделать свои формы более аккуратными и удобными для пользователя.
? <object> - Встраивание внешних объектов
С помощью этого потрясающего элемента вы можете встроить практически любой файл в свой сайт! Чаще всего поддерживаются файлы формата PDF, YouTube-видео и т.д.
? <noscript> - Если JavaScript отключен
Этот элемент можно использовать для отображения хотя какого-то содержимого сайта, когда в браузере JavaScript отключен. Часто его используют веб-сайты, который сильно зависят от JavaScript, например, одностраничные приложения (SPAs - Single Page Applications).
