Какие семантические теги HTML5 ты знаешь

1️⃣ Как кратко ответить

Семантические теги HTML5 включают: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <mark>, <time>, <summary>, <details>. Они улучшают структуру и доступность веб-страниц, помогая поисковым системам и вспомогательным технологиям лучше понимать содержимое.

2️⃣ Подробное объяснение темы

Семантические теги HTML5 были введены для улучшения структуры и доступности веб-страниц. Они позволяют разработчикам обозначать различные части контента более осмысленно, что помогает как поисковым системам, так и вспомогательным технологиям (например, экранным читалкам) лучше интерпретировать содержимое страницы.

Основные семантические теги HTML5:

• <header>: Используется для обозначения заголовочной части документа или секции. Обычно содержит заголовки, логотипы, навигационные элементы.

  <header>
    <h1>Название сайта</h1>
    <nav>
      <ul>
        <li><a href="#home">Главная</a></li>
        <li><a href="#about">О нас</a></li>
      </ul>
    </nav>
  </header>
  

• <nav>: Определяет навигационные ссылки. Используется для группировки ссылок, которые ведут на другие страницы или разделы текущего документа.

  <nav>
    <ul>
      <li><a href="#home">Главная</a></li>
      <li><a href="#services">Услуги</a></li>
    </ul>
  </nav>
  

• <main>: Содержит основное содержание документа. Должен быть уникальным и не включать повторяющиеся элементы, такие как боковые панели или заголовки.

  <main>
    <h2>Основной контент</h2>
    <p>Здесь находится основная информация страницы.</p>
  </main>
  

• <article>: Представляет собой независимый фрагмент контента, который может быть распространен отдельно от остальной части страницы. Это может быть статья, запись в блоге или новостной элемент.

  <article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи...</p>
  </article>
  

• <section>: Используется для группировки связанных тем или контента. Каждая секция обычно имеет свой заголовок.

  <section>
    <h2>Раздел 1</h2>
    <p>Содержимое раздела 1...</p>
  </section>
  

• <aside>: Содержит контент, который косвенно связан с основным содержанием. Это может быть боковая панель, цитаты, ссылки на другие ресурсы.

  <aside>
    <h3>Полезные ссылки</h3>
    <ul>
      <li><a href="#link1">Ссылка 1</a></li>
    </ul>
  </aside>
  

• <footer>: Определяет нижнюю часть документа или секции. Обычно содержит информацию об авторе, ссылки на политику конфиденциальности, контактные данные.

  <footer>
    <p>&copy; 2023 Моя компания</p>
  </footer>
  

• <figure> и <figcaption>: Используются для группировки иллюстраций, диаграмм или других медиа-объектов с их подписями.

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

• <mark>: Выделяет текст, который имеет особое значение или важность.

  <p>Это <mark>важное</mark> сообщение.</p>
  

• <time>: Представляет дату или время. Может использоваться для обозначения времени публикации статьи или события.

  <time datetime="2023-10-05">5 октября 2023</time>
  

• <summary> и <details>: Используются для создания раскрывающихся элементов, которые могут содержать дополнительную информацию.

  <details>
    <summary>Подробнее</summary>
    <p>Дополнительная информация...</p>
  </details>
  

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