Семантические теги
Не нужно путать такие понятия, как семантическая верстка и правильная верстка. Правильная верстка может быть построена на тегах div и при этом быть валидной, не кривой и хорошо адаптироваться. Семантические теги указывают поисковым системам и другим разработчикам предназначение той или области на сайте. Если вы поисковым системам дадите знать, где на странице сайта контентная часть, то они вам будут благодарны.
До появления HTML5 семантических тегов, справлялись таким образом:
<div class="footer">Подвал</div>
Сейчас можно написать тоже самое, но немного короче. Обе эти записи идентичны и смотреться на странице будут абсолютно одинаково.
<footer>Подвал</footer>
Семантические HTML5 теги
Всем тем новичкам, кто только учится верстать сайт, не стоит уделять много внимания семантической верстке. Если на первых порах, вам пока трудно запомнить, где какой тег применять, то верстайте все на дивах, давая осмысленные названия классам. Поверьте, этого достаточно для валидной верстки.
Ниже перечислены все популярные семантические теги, разбивающие страницу на смысловые части.
Тег header
Исходя из названия, тег header является шапкой классического сайта или первой секцией на лендингах. В шапке сайта, как правило находится заголовок, логотип, немного текста, иногда присутствует какая-то графика (слайдер).
<header>
<img src="logo.png" alt="">
<h1>Заголовок</h1>
<p>Добро пожаловать на мой сайт!</p>
</header>
Теги section & article
Два эти тега между собой очень похожие - внутри тега section может находится тег article и наоборот. Надо для себя определится, что тег article лучше всего подходит для однотипного контента, будь то статьи, новости, записи блога. Внутри тега section может находится не однотипный контент (текст, изображения), но составляющий единое целое по смыслу.
<section>
<h2>Заголовок секции</h2>
<p>Наличие заголовка в секции явно указывает на то, что это секция.</p>
</section>
<article>
<p>Самая главная новость на сегодня..</p>
</article>
Тег nav
В тег nav помещают навигационные ссылки в виде просто ссылок или ссылок заключенных в маркированные списки.
<nav>
<a href="#">первая ссылка</a>
<a href="#">вторая ссылка</a>
</nav>
<nav>
<ul>
<li><a href="#">ссылка в списке #1</a></li>
<li><a href="#">ссылка в списке #2</a></li>
</ul>
</nav>
Тег main
Тег main служит контейнером для контентной части и всегда находиться между хедером и футером в классической структуре сайта. Например на лендингах тег main не нужен, вместо него используются теги section.
<header>..</header>
<main>Контент</main>
<footer>..</footer>
Тег aside
Тег aside выводит контент сбоку (баннеры, категории). Подобная структура часто встречается в блогах, где теги aside находятся в сайдбарах.
<aside></aside>
Тег footer
В тег footer оборачивают самую нижнюю часть сайта, где уже по традиции указывают контактные данные, дублирующие ссылки на важные разделы сайта и логотип.
<footer>..</footer>
Малоиспользуемые семантические теги
Тег figure & figcaption
Тег figure группирует элементы - выводит изображение и подпись к нему.
<figure>
<div>
<img src="picture.jpg" alt="">
<figcaption>Здесь изображен..</figcaption>
</div>
</figure>
Тег mark
Внутри тега выделяет текст желтым цветом.
<p><mark>Желтый цвет</mark>меняется на другой в CSS стилях</p>
Тег address
<address>Содержимое тега выделяется курсивом.</address>
Применяя семантическую верстку, вы вносите вклад в совокупность факторов улучшающих SEO у сайта.
-
Создано 01.04.2020 10:15:57
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.