Тег article в HTML: что это такое?

Дата последнего обновления статьи: 2025-01-01

BODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLEBODYTABLEFOOTERBUTTONBRHEADERDIVSECTIONIMGSPANARTICLE<article>

Это изображениелицензировано подCC BY 4.0

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

Этот тег является одним из важных семантических элементов HTML5, который помогает структурировать веб-страницу и делает её более понятной как для поисковых систем, так и для программ чтения с экрана.

Синтаксис тега article

<article>
  <!-- Содержимое article -->
</article>

Атрибуты тега article

Тег article поддерживает только глобальные атрибуты.

Примеры использования тега article

Пример статьи блога

<article>
  <h2>Заголовок статьи</h2>
  <p>Основной текст статьи...</p>
  <footer>
    <p>Автор: Иван Иванов</p>
    <time datetime="2024-01-16">16 января 2024</time>
  </footer>
</article>

Пример новостной статьи

<article>
  <header>
    <h2>Заголовок новости</h2>
    <p>Опубликовано: <time datetime="2024-01-16">16 января 2024</time></p>
  </header>
  <figure>
    <img src="news-image.jpg" alt="Описание изображения">
    <figcaption>Подпись к изображению</figcaption>
  </figure>
  <p>Текст новости...</p>
  <footer>
    <p>Источник: <cite>Название источника</cite></p>
  </footer>
</article>

Пример вложенных article

<article>
  <h2>Основная статья</h2>
  <p>Текст статьи...</p>
  
  <section class="comments">
    <h3>Комментарии</h3>
    <article>
      <h4>Комментарий от пользователя</h4>
      <p>Текст комментария...</p>
      <footer>
        <p>Написал: Пётр Петров</p>
      </footer>
    </article>
  </section>
</article>

Советы по использованию тега article

Используйте тег article только для самодостаточного контента.
Всегда включайте заголовок (h1-h6) внутри article для идентификации статьи.
Используйте теги header и footer внутри article для дополнительной семантической структуры.
Время публикации могут быть описаны с помощью атрибута datatime элемента time.
Контактная информация об авторе статьи может быть заключена в тег address.
Можно вкладывать article друг в друга, если есть логическая связь между ними. Например для обозначения коментария к статье.

Часто задаваемые вопросы (FAQ)

1 Можно ли вкладывать теги article друг в друга?

Да, теги article можно вкладывать друг в друга, если вложенный контент связан с основным article.

2 Чем отличается article от section?

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

Заключение

Тег article является важным семантическим элементом HTML5, который помогает создавать хорошо структурированные веб-страницы. Правильное использование этого тега улучшает доступность контента, SEO и общее качество вашего сайта.

Для получения дополнительной информации о теге article, рекомендуем ознакомиться с официальной документацией на MDN.

Предыдущая страница

Следующая страница