Структурные элементы страницы

Набор структурных элементов HTML5 вызывает массу вопросов у начинающих верстальщиков. Чем отличается <article> и <section>? В каком случае надо писать <main>, а в каком <article>? Что ставить в <aside>? Можно ли добавлять <section> в <footer>? В общем, вместо того, чтобы облегчить работу и упростить код, эти элементы только запутали. Казалось бы, есть спецификация HTML, к ней и надо обращаться по спорным вопросам. Но беда в том, что тексты спецификации можно трактовать по разному, поэтому на форумах часто происходят словесные баталии, каждый отстаивает свою противоположную позицию.

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

• «шапка»;
• «подвал»;
• навигация;
• статья;
• боковая панель;
• раздел.

«Шапка»

Как правило, располагается вверху веб-страницы, содержит название сайта, главное меню, поисковую форму.

«Подвал»

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

Навигация

Это главное меню сайта, ссылки для перехода к основным разделам сайта.

Статья

Простыня текста с названием, содержимым, датой публикацией, именем автора.

Боковая панель

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

Раздел

Раздел — это основная структурная единица при делении сайта на блоки. В основном, раздел содержит заголовок и содержимое, но может обходиться и без заголовка как, к примеру, с рекламным блоком.

Примерно определили, из чего состоит любой сайт и теперь вспомним, какие элементы для них есть в HTML5:

• <main>
• <header>
• <footer>
• <section>
• <nav>
• <article>
• <aside>

<main>

Это элемент, внутри которого располагается уникальное главное содержимое веб-страницы. Есть ряд правил касательно применения <main>:

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

В основном применяется как обёртка для статьи с заголовком, именем автора, датой публикации, комментариями.

<header>

Используется для «шапки» сайта, преимущественно. Но этим роль не ограничивается из-за того, что в коде может быть несколько элементов <header>. Так что его можно вставлять как заголовки разделов, например, статьи.

<footer>

Применяется для «подвала». Как и в случае с <header> это может быть «подвал» сайта или «подвал» статьи.

<section>

Раздел документа или иными словами, содержимое, группированное по какому-либо принципу. <section> является типовым элементом для разбиения содержимого веб-страницы на тематические блоки. Фактически, другие элементы, вроде <nav>, <article>, <aside>, являются частными случаями <section>.

<nav>

Применяется для навигации по сайту и содержит ссылки для перехода на другие веб-страницы. <nav> используется не для всех блоков ссылок, а только для наиболее важных, такой блок, как правило, на странице один. Даже если у вас навигация дублируется внизу страницы, в <nav> добавляется только первый, более важный блок.

<article>

Законченная единица содержимого, такая как запись блога, сообщение форума, статья, комментарий пользователя.

<aside>

Это раздел веб-страницы, который косвенно связан с основным её содержимым. Может использоваться для следующих вещей: боковая панель, врезка, цитата, ссылки, информация об авторе, реклама и др. <aside> располагается не обязательно сбоку, к примеру, статьи, но и внутри, сверху, снизу, в общем, там, где это продиктовано содержимым.

Заметьте, что везде мы делаем акцент на содержимом и уже исходя из него выбираем какой элемент подойдёт. Если нужно сделать декоративный блок чисто для дизайнерских целей, то воспользуйтесь элементом <div>.

В следующий раз рассмотрим, как эти элементы применять на практике.