В рамках курса по верстке HTML/CSS, где я проверяю домашки, есть задание на применение семантических тегов. Далее к этому вопросу студенты ещё раз возвращаются чуть позднее, на дипломной работе по модулю (части большого курса по разработке).
Время показало, что данный раздел вызывает затруднения у студентов. Давайте постараемся внести ясность, что же такое семантические теги.
Начнем с того, зачем они нужны, ведь условная страница будет работать и без них, сверстанная на нашем строительном кирпиче “div”)
Есть два основных назначения:
Первое - сделать сайт доступным для больших категорий пользователей. Для тех или иных, которым приходится использовать скринридеры. Скринридеры могут по разметке страницы помочь пользователю лучше ориентироваться на ней.
Второе - сделать страницу более вкусной для индексаторов. Истины о том, как точно формируется “выдача” по поисковым запросам того или иного поисковика - нам никто не скажет. Но можно быть уверенными, что правильная семантическая разметка приподнимет сайт в “выдаче” повыше.
Затронем только основное.
main - это тег, который на странице должен быть в единственном числе. Внутри должен быть контент, без которого страница не имеет смысла. То есть, под этот самый контент страница и создавалась. Как например, покупатель приходит в магазин, а в магазине нет товара. Смысла от магазина нет - лучше закрыть пока товар не поставят.
aside - в противовес main - это раздел без которого страница чувствовала бы себя ровно так же, как и с ней. Это информация косвенно связанная с основной по смыслу, но являющаяся совершенно не обязательной (эта информация, которую можно охарактеризовать словами “смотрите также…” или “Кстати…!” ). Если main может быть только один на странице, то aside может быть более одного, но важно соблюдать вложенность. О чем я? Я о том, что в структуре внутри тега body есть выделенный блок main. Самый большой aside (если он есть или их более одного) может быть выделен опять же из тега body и быть по вложенности на одном уровне с main. Но у более мелкой информационной единицы, например, какой-то заметки, тоже может быть свой aside. Да, свой маленький aside, в котором можно указать интересный факт (по теме, но совершенно не обязательный) или дать направление на связанные по теме ресурсы.
section - это логический блок - составная часть какого-то другого элемента/блока. При этом section в единственном числе - затея непонятная, потому что вся прелесть в том, чтобы поделить большой блок на два или больше section. То есть, если в каком-то блоке идет обзор транспортных средств, например, грузовых и каждый производитель выделен отдельно, то это явственно будут section для каждого из производителей.
Бытовой пример: Над мойкой у многих в квартире есть шкаф для посуды (это общий элемент) - этот шкаф делится на отделение для тарелок и на отделение для кружек. Каждое такое отделение можно выделить как section. Подразумевается наличие заголовка, который точно описывает содержание.
article - это некоторая значимая информационная единица, которую можно перенести с одной страницы на другую страницу (допустим пустую). При этом, она не потеряет своей информационной ценности. Например, на странице было повествование о каком-то событии. Рядом находились анекдоты, которые подходят этому событию и они вынесены в отдельный раздел (видимо aside, потому что и без них можно было бы описать событие). Каждый такой анекдот по сути своей - article (он целостен, закончен), и если его вынести на новую страницу, то в первом приближении это будет страница с анекдотом.
Бытовой пример: Вы пришли в гипермаркет, завернули в зал с продуктами (вероятно, это main), прошлись по аллеям продуктов (каждая аллея - section). И с полки одной из аллей взяли в руки банку консерв. Банка целостная (сильная и независимая), она остается собой и в магазине и даже тогда, когда Вы вынесете её на улицу. В то же время вынести на улицу аллею с продуктами - как-то странно. Или вынести на другую страницу aside с заголовком “Анекдоты по теме” - тоже будет странно, ведь непонятно по какой такой теме анекдоты?
header - очень часто воспринимается только как шапка сайта. В том, что это шапка сайта нет ничего плохого. Но не стоит забывать, что это также может быть и шапка более мелкого информационного элемента. Например у article может быть свой header, в котором будет указан заголовок, автор, время написания, и другая предваряющая основной контент информация. В роли шапки сайта header может содержать логотипы, некоторую навигацию, возможно даже контактную информацию.
footer - не только подвал страницы, хотя в этой роли встречается повсеместно. Аналогично header, может быть у того же article, как вместилище информации завершающей основную. Автора и дату можно указать не в header, а в footer, там же можно разместить что-то вроде глоссария и ссылки которые прямо дополняют тему (не косвенно - иначе это aside).
nav - раздел с основной навигацией странице/ресурсу. Все подряд навигационные ссылки на странице оборачивать в nav - затея не очень. Верстальщик должен сам выделить какая навигация основная и для нее ввести данный тег.
Давайте посмотрим официальный сайт кремля. Точнее его главную страницу. Разбирать код не будем, только внешнюю структуру. Что тут можно выделить. На самом верху располагается некая шапка (закрепленная).
По всей видимости, это header :) В котором расположена основная навигация (nav) по ресурсу. Слева есть “выкатное” меню с ссылками на другие ресурсы.
Затем идет структура, которую я бы отметила как main, она включает в себя не озаглавленный раздел значимых “последних событий”, именно значимых событий - поэтому откинуть их в aside не получится, а также ещё два раздела про непосредственно главу государства
и про его администрацию.
Каждый из таких разделов в целом можно выделить в section. Мини-новости внутри можно обозначить как article. Сильно ниже начинается раздел с со ссылками на косвенно связанные с этим другие ресурсы. Я бы выделила этот сегмент как aside.
Далее в самом низу расположен подвал сайта.
Здесь расположена дополнительная навигация, соц.сети, контакты и многое другое. Очень насыщенный footer.
Так мы рассмотрели основные семантические теги. Помните, что они - структурные элементы в основном - аналоги div. Поэтому, текст в чистом виде внутри указывать не стоит. Для текста используем текстовые теги p, span и так далее.
Спасибо за внимание.
Желаю Вам успеха!