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

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

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

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

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

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

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

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

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

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

Влад Мержевич

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

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 30.03.2018
Редакторы: Влад Мержевич