Семантические HTML-элементы описывают назначение частей страницы: где находятся навигация, основное содержание, статья, список или таблица. Чтобы разметить страницу правильно, сначала разделите контент по смысловым ролям, затем выберите подходящие элементы, выстройте иерархию заголовков и проверьте результат клавиатурой и средствами доступности.
Что проверить в семантической разметке до публикации
- Определите смысловые области страницы до изменения HTML.
- Используйте элементы по их назначению, а не ради стандартного оформления.
- Проверьте, что у страницы одна основная область
<main>, а навигация обозначена через<nav>. - Убедитесь, что заголовки образуют последовательную структуру и описывают содержимое разделов.
- Проверьте списки, таблицы, ссылки и элементы управления клавиатурой.
Сначала разложите содержимое страницы по смысловым ролям
Такой подход подходит при создании новой страницы и при рефакторинге существующей: например, когда выполняются услуги веб-разработки, создаётся лендинг или планируется разработка корпоративного сайта. Он помогает команде понять структуру документа до того, как визуальные стили усложнят разметку.
Не нужно переписывать страницу только ради замены каждого <div>: если блок не имеет отдельной смысловой роли, нейтральный контейнер может быть уместен. Не меняйте разметку без проверки, если она связана с работающим компонентом, скриптами или интеграциями.
Перед работой составьте короткий план:
- Отметьте шапку, навигацию, основное содержание и подвал.
- Разделите самостоятельные статьи, тематические разделы и вспомогательные блоки.
- Найдите заголовки, списки, таблицы, изображения и элементы управления.
- Проверьте, какие классы, скрипты и тесты зависят от текущей структуры.
Подберите HTML-элементы для шапки, навигации и основного блока
Для работы достаточно доступа к исходному HTML или шаблону, редактора кода и браузера с инструментами разработчика. Если сайт уже опубликован, сначала используйте тестовую среду или резервную копию, а затем проверьте изменения до переноса на рабочую версию.
Ориентируйтесь на смысл блока:
<header>обозначает вводную область страницы или раздела.<nav>группирует навигационные ссылки.<main>содержит основное содержание страницы.<article>подходит для самостоятельного материала, который имеет смысл отдельно от окружающего контекста.<section>группирует тематически связанное содержание, обычно с заголовком.<aside>обозначает дополнительное содержание, связанное с основным или дополняющее его.<footer>обозначает заключительную область страницы или раздела.
Например, при запросе "заказать разработку сайта" посетитель может попасть на страницу с описанием процесса, этапами и контактным блоком. Семантика должна отражать реальные отношения между этими частями, а не только визуально выделять их.
Сопоставьте типы контента с тегами в таблице
Используйте последовательность ниже, чтобы выбрать элемент по назначению, а не по внешнему виду.
-
Определите роль фрагмента.
Сформулируйте, что делает блок: вводит страницу, содержит навигацию, раскрывает тему или дополняет основной материал. -
Выберите элемент для смысловой области.
Для основного содержания используйте<main>, для навигации -<nav>, для отдельного материала -<article>, для тематического раздела -<section>. -
Разметьте текстовые и структурированные данные.
Выбирайте списки для перечислений, таблицу - для данных, которые удобно сопоставлять по строкам и столбцам, а абзацы - для связного текста. -
Проверьте вложенность и заголовки.
Убедитесь, что разделы отражают структуру содержания, а заголовок действительно описывает следующий за ним блок. -
Сравните разметку с задачей страницы.
Проверьте её в браузере и внесите изменения только после того, как убедитесь, что стили и функциональность не нарушены.
| Содержимое или роль | Подходящий элемент | Когда применять |
|---|---|---|
| Главное содержание | <main> |
Для основной области документа, не включая повторяющиеся элементы сайта |
| Набор навигационных ссылок | <nav> |
Для основного меню или заметной навигации по странице |
| Самостоятельная публикация или материал | <article> |
Когда содержимое можно понять и использовать отдельно от соседних блоков |
| Тематическая часть документа | <section> |
Когда группа связанного содержания образует отдельный раздел |
| Дополнительная информация | <aside> |
Для боковой заметки, сопутствующего материала или пояснения |
| Нейтральная группа для оформления или логики | <div> |
Когда специальной смысловой роли у контейнера нет |
Эти элементы не заменяют CSS: семантика задаёт назначение контента, а стили определяют его оформление. Это важно и для веб-разработки сайтов, где один шаблон может получать разные визуальные темы.
Выстройте заголовки так, чтобы они отражали структуру документа
Проверьте страницу по списку, прежде чем считать разметку готовой:
- У каждого раздела есть заголовок, если он нужен для понимания структуры.
- Уровень заголовка выбран по вложенности раздела, а не по размеру шрифта.
- После заголовка не пропущен уровень без смысловой причины.
- Заголовок точно описывает содержание следующего блока.
- Скрытый визуально заголовок используется только тогда, когда он нужен для доступного представления структуры.
- Размеры и начертания заголовков задаются стилями, а не выбором тега.
Если для оформления нужен крупный текст, не используйте <h2> только из-за его стандартного вида. Оставьте подходящий по структуре заголовок и настройте внешний вид через CSS.
Проверьте семантику списков, таблиц и интерактивных элементов
При проверке разметки обратите внимание на распространённые ошибки:
- Использовать
<section>как универсальную замену<div>, даже если блок не образует отдельную тему. - Оборачивать в
<nav>любые ссылки, включая случайные ссылки в тексте. - Применять таблицу для расположения элементов интерфейса вместо табличных данных.
- Создавать визуальный список переносами строк, когда по смыслу нужен
<ul>или<ol>. - Использовать элемент управления без доступного имени или понятного назначения.
- Заменять ссылку на действие или кнопку и наоборот: ссылка ведёт к ресурсу, а кнопка запускает действие.
- Удалять существующие классы и атрибуты, не проверив, зависят ли от них стили и скрипты.
В таблице с данными размечайте заголовки строк и столбцов. В списке услуг, например на странице "создание сайта под ключ", выбирайте маркированный или нумерованный список по смыслу: порядок действий важен - используйте нумерацию, порядок не важен - маркированный список.
Пройдите страницу с клавиатурой и проверьте доступность
Проверить результат можно несколькими способами, выбирая подходящий под проект:
- Клавиатурная проверка. Перемещайтесь по ссылкам и элементам управления клавишей Tab, активируйте их доступными клавишами и следите за видимым фокусом.
- Проверка в браузере. Посмотрите структуру документа и убедитесь, что после изменений сохранились стили, переходы и работа компонентов.
- Автоматизированная проверка. Используйте доступный проекту анализатор как вспомогательный инструмент; его результат не заменяет ручную проверку.
- Проверка с пользователем или специалистом. Уместна для важных страниц и сложных интерфейсов, где ошибки в навигации могут мешать выполнению задачи.
После изменений повторно проверьте ключевые сценарии и только затем переносите их на рабочую версию. Такой процесс подходит и для страницы услуги, и для проекта, где планируется разработка корпоративного сайта.
Нюансы выбора семантических элементов в реальных проектах
Нужно ли заменять каждый <div> на семантический тег?
Нет. Используйте семантический элемент, если он точно описывает роль блока; для нейтральной группировки <div> остаётся уместным.
Когда выбирать <article>, а когда <section>?
<article> обозначает самостоятельный материал, а <section> - тематическую часть документа. Если у блока нет отдельной смысловой роли, не выбирайте эти элементы только ради структуры.
Можно ли использовать несколько элементов <nav>?
Да, если на странице есть несколько самостоятельных групп навигации. У каждой должно быть понятное назначение, чтобы пользователь мог различить меню.
Обязательно ли добавлять <header> и <footer>?
Нет: применяйте их, когда нужно обозначить вводную или заключительную часть страницы либо раздела. Они не нужны каждому произвольному контейнеру.
Влияют ли семантические теги на оформление страницы?
Сами по себе они не задают желаемый дизайн, но браузеры применяют к элементам стандартные стили. Сохраните или настройте CSS и проверьте результат после изменения разметки.
Как проверить, что заголовки построены логично?
Прочитайте их подряд: последовательность должна кратко передавать структуру и содержание страницы. Затем проверьте уровни вложенности и убедитесь, что они соответствуют разделам.
Что делать, если семантическая правка ломает компонент?
Откатите изменение или вернитесь к тестовой версии, выясните, какие стили и скрипты зависели от прежней разметки, и внесите правку с повторной проверкой сценариев.
Автор: Дмитрий Кузнецов