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