Блоки в HTML

Почти все сайты в интернете имеют схожую структуру. Их можно разбить на крупные блоки:

• Верхняя часть (шапка).
• Главное меню сайта.
• Центральная часть.
• Нижняя часть (подвал).

До появления HTML 5 все блоки создавались с помощью тега <div>. Получалось многоуровневое вложение div-ов. Это очень затрудняло восприятие кода при разметке сложных страниц.

Для улучшения восприятия кода при создании сайтов и лучшей индексации поиковыми машинами используются теги уровня блоков. Основные используемые теги:

Тег	Описание
<article>	Представляет самостоятельную часть страницы или приложения. Можно использовать для выделения основной статьи или блока с комментариями.
<section>	Элемент страницы, являющийся частью более общего элемента. Используется для выделения отдельных глав статьи или вкладок страницы.
<nav>	Элемент страницы с навигацией по сайту или с ссылками на другие ресурсы.
<aside>	Часть страницы, которая не относится к основному содержанию страницы. Например, колонка с рекламными баннерами.
<header>	Верхняя часть страницы или отдельного элемента страницы. Например, логотип организации или основное меню сайта.
<footer>	Нижняя часть страницы или отдельного элемента страницы. Например, информация о сайте или контакты.
<address>	Контактные данные, относящиеся ко всей странице или отдельной части статьи.

Раньше для создания структуры страницы использовались глобальные атрибуты id и class:

<!-- Шапка -->
<div id="header">
  <div id="logo"><!-- Логотип --></div>
  <div id="menu"><!-- Основное меню --></div>
</div>
<!-- Рекламный блок -->
<div id="sidebar"></div>
<!-- Основная статья -->
<div id="article">
  <div class="section"><!-- Глава статьи --></div>
  <div class="section"><!-- Глава статьи --></div>
</div>
<!-- Подвал -->
<div id="footer"></div>

Сейчас структура задается отдельными тегами, имеющими смысловое значение:

<!-- Шапка -->
<header>
  <address><!-- Логотип --></address>
  <nav><!-- Основное меню --></nav>
</header>
<!-- Рекламный блок -->
<aside></aside>
<!-- Основная статья -->
<article>
  <section><!-- Глава статьи --></section>
  <section><!-- Глава статьи --></section>
</article>
<!-- Подвал -->
<footer></footer>