Ответ
Для семантического разделения страницы используют следующие HTML-теги:
<header>— шапка сайта или раздела<nav>— навигационное меню<main>— основное содержимое страницы<article>— самостоятельный контент (пост, новость)<section>— тематическая группа контента<aside>— дополнительный контент (сайдбар)<footer>— подвал сайта или раздела
Пример структуры:
<body>
<header>...</header>
<nav>...</nav>
<main>
<article>
<section>...</section>
</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>Эти теги помогают поисковикам и скринридерам лучше понимать структуру страницы.
Ответ 18+ 🔞
Да блядь, ну слушай сюда, старый пердун, сейчас я тебе объясню, как эту вашу херню с семантикой правильно городить, чтобы потом поисковики не матерились, а слепые дядьки со скринридерами не плакали.
Вот смотришь ты на страницу — а там же не просто куча дивов, как говно в проруби, плавает. Там есть логика, ёпта! Чтобы её обозначить, умные дядьки придумали теги специальные. Это как маркеры: вот тут у нас шапка, тут — менюшка, а вот это уже основная движуха.
Смотри, какие фишки есть:
<header>— это типа кепка или шапка-ушанка всего сайта или его куска. Лого, заголовок, всё такое.<nav>— навигация, сука. То есть меню, по которому пользователи, как крысы по лабиринту, бегают.<main>— вот это, блядь, главное. Основа. Соль земли. Всё, ради чего страницу и создавали. Внутри него уже всё остальное крутится.<article>— самостоятельная хрень. Пост в блоге, новость на сайте — что-то, что можно выдернуть и оно не сломается.<section>— просто тематическая группа. Отделил один кусок текста от другого, потому что они про разное.<aside>— сайдбар, приблуда какая-то. Реклама, архив, хуйня с тегами — то, что не в тему основного контента, но пусть висит.<footer>— подвал. Там обычно копирайты, контакты и прочая пыль, которую все игнорят, пока что-то не сломается.
И вот как это всё, блядь, собирается в кучу, чтобы не получилась каша из говна и палок:
<body>
<header>...</header> <!-- Шапка, тут всё ясно -->
<nav>...</nav> <!-- Менюшка, чтоб не заблудиться -->
<main> <!-- А вот и святая святых, основное тело -->
<article> <!-- Самостоятельная статья, например -->
<section>...</section> <!-- А внутри неё ещё разделы -->
</article>
<aside>...</aside> <!-- И где-то сбоку сопливая реклама -->
</main>
<footer>...</footer> <!-- И подвал, куда же без него -->
</body>Пользуешься этим — и сразу у поисковиков волнение ебать, они понимают, где что лежит. У скринридеров терпения ноль ебать, они сразу пользователю на ухо рычат: «Вот шапка, вот основное содержание, вот статья». Красота, а не жизнь! А не то что див на диве и дивом погоняет.