Руководство по написанию семантического 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>. Надеюсь, эта статья была полезной. Спасибо за прочтение!