Какие современные HTML-теги используются в вёрстке?

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

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

• <header> — шапка страницы или секции.
• <nav> — блок навигации.
• <main> — основное содержимое страницы (один на документ).
• <section> — тематический раздел.
• <article> — самостоятельная единица контента (пост, новость).
• <aside> — боковая панель, дополнительный контент.
• <footer> — подвал.
• <figure> и <figcaption> — иллюстрация с подписью.
• <details> и <summary> — раскрывающийся блок без JS.
• <dialog> — модальное окно.
• <picture>, <video>, <audio> — медиа.

Пример разметки

<header>
  <nav><a href="/">Главная</a></nav>
</header>
<main>
  <article>
    <h1>Заголовок</h1>
    <figure>
      <img src="pic.jpg" alt="Описание">
      <figcaption>Подпись</figcaption>
    </figure>
  </article>
  <aside>Реклама</aside>
</main>
<footer>© 2024</footer>

Семантические теги не заменяют CSS, но дают структуре смысл. Например, скринридер может быстро перейти к <main> или <nav>, а поисковик лучше индексирует контент.

Итог: применяйте семантические теги везде, где они уместны, а <div> оставляйте для чисто стилевых обёрток без смысловой нагрузки.