Как семантически разделять контент на странице?

Семантическое разделение контента достигается использованием соответствующих HTML5-тегов.

Основные семантические теги:

• <header>: Вступление или группа навигационных или вступительных элементов. Часто содержит заголовок сайта, навигацию, логотип.
• <nav>: Блок навигационных ссылок.
• <main>: Основное содержимое документа. Должен быть уникальным на странице (не дублироваться в футере, хедере, сайдбаре).
• <article>: Самодостаточный, независимый фрагмент контента (статья, пост в блоге, комментарий).
• <section>: Отдельный раздел документа (глава, параграф, блок контента на главной странице). Должен иметь заголовок (<h1>-<h6>).
• <aside>: Часть контента, косвенно связанная с основным содержанием (сайдбар, врезка с цитатой, реклама).
• <footer>: Нижний колонтитул раздела или документа. Обычно содержит информацию об авторе, авторские права, ссылки на связанные документы.
• <figure>: Самостоятельный контент (изображение, диаграмма, таблица), который может быть перемещен из основного потока документа без потери смысла. Часто используется с <figcaption>.
• <figcaption>: Подпись к элементу <figure>.
• <mark>: Выделяет (маркирует) текст, который имеет особое значение или интерес в контексте окружающего текста.
• <time>: Представляет конкретное время или промежуток времени.

Применение семантических тегов улучшает доступность, SEO и поддерживаемость кода. Поисковые системы и вспомогательные технологии (скринридеры) лучше понимают структуру страницы.