<article>
- 25 января 2023
Тег <article>
в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть использован и переиспользован в разных местах без потери своего значения.
Примерами такого контента могут быть статьи, блог-посты, научные работы, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Синтаксис тега <article>
<article>
<!-- контент -->
</article>
Спецификация HTML
Тег <article>
является актуальным согласно спецификации HTML.
Семантический или нет
Тег <article>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он используется для выделения важного и/или интересного контента на странице.
Примеры использования
Создание статьи на сайте новостей:
<article>
<h2>Заголовок статьи</h2>
<p>Текст статьи...</p>
</article>
Группирование статей на странице:
<section>
<h2>Секция с несколькими статьями</h2>
<article>
<h3>Заголовок статьи 1</h3>
<p>Текст статьи 1...</p>
</article>
<article>
<h3>Заголовок статьи 2</h3>
<p>Текст статьи 2...</p>
</article>
<article>
<h3>Заголовок статьи 3</h3>
<p>Текст статьи 3...</p>
</article>
</section>
Использование в основном содержимом сайта:
<main>
<h1>Заголовок страницы</h1>
<article>
<h2>Главная новость</h2>
<p>Текст новости...</p>
</article>
<section>
<h2>Раздел с другими новостями</h2>
<article>
<h3>Заголовок новости 1</h3>
<p>Текст новости 1...</p>
</article>
<article>
<h3>Заголовок новости 2</h3>
<p>Текст новости 2...</p>
</article>
</section>
</main>
Использование для обзора продукта:
<article>
<h2>Обзор продукта</h2>
<p>Текст обзора...</p>
<section>
<h3>Преимущества продукта</h3>
<ul>
<li>Атрибут 1 — значение 1</li>
<li>Атрибут 2 — значение 2</li>
</ul>
</section>
</article>
Для чего использовать тег <article>
- Помочь поисковым системам понять, какой контент является основным на странице.
- Помочь читателям быстрее находить нужный контент на странице.
- Разграничивать контент на странице и группировать его по смыслу.
Атрибуты тега <article>
Тег <article>
не имеет собственных контентных атрибутов, но поддерживает все глобальные атрибуты HTML.
Ограничения
Не следует использовать тег <article>
для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
Поддержка браузерами
Тег <article>
поддерживается всеми современными браузерами.
Альтернативные теги
Тег <article>
не имеет прямых альтернативных тегов, но его можно заменить на тег <div>
c добавлением дополнительных классов в случае, если на странице нет статей или других самостоятельных материалов.
Актуальность
Тег <article>
актуален и не является устаревшим.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023