QuickFrontend
HTML

Что такое семантический HTML и зачем он нужен?

Семантический HTML

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

Основные теги

<header>   <!-- шапка страницы или секции -->
<nav>      <!-- навигация -->
<main>     <!-- основной контент (один на страницу) -->
<article>  <!-- самостоятельный блок: пост, карточка -->
<section>  <!-- тематическая секция с заголовком -->
<aside>    <!-- сайдбар, дополнительный контент -->
<footer>   <!-- подвал -->
<figure> + <figcaption>
<time datetime="2024-01-15">15 января</time>
<address>  <!-- контактные данные -->

Пример структуры

<body>
  <header>
    <nav aria-label="Основная навигация">
      <a href="/">Главная</a>
    </nav>
  </header>
  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <time datetime="2024-01-15">15 января 2024</time>
      <p>Текст...</p>
    </article>
    <aside><h2>Похожие статьи</h2></aside>
  </main>
  <footer>
    <address><a href="mailto:hi@example.com">hi@example.com</a></address>
  </footer>
</body>

Зачем важно

  • SEO: поисковики лучше понимают структуру.
  • Доступность: screen reader-ы умеют переходить между блоками.
  • Поддерживаемость: роль каждого блока очевидна.

Источники