Семантическая разметка
Семантическая HTML-разметка обозначает роль элементов страницы: заголовков, навигации, основного материала и элементов управления. Она делает структуру документа понятнее человеку и программам.
Также встречается: Семантический HTML.
Для чего используется
Семантическая HTML-разметка делает структуру документа понятной браузеру и вспомогательным технологиям. В SEO-проекте это заголовки по смыслу, основные области страницы, списки и таблицы для соответствующего содержания. Разработчик и редактор получают единые правила шаблонов, а пользователь — предсказуемую навигацию.
Как применяется
Сначала выстройте содержание и заголовки, затем выберите HTML-элементы по назначению. Навигация, основной материал и дополнительные пояснения должны иметь понятное место в документе.
- Выделите основной материал и логическую последовательность заголовков.
- Используйте ссылки для переходов, кнопки для действий и подходящие HTML-элементы для содержания.
- Проверьте структуру документа и доступность с клавиатуры и вспомогательными технологиями.
Практический пример
Визуально крупная подпись была обычным блоком, а все заголовки разделов — случайными уровнями. Исправление HTML делает структуру статьи последовательной без изменения её смысла.
Учебный пример.Ошибки и риски
HTML-семантика и структурированные данные Schema.org — разные уровни. Один не заменяет другой.
Выбор тега только ради размера текста ломает порядок документа. Внешний вид задают стилями, а heading, nav, main и другие элементы выбирают по назначению.
Как проверить результат
Проверьте дерево заголовков, ориентиры страницы и назначение управляющих элементов. Улучшение должно сохраняться без визуальных стилей.