1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
На этом этапе выделяются такие элементы, как:
<nav> — главная навигация;
<section> — смысловой раздел, который нельзя отделить от конкретной страницы или документа;
<article> — отделяемый от сайта смысловой раздел;
<aside> — дополнительное содержимое.
Начнём с примера тега <nav> — главной навигации сайта. К такому элементу, как правило, относится навигация по сайту, а также логотип — изображение и ссылка на главную страницу сайта.
Пример тега <nav> на макете
Помимо навигации по сайту и логотипа, в тег <nav> может включаться и пользовательское меню или ссылка для входа на страницу авторизации пользователя.
Пример тега <nav> на макете
Замечание
Есть рекомендация от составителей спецификации, что если навигация дублируется в двух местах — например, в шапке и в подвале — то в подвале можно её в <nav> не оборачивать. Об этой и других рекомендациях можно узнать в переводе статьи под авторством создателей стандарта HTML5. Спецификация по основной навигации по ссылке.
Разберём ещё примеры.
Структура страницы сайта
В макете главной страницы Nёrds можно выделить смысловой блок с перечнем услуг, раздел «О нас» и список логотипов компаний. Все эти разделы связаны с тематикой сайта и вне этого сайта не имеют смысла, поэтому их следует разметить тегом <section>.
На втором примере выделен блок, который вполне может существовать и отдельно от сайта. Поэтому его можно разметить тегом <article>.
Пример тега <article> на макете
Для определения на макете элемента <aside> ищем блок, который напрямую не связан с главным содержимым сайта. Это, как правило, анонсы, реклама и подобное. Вот пример блока <aside>:
