• Теория
  • Теория

Теги article и section, разделы страницы

С шапками, подвалами и основным содержанием разобрались. Теперь перейдём к остальным разделам сайта.

Разметим разделы «Обо мне» и «Последние посты». Используем для этого теги <section> и <article>:

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

Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:

  • <div> — контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.
  • <section> — более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.
  • <article> — самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.

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

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Возможности HTML и CSS» тренажёра «Продвинутые возможности HTML» можно после регистрации и оформления подписки.