Семантические Html-элементы: как правильно структурировать страницу

Семантические HTML-элементы описывают назначение частей страницы: навигацию, основное содержимое, самостоятельную публикацию или тематический раздел. Выбирайте тег по смыслу, а оформление задавайте CSS. Такая структура помогает вспомогательным технологиям и упрощает поддержку кода, но не заменяет доступные названия, логичный порядок заголовков и проверку страницы.

Опорные решения для семантической разметки страницы

• Сначала определите роль блока, затем выбирайте HTML-элемент; внешний вид не определяет семантику.
• Используйте один основной видимый main для главного содержимого страницы.
• Выбирайте nav для значимых групп ссылок, а не для каждой ссылки или списка.
• Оформляйте заголовки по иерархии содержания, а не ради нужного размера шрифта.
• Проверяйте структуру в браузере и с помощью средств доступности: корректный тег сам по себе не гарантирует удобства.

Как выбрать элементы по смыслу, а не по внешнему виду

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

HTML5 семантические теги не являются готовыми стилями. Например, article не обязан выглядеть как карточка, а aside не означает, что блок должен находиться сбоку: расположение задают CSS.

Как выстроить заголовки и области документа

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

У заголовков должна быть понятная иерархия: заголовок уровня h1 описывает тему страницы, а последующие уровни отражают вложенность разделов. Не выбирайте уровень заголовка ради размера текста - визуальное оформление настраивается CSS. Семантические теги HTML примеры ниже показывают роли, а не готовый дизайн.

<main>
  <h1>Уход за комнатными растениями</h1>
  <section>
    <h2>Полив</h2>
    <p>Учитывайте потребности конкретного растения.</p>
  </section>
</main>

Где применять main, header, nav и footer

До внедрения учтите риски: массовая замена тегов может изменить доступную навигацию; неподходящий nav добавит лишнюю область навигации; неверная вложенность затруднит сопровождение; стили или скрипты могут зависеть от прежних селекторов. Вносите изменения небольшими частями и проверяйте шаблон после каждого этапа.

1. Найдите основное содержимое.
   Отметьте центральную часть страницы и оберните её в main. В пределах страницы используйте один основной видимый элемент main; повторяющиеся шапки и меню сайта обычно находятся за его пределами.
2. Разметьте шапку по её функции.
   Используйте header для вводной части страницы или отдельного раздела: например, для названия и вводной информации статьи. Тег не означает обязательного расположения блока вверху экрана.
3. Выделите основную навигацию.
   Поместите значимую группу навигационных ссылок в nav. Если на странице несколько таких областей, снабдите их понятными доступными названиями, чтобы различать их при навигации.
4. Определите контекст нижней части.
   Тег footer подходит для завершающей информации о странице или разделе, например сведений об авторе либо ссылок на связанные материалы. Это не универсальная оболочка для любого блока внизу макета.
5. Сохраните нейтральные контейнеры там, где это точнее.
   Если блоку не подходит специальная роль, оставьте div и при необходимости добавьте осмысленный класс. После правок проверьте, не нарушились ли CSS-селекторы и сценарии, завязанные на старую структуру.

<header>
  <a href="/">Главная</a>
  <nav aria-label="Основная навигация">
    <a href="/catalog/">Каталог</a>
    <a href="/about/">О проекте</a>
  </nav>
</header>
<main>
  <h1>Каталог растений</h1>
</main>
<footer>Контактная информация</footer>

Как размечать самостоятельный контент через article и section

article используйте для самостоятельной публикации, которую можно понять отдельно от окружающей страницы: например, статьи, отзыва или записи блога. section группирует тематически связанные части материала; обычно у такого раздела есть заголовок. Для простого стилистического контейнера без отдельного смысла выбирайте div.

• Убедитесь, что article представляет самостоятельную единицу контента.
• Проверьте, что содержимое section объединено общей темой.
• Добавьте разделу заголовок, если он помогает понять его тему.
• Не используйте section только для получения отступов или фона.
• Проверьте порядок заголовков и убедитесь, что он отражает структуру материала.
• Не вкладывайте элементы друг в друга автоматически: вложенность должна отражать отношения между частями содержимого.

<article>
  <h2>Как пересадить фикус</h2>
  <section>
    <h3>Подготовка</h3>
    <p>Подберите горшок и подготовьте грунт.</p>
  </section>
</article>

Когда семантический элемент вводит в заблуждение

• Тег выбран ради стиля. Не используйте h2 только потому, что его стандартный размер подходит; настройте внешний вид через CSS.
• Любая группа ссылок названа навигацией. Для каждой группы ссылок сначала определите, помогает ли она перемещаться по сайту или странице.
• Каждый контейнер превращён в section. Если у блока нет самостоятельной тематической роли, оставьте нейтральный контейнер.
• В шапке или подвале предполагают фиксированное положение. Семантическое значение header и footer не задаёт расположение на экране.
• Вложенность используется без смысловой причины. Проверьте, действительно ли один раздел является частью другого, а не просто соседствует с ним.
• Полагаются только на семантический тег. Например, для ссылки, которая не ведёт на адрес, не следует выбирать элемент лишь из-за его стандартного оформления.
• После рефакторинга не проверяют зависимости. Селекторы CSS, тесты и JavaScript могут обращаться к прежним элементам или классам.

Как проверить доступность и устойчивость структуры

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

• Просмотр DOM в браузере. Уместен для быстрой проверки вложенности, заголовков и повторяющихся областей.
• Проверка доступности. Используйте встроенные средства браузера или выбранный инструмент аудита, чтобы заметить проблемы с именами областей и навигацией.
• Ручной проход с клавиатуры. Проверьте, что порядок перехода логичен, а ссылки и элементы управления доступны без мыши.
• Проверка шаблонов и скриптов. После изменения разметки протестируйте страницы, которые используют общий шаблон, и функции, зависящие от DOM.

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

Разбор сложных случаев семантической разметки

Можно ли использовать несколько элементов header на странице?

Да. header может обозначать вводную часть как всей страницы, так и отдельного раздела или статьи. Ориентируйтесь на контекст содержимого, а не на количество элементов.

Нужно ли помещать все ссылки в nav?

Нет. nav предназначен для значимых групп навигационных ссылок. Ссылки внутри текста или небольшая группа вспомогательных ссылок не обязательно требуют этого элемента.

Обязательно ли добавлять заголовок в каждый section?

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

Чем article отличается от section?

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

Можно ли использовать div в семантической HTML-разметке?

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

Меняет ли семантический тег внешний вид страницы?

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

Об авторе

Елена Миронова