Семантические HTML-теги

Что такое семантические HTML-теги?

Семантический HTML-тег четко описывает, что представляет собой элемент.

Такие элементы, как <header>, <footer> и <article>, считаются семантическими. Они описывают назначение элемента и тип содержимого внутри элемента.

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

Зачем нам использовать семантические HTML-теги?

1. Сделать наш сайт более доступным (улучшение пользовательского опыта).
2. Улучшить сканирование нашего сайта поисковыми системами (улучшение SEO и поисковой видимости).

Что такое доступность (accessibility)?

Если взять определение из Википедии:

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

Применяя это к нашей области веб-разработки, мы понимаем это так:

"Веб-доступность означает, что кто угодно в любой момент может использовать ваш сайт".

Если пользователь видит сайт, ему легко понять, что такое боковая панель. Легко понять, что такое навигация. Легко понять, что такое основной контент. Пользователь, который способен видеть, может не заботиться о разнице между обычным <div> и тегом <main>. Для него нет особой разницы.

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

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

Как использовать семантические теги в Webflow

Webflow сделало добавление семантических HTML-тегов очень простым.

Чтобы изменить тег элемента, сделайте следующее:

1. Выберите элемент
2. Перейдите в панель настроек (D)
3. Выберите тег из выпадающего списка

Как мне выбрать, какой тег использовать?

Эти короткие описания взяты прямо из Webflow Designer:

• Верхняя часть (Header) - определяет верхнюю часть документа или секции
• Нижняя часть (Footer) - определяет футер документа или секции
• Навигация (Nav) - определяет навигационные ссылки страницы
• Основная часть (Main) - определяет основное содержимое страницы
• Секция (Section) - определяет секцию на странице
• Статья (Article) - определяет статью на странице
• Сторонняя часть (Aside) - определяет содержимое, отличное от основного содержимого страницы
• Адрес (Address) - определяет контактную информацию автора/владельца страницы или статьи
• Медиа-контент (Figure) - определяет сгруппированное содержимое, такое как иллюстрации, диаграммы, фотографии, блоки кода и т.д.
• Заголовки (H1-H6) - эти элементы представляют уровни заголовков секций от самого высокого до самого низкого

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

Основная семантическая структура

Для начала мы сосредоточимся на Верхней части (Header), Основной части (Main) и Нижней части (Footer).

Верхняя часть - <header>

Тег заголовка чаще всего используется для обозначения панели навигации сайта. В подходе Client-First мы, скорее всего, добавим этот тег к нашему nav_component или к чему-то подобному.

Но он также может указывать заголовок секции или статьи.

Оба этих подхода правильны.

Согласно W3Schools, на странице может быть более одного тега <header>. Однако <header> не может быть размещен внутри <footer>, <address> или другого <header> элемента.

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

Например, если мы посмотрим на статью на сайте usa.gov, увидим, что каждый заголовок (<h1> - <h6>) обернут тегом заголовка.

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

Основная часть - <main>

Тег main определяет основное содержимое нашей страницы. На большинстве страниц тег <main> используется для оборачивания "основного" содержимого страницы. Это обычно все, что находится между <header> и <footer>.

Содержимое внутри элемента <main> должно быть уникальным для страницы.

• <header> и <footer> не должны быть включены в тег <main>.
• Тег <main> не должен содержать никакого контента, который повторяется на страницах, такого как боковые панели, навигационные ссылки, информация об авторских правах, логотипы сайтов, формы поиска или согласие на использование персональных данных.

Наиболее распространенными тегами, которые мы увидим внутри main, являются секции и статьи.

В подходе Client-First мы добавляем тег <main> к нашему классу main-wrapper.

Нижняя часть - Футер -  <footer>

Элемент <footer> обычно содержит:

• Информацию об авторе
• Информацию об авторских правах
• Контактную информацию
• Карту сайта
• Ссылки "наверх"
• Связанные документы

Тег <footer> относится к ближайшему родительскому элементу. Это может быть либо секция, либо вся страница.

Например, у нас может быть футер внизу статьи, который относится к статье. У нас также может быть другой футер внизу нашей страницы, который является общим футером страницы.

Секция - <section>

Тег <section> используется для разделения на части нашей веб-страницы.

Секции всегда должны иметь заголовок, за очень редкими исключениями.

В большинстве случаев у нас будет несколько Секций <section> в нашей Основной части <main>.

Вот простой пример сайта, разделенного на секции.

Обратите внимание, что у нас также могут быть секции внутри тега статьи, и наоборот. У нас даже могут быть секции внутри секций.

Статья - <article>

Тег <article> определяет независимое, законченное содержимое.

Статья должна иметь смысл сама по себе, и ее должно быть возможно использовать независимо от остальной части сайта.

Распространенное заблуждение заключается в использовании тегов <article> только в блоговых постах.

Мы можем использовать тег <article> для любого из следующего:

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

Сторонняя часть -  <aside>

Тег <aside> определяет некоторый контент "в стороне" от основного контента.

Содержание внутри тега aside должно быть связано с окружающим его контентом.

Используйте тег <aside> для следующих элементов:

• Боковые панели, связанные со страницей
• Связанные ссылки
• Связанный контент
• Реклама
• Содержание

Элемент <aside> должен находиться внутри связанного элемента секции. Это означает, что если наш aside относится к какой-либо секции, то он должен быть внутри этой секции.

Если наш <aside> относится ко всей странице, тогда поместите его вне любого тега секции. Например, мы могли бы разместить его рядом с <main>.

Навигация -  <nav>

Элемент nav определяет список навигационных ссылок.

Вот некоторые общие места, где мы можем использовать тег <nav>:

• Ссылки в меню
• Ссылки на боковой панели
• Содержание
• Ссылки в футере
• Хлебные крошки

Заголовки - <h1> - <h6>

Элементы h1 до h6 представляют шесть уровней заголовков секции. <h1> - это самый высокий уровень, а <h6> - самый низкий.

Используйте только один h1 на странице

<h1> должен быть заголовком нашей страницы.

Когда пользователь попадает на наш сайт и читает заголовок <h1>, он должен понимать, о чем эта страница. Наш <h1> должен быть описательным и понятным.

Иерархия заголовков

Используйте тег <h2> для описания тем внутри <h1>.

Тег <h3> следует использовать для описания тем внутри <h2> и так далее.

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

Из-за этого важно не пропускать уровни заголовков. Пропуск уровня заголовка может вызвать путаницу. Человек или сканер может потерять логическую связанность контента, если обнаружится пропущенный заголовок.

Адрес - <address>

Тег <address> указывает контактную информацию автора/владельца страницы или статьи.

На странице может быть больше одного тега <address>.

Если мы помещаем тег <address> внутрь <article>, то он относится к статье.

Когда тег <address> размещается вне статьи, то он относится ко всей странице.

Например, если мы включаем адрес нашей компании в футер, тег <address> будет относиться ко всей странице.

Медиа-контент - <figure>

Тег <figure> обозначает сгруппированный медиа-контент, например иллюстрации, диаграммы, фотографии, листинги и т.д.

Хотя содержимое элемента <figure> относится к основной части страницы, оно должно быть независимо. Удаление элемента <figure> не должно влиять на структуру страницы.

Мы могли заметить, что тег <figure> автоматически добавляется вокруг любого изображения или видео Rich Text, когда мы добавляем описание.

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

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

Клонируемый проект с семантической HTML разметкой

Мы разработали клонируемый проект, который описывает семантические теги HTML в проекте Webflow. Этот проект помогает нам визуализировать правильное использование семантических тегов HTML.

Вы можете скопировать Проект с семантической HTML разметкой здесь.