Шаг 2. Крупные логические блоки

Автор: Мелихова Ева-София

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

Важные структурные элементы

На этом этапе мы начинаем обозначать важные структурные элементы страницы, такие как:

• <nav> — основной блок навигации;
• <section> — логический раздел, который не может существовать отдельно от основной страницы или документа;
• <article> — самостоятельный контент, который можно легко отделить от остального сайта;
• <aside> — дополнительная информация, которая не относится напрямую к содержанию страницы.

Пример использования <nav>

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

Важно: Не все группы ссылок на странице должны быть обёрнуты в элемент <nav>. Этот элемент главным образом предназначен для группировки главных навигационных блоков. Например, если в <footer> тоже встречаются ссылки, нет необходимости использовать <nav> — достаточно тега <footer>.

Пример логических блоков

На странице агентства можно выделить следующие крупные логические блоки:

• Баннер главной страницы
• Услуги
• Процесс работы
• Наши клиенты
• Отзывы

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

Элементы <article> и <aside>

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

Тег <aside> используется для выделения дополнительного контента, который связан с основным содержанием страницы, но не является его центральной частью. Например, это могут быть боковые панели (сайдбары) или рекламные блоки. Этот тег применяют для информации, которая может быть полезной, но не является основным контентом страницы.

Так же подробно прочитать можно в статье на Доке aside.

Таким образом, разделение страницы на крупные логические блоки помогает структурировать её содержимое и правильно использовать семантические теги, улучшая навигацию и восприятие информации.