1️⃣
Разметка
  • 1. 1. Введение
  • 1. 2. Введение в HTML
  • 1. 3. Подходы к разметке
  • 1. 4. Работа со спецификацией
  • 1. 5. Проверка валидности
  • 1. 6. Часто используемые теги и типовые ошибки
  • 1. 7. Методика семантической разметки
    • 1. 7. 1. Определяем DOCTYPE
    • 1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта
    • 1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
    • 1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
    • 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
    • 1. 7. 6. Шаг 5. Размечаем фразовые элементы
  • 1. 8. Использование тега br
  • 1. 9. DOCTYPE
  • 1. 10. Как работает атрибут target
  • 1. 11. Правильное использование ссылок и кнопок
  • 1. 12. Как делать пустые ссылки?
  • 1. 13. Как правильно скрывать элементы?
  • 1. 14. Когда применять список терминов (dl)?
  • 1. 15. Как использовать ссылки mailto: и tel:
  • 1. 16. Именование сущностей
  • 1. 17. Разметка по БЭМ
    • 1. 17. 1. Введение
    • 1. 17. 2. Предыстория
    • 1. 17. 3. Частые проблемы из-за неправильной CSS-архитектуры проекта
    • 1. 17. 4. Основные понятия
    • 1. 17. 5. Свод правил БЭМ-а
    • 1. 17. 6. БЭМ для CMS
    • 1. 17. 7. Названия классов по БЭМ
    • 1. 17. 8. БЭМ — это про компоненты
    • 1. 17. 9. Темизация
    • 1. 17. 10. Плюсы и минусы БЭМ
    • 1. 17. 11. Алгоритм выделения блоков
    • 1. 17. 12. Типовые интерфейсные решения
    • 1. 17. 13. Блоки и элементы
    • 1. 17. 14. Миксы блоков и элементов
    • 1. 17. 15. Модификаторы блоков и элементов
    • 1. 17. 16. Типовые ошибки
  • Дополнительные материалы
Powered by GitBook
On this page
  1. 1. 7. Методика семантической разметки

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

Previous1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайтаNext1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов

Last updated 1 year ago

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

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

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

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

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

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

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

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

Замечание

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

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

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

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

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

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

Структура страницы сайта
Пример тега <article> на макете
Пример тега <aside> на макете
статьи
по ссылке
Пример тега `<nav>` на макете
Структура страницы сайта
Пример тега `<nav>` на макете
Пример тега `<article>` на макете
Пример тега `<aside>` на макете