PrepBro
← Назад к вопросам

В чем разница между тегами aside, article и section?

2.3 Middle🔥 152 комментариев
#JavaScript Core

Комментарии (2)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

В чем разница между тегами aside, article и section

Эти семантические HTML5 теги критичны для доступности (accessibility), SEO и правильной структуры документа. Неправильное использование приводит к проблемам с читаемостью для скринридеров и парсерами.

Краткое определение

  • article - независимый, самодостаточный контент (статья, пост)
  • section - логическая группировка связанного контента (часть документа)
  • aside - контент, связанный tangentially с основным содержимым (сайдбар, реклама)

Article - независимый контент

Article предназначен для:

  1. Полностью независимого и самодостаточного контента
  2. Контента, который имеет смысл без остального документа
  3. Контента, который может быть распространен отдельно
<!-- Пример 1: Пост в блоге -->
<article>
  <header>
    <h1>Как выучить React</h1>
    <p>Published on <time datetime="2026-04-02">April 2, 2026</time></p>
  </header>
  
  <p>React - это библиотека для построения пользовательских интерфейсов...</p>
  
  <section>
    <h2>Основные концепции</h2>
    <p>JSX, Components, Hooks...</p>
  </section>
  
  <footer>
    <p>By John Doe</p>
  </footer>
</article>

<!-- Пример 2: Комментарий на сайте -->
<article class="comment">
  <header>
    <h3>Alice</h3>
    <time>2 hours ago</time>
  </header>
  
  <p>Отличная статья! Очень помогла мне разобраться с hooks.</p>
  
  <footer>
    <a href="#">Reply</a>
  </footer>
</article>

<!-- Пример 3: Новостной пост в RSS ленте -->
<article>
  <h1>Breaking: New Frontend Framework Released</h1>
  <p>Today marks the release of...</p>
</article>

Section - логическая группировка

Section предназначен для:

  1. Семантической группировки связанного контента
  2. Разделения документа на логические части
  3. Контента, который обычно имеет заголовок (h1-h6)
  4. Части документа или приложения
<!-- Пример 1: Разделение страницы -->
<body>
  <header>
    <h1>My Portfolio</h1>
  </header>
  
  <section>
    <h2>About Me</h2>
    <p>I am a frontend developer with 5 years of experience...</p>
  </section>
  
  <section>
    <h2>My Projects</h2>
    <ul>
      <li>Project 1</li>
      <li>Project 2</li>
    </ul>
  </section>
  
  <section>
    <h2>Contact Me</h2>
    <form><!-- contact form --></form>
  </section>
  
  <footer>
    <p>Copyright 2026</p>
  </footer>
</body>

<!-- Пример 2: Структурирование главы в книге -->
<article>
  <h1>Chapter 5: Advanced React Patterns</h1>
  
  <section>
    <h2>Custom Hooks</h2>
    <p>Custom hooks are a way to reuse component logic...</p>
  </section>
  
  <section>
    <h2>Compound Components</h2>
    <p>Compound components is a pattern that enables...</p>
  </section>
  
  <section>
    <h2>Render Props</h2>
    <p>Render props is a technique for sharing code...</p>
  </section>
</article>

<!-- Пример 3: Разделение пользовательского интерфейса -->
<section id="search-filters">
  <h2>Filters</h2>
  <form>
    <input type="text" placeholder="Search">
    <select><option>Category</option></select>
  </form>
</section>

<section id="search-results">
  <h2>Results</h2>
  <ul>
    <!-- результаты поиска -->
  </ul>
</section>

Aside - вспомогательный контент

Aside предназначен для:

  1. Контента, тангенциально связанного с основным содержимым
  2. Сайдбаров (боковых панелей)
  3. Рекламы и другого вспомогательного материала
  4. Примечаний и дополнительной информации
  5. Тегов, категорий и меню навигации
<!-- Пример 1: Сайдбар с рекомендациями -->
<main>
  <article>
    <h1>Introduction to TypeScript</h1>
    <p>TypeScript is a typed superset of JavaScript...</p>
  </article>
</main>

<aside>
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#">Advanced TypeScript Tips</a></li>
    <li><a href="#">TypeScript with React</a></li>
    <li><a href="#">Testing TypeScript Code</a></li>
  </ul>
  
  <h2>Categories</h2>
  <ul>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">Web Development</a></li>
    <li><a href="#">Tutorial</a></li>
  </ul>
</aside>

<!-- Пример 2: Aside внутри article -->
<article>
  <h1>The History of Web Development</h1>
  
  <p>In the beginning, the web was simple...</p>
  
  <aside>
    <h3>Did You Know?</h3>
    <p>The first web page was created by Tim Berners-Lee in 1991.</p>
  </aside>
  
  <p>As technology evolved...</p>
</article>

<!-- Пример 3: Реклама и дополнительная информация -->
<aside class="sidebar">
  <div class="advertisement">
    <img src="ad.jpg" alt="Advertisement">
  </div>
  
  <div class="newsletter">
    <h3>Subscribe to Newsletter</h3>
    <input type="email" placeholder="Your email">
    <button>Subscribe</button>
  </div>
  
  <div class="social-links">
    <h3>Follow Us</h3>
    <a href="#">Twitter</a>
    <a href="#">LinkedIn</a>
  </div>
</aside>

Таблица сравнения

╔═════════════╦═════════════════════════╦═════════════════╦════════════════════╗
║    Тег      ║      Содержимое         ║    Контекст     ║   Может быть        ║
║             ║                         ║                 ║  переиспользован    ║
╠═════════════╬═════════════════════════╬═════════════════╬════════════════════╣
║ <article>   ║ Независимый контент     ║ Пост, статья,   ║ Да (может быть в    ║
║             ║ (может существовать    ║ новость, коммент ║ RSS, отправлен      ║
║             ║ отдельно)               ║                 ║ отдельно)           ║
╠═════════════╬═════════════════════════╬═════════════════╬════════════════════╣
║ <section>   ║ Логическая группировка  ║ Часть документа ║ Нет (имеет смысл    ║
║             ║ связанного контента     ║ (глава, раздел) ║ только в контексте) ║
╠═════════════╬═════════════════════════╬═════════════════╬════════════════════╣
║ <aside>     ║ Вспомогательный контент ║ Сайдбар, реклама║ Нет (вспомогательный║
║             ║ (тангенциально связан)  ║ доп. информация ║ контент)            ║
╚═════════════╩═════════════════════════╩═════════════════╩════════════════════╝

Практический пример полной страницы

<!DOCTYPE html>
<html>
<head>
  <title>Tech Blog</title>
</head>
<body>
  <header>
    <h1>My Tech Blog</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  
  <main>
    <!-- ARTICLE - полная статья/пост -->
    <article>
      <header>
        <h1>Advanced React Hooks</h1>
        <p>Published by John Doe on April 2, 2026</p>
      </header>
      
      <p>React Hooks have revolutionized how we write components...</p>
      
      <!-- SECTION внутри article для структурирования -->
      <section>
        <h2>useState Hook</h2>
        <p>useState is the most basic hook...</p>
        <code>const [state, setState] = useState(initial);</code>
      </section>
      
      <!-- Еще один SECTION -->
      <section>
        <h2>useEffect Hook</h2>
        <p>useEffect is used for side effects...</p>
      </section>
      
      <!-- ASIDE внутри article для доп. информации -->
      <aside>
        <h3>Did You Know?</h3>
        <p>Hooks were introduced in React 16.8 in February 2019.</p>
      </aside>
      
      <footer>
        <p>Tags: <a href="#">React</a>, <a href="#">JavaScript</a></p>
      </footer>
    </article>
    
    <!-- Еще один ARTICLE - разные посты можно оборачивать в article -->
    <article>
      <h1>Vue vs React</h1>
      <p>Both are great frameworks, but...</p>
    </article>
  </main>
  
  <!-- ASIDE на уровне страницы - сайдбар -->
  <aside class="sidebar">
    <h2>Recent Posts</h2>
    <ul>
      <li><a href="#">Advanced React Hooks</a></li>
      <li><a href="#">Vue vs React</a></li>
    </ul>
    
    <h2>Categories</h2>
    <ul>
      <li><a href="#">React</a></li>
      <li><a href="#">Vue</a></li>
      <li><a href="#">Angular</a></li>
    </ul>
  </aside>
  
  <footer>
    <p>Copyright 2026 My Blog</p>
  </footer>
</body>
</html>

Влияние на доступность

Правильная семантика помогает:

  1. Скринридерам - они правильно интерпретируют структуру
  2. Парсерам и SEO - поисковики понимают важность контента
  3. Пользователям с ограничениями - лучшая навигация
  4. Разработчикам - более чистый и понятный код
<!-- ПЛОХО - неправильная семантика -->
<div class="article">
  <div class="article-header">
    <h1>Title</h1>
  </div>
  <div class="article-content">
    <p>Content...</p>
  </div>
</div>

<!-- ХОРОШО - правильная семантика -->
<article>
  <header>
    <h1>Title</h1>
  </header>
  <p>Content...</p>
</article>

Когда НЕ использовать

<!-- НЕПРАВИЛЬНО - section для разделения стилей -->
<section style="background: blue;">
  <!-- Это не логическая группировка! -->
</section>

<!-- ПРАВИЛЬНО - div для стилизации -->
<div style="background: blue;">
  <!-- Если нет семантического значения, используй div -->
</div>

<!-- НЕПРАВИЛЬНО - aside для обычного сайдбара -->
<aside>
  <!-- Основная навигация сайта -->
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</aside>

<!-- ПРАВИЛЬНО - nav для основной навигации -->
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Лучшие практики

  1. Используй article для полностью независимого контента (посты, статьи, новости)
  2. Используй section для логической группировки связанного контента с заголовком
  3. Используй aside для вспомогательного контента, сайдбаров, рекламы
  4. Помни про доступность - семантика помогает скринридерам
  5. Используй div если нет семантического значения
  6. Не вкладывай article в article без причины
  7. Всегда имей заголовок в section

Итог

Три тега - три разные роли:

  • article = независимый, самодостаточный контент
  • section = логическая группировка связанного контента
  • aside = вспомогательный, тангенциальный контент

Правильное использование этих тегов улучшает доступность, SEO и структуру вашего HTML-документа.

В чем разница между тегами aside, article и section? | PrepBro