Базовый синтаксис
Семантический HTML не отличается «магическим» синтаксисом. Главное — выбрать элемент по смыслу блока. Справа код, сверху — как этот шаблон складывается в каркас страницы.
<!-- Общий шаблон семантической страницы -->
<header>Шапка</header>
<nav>Ссылки навигации</nav>
<main>
<section>
<article>Материал</article>
</section>
<aside>Дополнительная информация</aside>
</main>
<footer>Подвал</footer>Когда использовать элементы
| Элемент | Назначение | Комментарий |
|---|---|---|
header | Шапка страницы или блока | Может быть несколько, если это разные разделы |
nav | Навигация | Для главного меню или внутренней навигации |
main | Основное содержимое | Один раз на страницу |
section | Тематический раздел | Обычно с заголовком |
article | Самостоятельный материал | Пост, новость, карточка, комментарий |
aside | Вспомогательная информация | Боковая колонка, примечание, совет |
footer | Подвал | Подсказки, ссылки, авторство |
figure / figcaption | Иллюстрация и подпись | Подпись помогает понять контекст изображения |
Практические правила
- Не используйте `main` больше одного раза на странице.
- Не ставьте `nav` для любых блоков с кнопками - он нужен именно для навигации.
- Выбирайте элемент по смыслу, а не по удобству для CSS.