Приветствую всех! Это третья часть про теги, которые нужны для создания сайта с нуля. Если вы не читали или не знаете базовых тегов, то рекомендую прочитать первую и вторую части. А теперь перейдём к теме этой статьи.
Семантика в HTML5.
Большинство сайтов имеют блочную структуру. Обычно сайт делится на следующие блоки (разделы):
- шапка сайта
- основная часть
- сайдбар (боковая панель)
- подвал сайта
До появления пятой версии HTML разработчики сайтов делили страницу на такие блоки с помощью тега <div></div>. Но уже в текущей версии HTML есть специальные теги для семантического деления ВЕБ-страницы на части.
<header></header>
Начнём, пожалуй, с шапки сайта – это тег <header></header>. На сайте внутрь этого тега помещается логотип сайта, его название, поисковая форма и навигация по сайту / меню.
В качестве реального примера будем рассматривать сайт-справочник «Дока» (https://doka.guide).
В приведённом примере красной рамкой выделен <header></header>. Здесь и видно логотип, название сайта, элементы навигации.
<nav></nav>
Чаще всего ссылки для навигации по сайту помещают в парный тег <nav></nav>. То есть, если вы хотите разместить где-то несколько ссылок на разделы сайта, то помещайте их в этот тег.
Для примера возьмём другой сайт – «ИТШЕФ» (https://itchief.ru). Здесь также красным обведён <header></header>, а внутри него, синим, тег <nav></nav> с ссылками на разделы сайта. Логотип в данном случае тоже ссылка, поэтому он помещён в навигацию.
<aside></aside>
В <aside></aside> пишется информация, которую можно "отделить" от вашей ВЕБ-страницы и при этом не потерять сути основного текста. В пример можно привести боковые панели на сайтах, в которых размещены рекламные блоки, или, опять же, ссылки на другие страницы одного сайта.
В том же «ИТШЕФе» такая панель расположена справа. Её я обвёл зелёным цветом:
<main></main>
Этот важный тег является контейнером для основной части страницы, то есть для вашего текста и картинок. Контент в этом теге должен быть уникальным и не повторяться нигде на других страницах.
Но если взять главную страницу сайта «Дока», то можно увидеть, что в <main></main> помещены ссылки почти на все страницы сайта и небольшие блоки с содержимым. В этом случае это и есть уникальный контент.
<article></article> и <section></section>
Обычно эти теги помещаются внутрь контейнера <main></main>. Тег <article></article> служит для создания чего-то независимого и завершённого. Это может быть статья, новость или комментарий на форуме и так далее.
<section></section> является контейнером для создания логических разделов страницы. В отличии от <article></article>, который можно использовать отдельно, <section></section> – это часть документа.
Для реального примера возьмём ещё один сайт – «MDN» (https://developer.mozilla.org/ru). Здесь структура организована так: в теге <article></article> есть секции. Заметьте, что каждая секция имеет свой заголовок, это важно – в каждой секции должен быть заголовок.
Статью «Изучение веб-разработки» можно рассмотреть отдельно от этого сайта, но если взять отдельно секцию «Что нового», то будет непонятно, о чём идёт речь.
<footer></footer>
Подвал сайта – тег <footer></footer>. В подвал сайта принято добавлять контактную информацию, информацию об авторском праве (Copyright), снова ссылки и тому подобное.
Заключение.
С появлением HTML5 появилась возможность семантически делить сайт на части. Для каждой части сайта появились свои теги. Стоит понимать, когда использовать определённый тег, чтобы не нарушить семантику. Если вы не знаете, какой тег использовать, то воспользуйтесь универсальным тегом <div></div>, он не несёт какого-либо логического смысла.
⤵
Мы рассмотрели практически все HTML-теги, которые используются для вёрстки сайта 🌐 Конечно же, есть ещё разные теги, но они используются не часто
Если есть вопросы, задавайте их в комментариях, постараюсь ответить 💬
Материалы из статьи: https://disk.yandex.ru/d/c83cYrLp-2ZMSg📎
Читайте также: