Семантические теги: <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>

Почему семантика важна? 🌟

Раньше верстальщики использовали бесконечные <div> для всего подряд. Это работало, но было похоже на суп из тегов — браузеры и поисковики не понимали структуру страницы.

Семантические теги улучшают:
- Читаемость кода (вам и коллегам)
- Доступность (скринридеры для слабовидящих)
- SEO (поисковики лучше индексируют контент)

Основные теги и их роли 🧩

`<header>` — Шапка документа

Используется для вводной информации страницы или раздела. Может содержать логотип, навигацию, поиск.

<header>
  <h1>Мой крутой сайт</h1>
  <nav>...</nav>
</header>

Важно! В одной странице может быть несколько <header> (например, в каждом <article>).

`<footer>` — Подвал

Аналог <header>, но для нижней части. Часто включает копирайты, контакты, ссылки на соцсети.

<footer>
  <p>© 2023 Мой сайт</p>
  <a href="/privacy">Политика конфиденциальности</a>
</footer>

`<main>` — Главное содержимое

Основной контент страницы. Должен быть один на странице! Всё, что не относится к основному содержанию (сайдбары, шапки), оставляем за его пределами.

<body>
  <header>...</header>
  <main>
    <h2>О нас</h2>
    <p>Мы делаем сайты с душой.</p>
  </main>
  <footer>...</footer>
</body>

`<section>` и `<article>` — Секции и статьи

<section> — логический раздел (например, «Преимущества», «Отзывы»).
<article> — самостоятельный контент (пост в блоге, карточка товара).

Разница: <article> можно вырвать из страницы, и он останется осмысленным.

<section class="news">
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости...</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Ещё одна новость...</p>
  </article>
</section>

`<aside>` — Боковое содержимое

Дополнительная информация, не связанная напрямую с основным контентом: реклама, цитаты, архив блога.

<main>
  <h2>Статья о HTML</h2>
  <p>...основной текст...</p>
</main>
<aside>
  <h3>Рекомендуем</h3>
  <ul>
    <li><a href="/css">Учите CSS</a></li>
  </ul>
</aside>

`<nav>` — Навигация

Для основных ссылок сайта: меню, пагинация, оглавление.

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/about">О нас</a></li>
  </ul>
</nav>

Лайфхак: Не оборачивайте в <nav> все подряд ссылки — только ключевые блоки навигации.

Где ошибаются новички? ❌

Перегрузка <section>
Не нужно оборачивать каждый абзац в секцию — только если есть логическое разделение.
<article> без заголовка
По стандарту внутри должен быть хотя бы <h1>-<h6>.
<main> внутри <header>/<footer>
Главный контент не может быть частью шапки или подвала.

Практика: Собираем макет 🛠️

Давайте сверстаем простой блог:

<body>
  <header>
    <h1>Мой блог</h1>
    <nav>
      <a href="/posts">Все статьи</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Как верстать семантично</h2>
      <p>...текст статьи...</p>
      <section class="comments">
        <h3>Комментарии</h3>
        <p>Первый комментарий...</p>
      </section>
    </article>
  </main>

  <aside>
    <h3>Популярное</h3>
    <ul>...</ul>
  </aside>

  <footer>
    <p>Контакты: email@example.com</p>
  </footer>
</body>

Итоги 🏆

Семантика = ясность для браузеров, людей и роботов.
Теги не влияют на стиль (CSS решает, как они выглядят).
Используйте теги по назначению — это профессионализм!

Дальше: Попробуйте сверстать страницу с этими тегами и проверьте её через валидатор W3C. Увидите, как код становится чище!

Семантические теги: <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>

Почему семантика важна? 🌟

Основные теги и их роли 🧩

<header> — Шапка документа

<footer> — Подвал

<main> — Главное содержимое

<section> и <article> — Секции и статьи

<aside> — Боковое содержимое

<nav> — Навигация