article, section, aside

<article>, <section> и <aside> — семантические HTML5-элементы для разметки самостоятельного контента, тематических разделов и вспомогательного содержимого соответственно.

Зачем нужно

Эти элементы заменяют безликие <div class="article">, <div class="section"> и дают браузеру, поисковику и screen reader понять структуру контента. Screen reader позволяет пользователям перемещаться по landmark-регионам (article, section — через их роли). Правильная структура улучшает читаемость кода командой.

Где используется

  • <article> — посты блога, карточки товаров, комментарии, новостные материалы
  • <section> — разделы лендинга (О нас, Услуги, Контакты), главы документа
  • <aside> — боковые панели, виджеты, связанные ссылки, реклама, примечания

<article> — самостоятельный контент

<article> — это контент, который имеет смысл сам по себе, вне страницы (можно скопировать в RSS, другой сайт, приложение):

<!-- Статья блога -->
<article>
  <header>
    <h2><a href="/posts/html-basics">Основы HTML</a></h2>
    <time datetime="2026-04-10">10 апреля 2026</time>
  </header>
  <p>HTML — язык разметки для создания структуры веб-страниц...</p>
  <footer>
    <a href="/posts/html-basics">Читать далее</a>
  </footer>
</article>

<!-- Карточка товара -->
<article aria-label="MacBook Pro 14">
  <img src="macbook.jpg" alt="MacBook Pro 14">
  <h3>MacBook Pro 14</h3>
  <p>189 990 ₽</p>
  <button>В корзину</button>
</article>

<!-- Комментарий — article внутри article -->
<article>
  <h2>Статья</h2>
  <p>Текст...</p>
  <section>
    <h3>Комментарии</h3>
    <article>
      <p>Иван: Отличная статья!</p>
    </article>
  </section>
</article>

<section> — тематический раздел

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

<!-- Лендинг -->
<main>
  <section aria-labelledby="about-heading">
    <h2 id="about-heading">О нас</h2>
    <p>Мы занимаемся веб-разработкой с 2010 года.</p>
  </section>

  <section aria-labelledby="services-heading">
    <h2 id="services-heading">Услуги</h2>
    <ul>
      <li>Разработка сайтов</li>
      <li>Мобильные приложения</li>
    </ul>
  </section>
</main>

<section> без заголовка — повод задуматься, нужен ли он вообще (может быть <div>?).

<aside> — боковой контент

Содержимое, связанное с основным контентом, но являющееся вспомогательным:

<main>
  <article>
    <h1>CSS Grid: полное руководство</h1>
    <p>Текст статьи...</p>
  </article>

  <aside aria-label="Связанные материалы">
    <h2>Читайте также</h2>
    <ul>
      <li><a href="/css-flexbox">CSS Flexbox</a></li>
      <li><a href="/css-positioning">Позиционирование в CSS</a></li>
    </ul>
  </aside>
</main>

<!-- aside в боковой панели всей страницы -->
<aside aria-label="Боковая панель">
  <section>
    <h2>Популярные теги</h2>
    <!-- теги -->
  </section>
</aside>

Частые ошибки

Ошибка Почему плохо Как правильно
<section> вместо <article> для постов Посты — самостоятельный контент Используй <article>
<section> без заголовка Нет смысла в семантике без заголовка Добавляй <h2> или aria-label
<div> для всего Нет семантики Используй семантические элементы
<aside> для декоративной боковой колонки Боковая колонка ≠ aside, если нет связи с контентом <aside> только для тематически связанного контента

Связанные темы

Ресурсы