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

Когда применяется тег article?

1.3 Junior🔥 171 комментариев
#HTML и CSS

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

🐱
claude-haiku-4.5PrepBro AI26 мар. 2026 г.(ред.)

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

Тег <article>: правильное использование в HTML5

Что такое <article>?

<article> — это семантический HTML5 тег, который обозначает самостоятельный контент, имеющий смысл сам по себе, без контекста остальной страницы. Это может быть статья в блоге, новость, отзыв, пост в социальной сети или любой другой независимый контент.

Ключевые характеристики

  • Самостоятельность — содержимое <article> должно иметь смысл как отдельный, полноценный материал
  • Переносимость — можно взять <article> и опубликовать его где-то ещё (в RSS, другом сайте), и он останется понятным
  • Повторяемость — на одной странице может быть несколько <article>
  • Семантика для SEO — помогает поисковикам лучше понимать структуру контента

Когда применяется <article>?

✅ Правильно использовать:

  • Статьи в блоге
  • Новостные статьи
  • Комментарии пользователей
  • Посты в социальных сетях
  • Рецепты с инструкциями
  • Отзывы о продуктах
  • Туториалы и гайды
  • Форумные посты

❌ Неправильно использовать:

  • Сайдбар (используй <aside>)
  • Навигация (используй <nav>)
  • Боковая панель инструментов
  • Любой вспомогательный контент

Примеры кода

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

<!DOCTYPE html>
<html>
<head>
  <title>Мой блог</title>
</head>
<body>
  <header>
    <h1>Мой Технологический Блог</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <!-- Первая статья -->
    <article>
      <header>
        <h2>Введение в React 19</h2>
        <p>Опубликовано <time datetime="2024-01-15">15 января 2024</time></p>
      </header>
      <p>React 19 приносит множество новых фич...</p>
      <footer>
        <p>Написано <strong>John Doe</strong></p>
      </footer>
    </article>

    <!-- Вторая статья -->
    <article>
      <header>
        <h2>TypeScript Best Practices</h2>
        <p>Опубликовано <time datetime="2024-01-10">10 января 2024</time></p>
      </header>
      <p>TypeScript помогает писать безопасный код...</p>
      <footer>
        <p>Написано <strong>Jane Smith</strong></p>
      </footer>
    </article>
  </main>

  <aside>
    <h3>Рекомендованные статьи</h3>
    <ul>
      <li><a href="/tags/react">React</a></li>
      <li><a href="/tags/typescript">TypeScript</a></li>
    </ul>
  </aside>
</body>
</html>

Пример 2: Комментарии как <article>

<section class="comments">
  <h2>Комментарии</h2>
  
  <article>
    <header>
      <h3>Комментарий от Alice</h3>
      <p><time datetime="2024-01-20T10:30">20 января в 10:30</time></p>
    </header>
    <p>Отличная статья! Очень полезной информацией...</p>
    <footer>
      <a href="#comment-reply">Ответить</a>
    </footer>
  </article>

  <article>
    <header>
      <h3>Комментарий от Bob</h3>
      <p><time datetime="2024-01-20T11:15">20 января в 11:15</time></p>
    </header>
    <p>У меня есть вопрос по второму примеру...</p>
    <footer>
      <a href="#comment-reply">Ответить</a>
    </footer>
  </article>
</section>

Пример 3: React компонент с <article>

interface BlogPost {
  id: number;
  title: string;
  author: string;
  date: string;
  content: string;
}

interface BlogListProps {
  posts: BlogPost[];
}

export function BlogList({ posts }: BlogListProps) {
  return (
    <main>
      {posts.map((post) => (
        <article key={post.id}>
          <header>
            <h2>{post.title}</h2>
            <p>
              Автор: <strong>{post.author}</strong> | {post.date}
            </p>
          </header>
          <p>{post.content}</p>
          <footer>
            <a href={`/posts/${post.id}`}>Читать полностью</a>
          </footer>
        </article>
      ))}
    </main>
  );
}

<article> vs <section>

Параметр<article><section>
СмыслСамостоятельный контентГруппировка тематически связанного контента
ПереносимостьМожно опубликовать отдельноЗависит от контекста
ПовторениеНесколько <article> на страницеНесколько <section> для разных тем
ПримерыСтатья, пост, отзывГлавы книги, разделы, темы

SEO и доступность

Для SEO:

  • <article> помогает Google лучше понимать структуру контента
  • Используй правильный header (h1, h2) внутри <article>
  • Включай <time> тег для дат публикации

Для доступности:

  • Screen readers понимают, что это независимый контент
  • <article> упрощает навигацию по сложным страницам
  • Помогает пользователям быстро найти нужную информацию

Антипаттерны

<!-- ❌ Неправильно: обвёртка для весь страницы -->
<article>
  <nav>...</nav>
  <main>...</main>
  <footer>...</footer>
</article>

<!-- ✅ Правильно: для самостоятельного контента -->
<body>
  <nav>...</nav>
  <main>
    <article>
      <!-- Содержимое статьи -->
    </article>
  </main>
  <footer>...</footer>
</body>

Заключение

Тег <article> — это инструмент для семантической разметки, который помогает браузерам, поисковикам и скринридерам понимать структуру твоего контента. Используй его для самостоятельного, переносимого контента, такого как статьи, посты и комментарии. Это улучшает SEO, доступность и общее качество твоего HTML.

Когда применяется тег article? | PrepBro