Основное содержание. Тег main.
Обратите внимание, что мы задали классы для хедера и футера. Сделано это потому, что этих элементов на странице может быть несколько.
Хедер — это не только привычная шапка сайта с логотипом и меню, он может использоваться и как «шапка» какой-нибудь статьи или раздела сайта. Конечно, в случае со статьёй хедер называют не «шапкой», а вводной частью, в которой могут содержаться заголовки, оглавление и так далее.
С футером ситуация аналогичная. В привычном нам понимании это подвал сайта, с копирайтами, контактной информацией и так далее. Но футер может использоваться и в других разделах сайта. Например, в статье в футере можно разместить дополнительную информацию: данные об авторе, дополнительные ссылки и так далее.
А раз теги неуникальные, то и стилизовать их лучше с помощью классов, как мы и сделали.
Если вы не хотите использовать классы для шапки и подвала сайта, то можете использовать селекторы body > header и body > footer. Эти селекторы не повлияют на хедеры и футеры, вложенные более глубоко.
Другое дело новый тег <main>, который обозначает основное содержание сайта и по спецификации может использоваться на странице только один раз. Для его стилизации никакие классы не нужны.
Кстати, загляните в CSS и посмотрите, как сделаны фоны для основных блоков. В хедере и футере мы использовали линейные градиенты, которые детально разберём в более позднем курсе. А фоновую картинку для основного содержания мы задали с помощью так называемогоdata:URI, закодировав изображение прямо в CSS-коде. Это одна из продвинутых техник оптимизации вёрстки.
Разделы страницы. Теги article и section.
С шапками, подвалами и основным содержанием разобрались. Теперь перейдём к остальным разделам сайта.
Раньше почти все разделы верстались на дивах. Но в HTML5 добавили сразу два новых тега для разметки разделов:
<section>— смысловой или логический раздел документа;<article>— самостоятельный и независимый раздел документа.
Чтобы не было путаницы, разберём где и когда использовать разные контейнеры:
<div>— контейнер общего назначения, не обязательно смысловой. Дивы используются для разметки мелких блоков, создания сетки и декоративных эффектов.<section>— более крупный логический контейнер, объединяющий содержание по смыслу. Например, блок «О компании», список товаров, раздел личной информации в профиле и так далее.<article>— самостоятельный, цельный и независимый раздел документа. Этот раздел можно в неизменном виде использовать в различных местах, в том числе и на других сайтах. Примеры: статья, пост в блоге, сообщение на форуме и так далее.
В этом задании мы сверстаем блок «Обо мне» как независимый раздел, который можно будет использовать в разных местах сайта. А список постов — это логический раздел, группирующий последние посты, поэтому для него используем <section>.