Введение

Практически любую веб-страницу можно разбить на ряд визуальных блоков, которые обычно отделяются друг от друга фоном или пустым пространством, поэтому хорошо заметны (рис. 1).

Рис. 1. Деление веб-страницы на разделы

Подобное разделение помогает нам ориентироваться на веб-странице и сразу выделять главное и второстепенное содержимое. Нам проще воспринимать веб-страницу, когда на ней всё интуитивно понятно — вот навигация, это основная статья, а это строка для поиска. Браузеры так же учитывают такое деление и могут готовить версию для чтения или печати, содержащую только статью — без рекламы, ссылок и лишнего оформления. Речевые браузеры, нацеленные на слабовидящих людей, тоже могут пропускать ненужную в данный момент информацию и переходить непосредственно к чтению самой статьи.

Таким образом от разделения веб-страницы на блоки выигрывают все. Пользователям удобнее и нагляднее пользоваться сайтом, а разработчику проще писать код HTML и его поддерживать.

Вот какие разделы могут присутствовать на веб-странице.

• Навигация — основные ссылки для перехода к разным веб-страницам сайта.
• «Шапка» — вступительная верхняя часть веб-страницы, содержащая логотип сайта, его название, поиск по сайту, навигацию и др.
• Основное содержимое — для информационных сайтов это статья с названием, датой публикацией, автором, комментариями к статье.
• Боковая панель — как правило, вертикальный блок, содержащий второстепенную информацию, вроде формы поиска, меню, голосования, рекламы и др.
• «Подвал» — заключительная нижняя часть веб-страницы, обычно содержащая контактную и правовую информацию. Это телефоны, адреса, схема проезда, кнопки социальных сетей, дублирование навигации и др.

В HTML есть несколько элементов, позволяющих поделить веб-страницу на разделы и задать им определённый смысл.

• <section> — задаёт общий универсальный раздел. Если не знаете, какой элемент подходит для выбора какого-либо раздела, выбирайте <section>.
• <header> — шапка сайта или раздела.
• <footer> — подвал сайта или раздела.
• <nav> — основные навигационные ссылки.
• <main> — уникальное основное содержимое веб-страницы.
• <aside> — раздел, косвенно связанный с основным содержимым, обычно используется для боковой панели.
• <article> — самостоятельный раздел, представляющий собой статью, сообщение в блоге или на форуме, комментарий.