1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы

На этом этапе выделяются такие элементы, как:

• <nav> — главная навигация;

• <section> — смысловой раздел, который нельзя отделить от конкретной страницы или документа;

• <article> — отделяемый от сайта смысловой раздел;

• <aside> — дополнительное содержимое.

Начнём с примера тега <nav> — главной навигации сайта. К такому элементу, как правило, относится навигация по сайту, а также логотип — изображение и ссылка на главную страницу сайта.

Пример тега <nav> на макете

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

Пример тега <nav> на макете

Замечание

Есть рекомендация от составителей спецификации, что если навигация дублируется в двух местах — например, в шапке и в подвале — то в подвале можно её в <nav> не оборачивать. Об этой и других рекомендациях можно узнать в переводе статьи под авторством создателей стандарта HTML5. Спецификация по основной навигации по ссылке.

Разберём ещё примеры.

Структура страницы сайта

В макете главной страницы Nёrds можно выделить смысловой блок с перечнем услуг, раздел «О нас» и список логотипов компаний. Все эти разделы связаны с тематикой сайта и вне этого сайта не имеют смысла, поэтому их следует разметить тегом <section>.

На втором примере выделен блок, который вполне может существовать и отдельно от сайта. Поэтому его можно разметить тегом <article>.

Пример тега <article> на макете

Для определения на макете элемента <aside> ищем блок, который напрямую не связан с главным содержимым сайта. Это, как правило, анонсы, реклама и подобное. Вот пример блока <aside>:

Пример тега <aside> на макете