HTML: Section и article: отличия и сценарии использования

<section> и <article> — оба семантические контейнеры, и новички часто путают, где какой ставить.

Главное отличие: самостоятельность

• <article> — это самодостаточный, законченный контент. Его можно вырезать со страницы, отправить в RSS, опубликовать на другой площадке — и он останется понятным. Примеры: статья в блоге, новость, комментарий, карточка товара.
• <section> — это смысловой раздел, который сам по себе не «живёт». Он часть чего-то большего: глава статьи, блок «Преимущества», «Как это работает», секция с подборкой карточек.

Простой тест: «Можно ли этот блок показать отдельно (в рассылке, виджете, ленте) и он будет иметь смысл?» Если да — это <article>. Если нет — скорее <section>.

<article>: когда использовать

Сценарии, где нужен именно <article>:

• Отдельные статьи и новости. Каждая публикация — свой <article>. Это помогает поисковикам и скринридерам видеть отдельные единицы контента.
• Комментарии пользователей. Каждый комментарий — самостоятельный фрагмент: у него есть автор, текст, дата. В ленте комментариев каждый комментарий удобно оборачивать в <article>.
• Карточки товаров в каталоге. Товар — это законченная сущность: название, фото, цена, описание. Даже если это просто карточка в сетке, семантически это <article>.
• Форумные посты. Сообщение на форуме — самостоятельная публикация.

Пример карточки товара как <article>:

<article class="product-card">
  <a href="/products/123" class="product-link">
    <img src="/img/prod-123.jpg" alt="Название товара: ключевые характеристики">
    <h3>Название товара</h3>
    <span class="price">1 500 ₽</span>
  </a>
</article>

Учитывая ваши задачи по каталогу и статьям: в PHP-шаблоне цикла товаров каждая итерация оборачивается в <article>, а не в <div>. Так структура остаётся понятной и для людей, и для роботов.

<section>: когда использовать

Сценарии для <section>:

• Разделы внутри одной страницы. Например, на странице «О компании» есть блоки: «История», «Команда», «Миссия». Каждый из них — <section> с заголовком.
• Логические блоки на главной. «Популярные товары», «Последние статьи», «Преимущества» — это секции, внутри которых уже могут быть карточки-<article>.
• Главы и смысловые части статьи. Если статья длинная, её удобно делить на смысловые куски: <section class="intro">, <section class="steps">, <section class="examples">.
• Группы элементов без самостоятельности. Например, блок фильтров в каталоге или блок «Сопутствующие товары» под карточкой товара.

Пример: главная страница с секциями:

<main>
  <section class="hero">
    <h2>Что мы делаем</h2>
    <p>Короткий текст про ценность.</p>
  </section>
 
  <section class="popular-products" aria-labelledby="popular-heading">
    <h2 id="popular-heading">Популярные товары</h2>
    <div class="grid">
      <article class="product-card">...</article>
      <article class="product-card">...</article>
    </div>
  </section>
 
  <section class="latest-articles" aria-labelledby="articles-heading">
    <h2 id="articles-heading">Последние статьи</h2>
    <article class="article-card">...</article>
    <article class="article-card">...</article>
  </section>
</main>

Здесь секции — это «контейнеры-разделы», а карточки внутри — самостоятельные единицы.

Частые ошибки и как их избежать

• Оборачивать всё подряд в <article>. Например, «блок преимуществ» или «фильтры» не являются самостоятельными публикациями. Это <section> или вообще <div> (если нужна только стилизация).
• Не ставить заголовок в <section>. У секции почти всегда должен быть заголовок (<h2> и т.п.) — так скринридеры и поисковики понимают, о чём раздел.
• Использовать <section> там, где нужна отдельная карточка. Карточка товара, статья, комментарий — это <article>, даже если они в сетке.
• Забывать про aria-labelledby в секциях. Если у секции есть заголовок с id, свяжите их через aria-labelledby. Это улучшает доступность и делает структуру понятнее.

Практические примеры под ваши задачи

Для статьи (блог/новости)

<article>
  <header>
    <h1>Как выбрать товар: практическое руководство</h1>
    <p class="meta">Автор: Иван Иванов | Дата: 24.08.2024</p>
  </header>
 
  <section class="intro">
    <p>Вводный абзац: коротко о пользе статьи.</p>
  </section>
 
  <section>
    <h2>Основные критерии выбора</h2>
    <p>Текст раздела, списки, таблицы.</p>
  </section>
 
  <section>
    <h2>Примеры и разбор</h2>
    <figure>
      <img src="/img/example.jpg" alt="Пример сравнения характеристик">
      <figcaption>Рис. 1. Пример сравнения.</figcaption>
    </figure>
  </section>
</article>

Для каталога (с PHP-логикой)

Если вы делаете цикл на PHP, структура выглядит так:

<section class="catalog-grid" aria-labelledby="catalog-heading">
  <h2 id="catalog-heading">Каталог товаров</h2>
  <?php foreach ($products as $product): ?>
    <article class="product-card">
      <a href="/products/<?= $product['id'] ?>">
        <img src="<?= $product['image'] ?>" alt="<?= $product['name'] ?>">
        <h3><?= htmlspecialchars($product['name']) ?></h3>
        <span class="price"><?= number_format($product['price'], 0, '.', ' ') ?> ₽</span>
      </a>
    </article>
  <?php endforeach; ?>
</section>

Так вы сохраняете семантику: секция — это раздел страницы, а каждая карточка — самостоятельная единица.

Для комментариев

<section class="comments" aria-labelledby="comments-heading">
  <h2 id="comments-heading">Комментарии</h2>
 
  <article class="comment">
    <header>
      <h4>Алексей Петров</h4>
      <time datetime="2024-08-24T12:34:00">24.08.2024, 12:34</time>
    </header>
    <p>Полезный комментарий к статье.</p>
  </article>
 
  <article class="comment">
    <!-- Следующий комментарий -->
  </article>
</section>

Связь с доступностью и SEO

• Скринридеры используют семантику, чтобы строить оглавление страницы. <article> и <section> помогают пользователю быстро переходить между смысловыми блоками.
• Поисковики лучше понимают структуру: отдельные статьи и товары в <article> могут лучше индексироваться и отображаться в сниппетах.
• Валидность и поддержка кода. Семантика делает шаблон предсказуемым: другой разработчик сразу видит, где список карточек, а где разделы статьи.