Руководство по семантическому HTML

Такой подход имеет ряд преимуществ. Во-первых, помогает поисковым системам и другим технологиям понять структуру и назначение контента на сайте. Во-вторых, делает контент более доступным для людей, использующих вспомогательные технологии для навигации по сайту. И, в-третьих, код легче читать и поддерживать, поскольку назначение каждого элемента понятно.

Рассмотрим распространённые семантические HTML теги и способы их эффективного использования.

header

Тег header используется для выделения верхней части веб-страницы, которая содержит заголовок или логотип, навигационные ссылки и другие элементы, общие для всех страниц сайта. Используя тег header, можно создать чёткое разделение между заголовком и основным содержанием страницы, что облегчает пользователям понимание и навигацию по сайту.

<!-- Не семантический заголовок -->
<div class="header">
  <h1>My Site</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</div>

<!-- Семантический заголовок -->
<header>
  <h1>My Site</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

nav

Тег nav используется для обозначения раздела веб-страницы, содержащего навигационные ссылки. Используя тег nav, можно указать пользователям и поисковым системам, что этот раздел вашего сайта специально предназначен для навигации.

<!-- Не семантическая навигация -->
<div class="navigation">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

<!-- Семантическая навигация -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

main

Тег main используется для выделения основной части содержимого веб-страницы. Используя тег main, вы можете дать понять пользователям и поисковым системам, какая часть вашей страницы содержит основное содержание.

<!-- Не семантический основной контент -->
<div class="main-content">
  <h2>About Us</h2>
  <p>Welcome to our website. We are a company that specializes in widgets.</p>
</div>

<!-- Семантический основной контент -->
<main>
  <h2>About Us</h2>
  <p>Welcome to our website. We are a company that specializes in widgets.</p>
</main>

article

Тег article используется для представления отдельного фрагмента контента, например, записи в блоге, новостной статьи или обзора продукта. Содержимое тега article должно быть самостоятельным и содержательным и может включать заголовки, абзацы, изображения и другие типы контента.

<!-- Не семантическая статья -->
<div class="article">
  <h2>How to Make a Widget</h2>
  <p>Widgets are great. Here's how to make one.</p>
</div>

<!-- Семантическая статья -->
<article>
  <h2>How to Make a Widget</h2>
  <p>Widgets are great. Here's how to make one.</p>
</article>

aside

Тег aside используется для разметки содержимого, которое связано с основным содержанием веб-страницы, но не является его неотъемлемой частью. Это может быть дополнительная информация, реклама или связанные статьи.

<div>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here</p>
  </article>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#">Article 1</a></li>
      <li><a href="#">Article 2</a></li>
      <li><a href="#">Article 3</a></li>
    </ul>
  </aside>
</div>

section

Тег section используется для обозначения разделов веб-страницы, которые тематически сгруппированы вместе. Это могут быть такие разделы, как главы или части длинной статьи или различные части страницы товара.

<section>
  <h2>Заголовок раздела</h2>
  <p>Содержание раздела находится здесь</p>
</section>

footer

Тег footer используется для выделения нижней части веб-страницы, которая может содержать информацию об авторских правах, контактные данные или ссылки на профили социальных сетей.

<!-- Не семантический футер -->
<div class="footer">
  <p>&copy; 2021 My Site</p>
</div>

<!-- Семантический футер -->
<footer>
  <p>&copy; 2021 My Site</p>
</footer>

details и summary

Теги details и summary используются для разметки сворачиваемого раздела содержимого. Тег summary используется для разметки заголовка раздела, а тег details — для разметки самого содержимого.

<details>
  <summary>Нажмите, чтобы развернуть</summary>
  <p>Содержание здесь</p>
</details>

figure и figcaption

Теги figure и figcaption используются для разметки самостоятельного фрагмента содержимого, на который есть ссылка из основного содержимого веб-страницы. Тег figure используется для разметки самого содержимого, а тег figcaption — для разметки подписи или описания к нему.

<figure>
  <img src="image.jpg" alt="Описание изображения" />
  <figcaption>Подпись к изображению</figcaption>
</figure>

mark

Тег mark используется для пометки текста, который был выделен по какой-то причине. Это могут быть результаты поиска или текст, выделенный пользователем.

<p>Здесь приводится <mark>выделенный</mark> текст.</p>

time

Тег time используется для обозначения даты или времени. Используя тег time, вы облегчаете поисковым системам и другим технологиям понимание смысла содержимого вашей страницы.

<p>Событие состоится <time datetime="2021-01-01">1 января 2021 года</time>.</p>

progress

Тег progress используется для разметки полосы прогресса. Используя тег progress, вы можете облегчить пользователям понимание хода выполнения задачи.

<progress value="50" max="100"></progress>

Как насчёт div и span

Теги div и span не являются семантическими тегами. Они используются для разметки общих областей содержимого и не несут никакой конкретной смысловой нагрузки. Используйте эти теги только в том случае, если у вас нет другого выбора.

Заключение

В этой статье вы узнали о семантических тегах HTML и о том, как их можно использовать для того, чтобы сделать ваши веб-страницы более доступными и понятными. Вы также узнали о некоторых наиболее часто используемых семантических тегах, включая header, nav, main, article, aside, section, footer, details, summary, figure, figcaption, mark, time и progress. Надеюсь, эта статья была полезной. Спасибо за прочтение!