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

Семантичното разделяне на съдържанието се постига чрез използването на съответните HTML5 тагове.

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

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

Използването на семантични тагове подобрява достъпността, SEO и поддръжката на кода. Търсачките и помощните технологии (екранни четци) по-добре разбират структурата на страницата.