Тег <article>
в HTML5 предназначен для обозначения содержимого, которое составляет независимый раздел документа. Этот тег используется для статей, блогов, комментариев, форумных постов и другого содержимого, которое может быть переиспользовано или распространено вне контекста текущей страницы. Вот рекомендации, когда и как правильно использовать тег <article>
:
Когда использовать <article>
:
- Независимый контент: Используйте
<article>
, когда содержимое имеет полную независимость и может быть понято вне контекста текущей страницы. Примеры включают статьи блога, новостные публикации, научные статьи, посты на форумах и отдельные комментарии. - Переиспользование контента: Если контент может быть перенесен или цитирован на другой странице или в другом контексте без потери смысла, он идеально подходит для обертывания в
<article>
. - Синдикация контента: Контент, предназначенный для синдикации (например, через RSS), также хорошо подходит для
<article>
, так как каждая запись является самодостаточной единицей информации.
Когда не стоит использовать <article>
:
- Связанный контент: Если содержимое тесно связано с контекстом страницы и не имеет смысла само по себе, лучше использовать другие семантические теги, такие как
<section>
или<div>
. Примером может служить вступительный текст страницы или описание категории продуктов, которое не имеет полной независимости. - Общие разделы страницы: Для обозначения общих частей веб-страницы, таких как шапка (
<header>
), подвал (<footer>
), навигация (<nav>
) или боковые панели (<aside>
),<article>
не подходит.
Пример использования <article>
:
<article>
<header>
<h2>Заголовок статьи</h2>
<p>Опубликовано <time datetime="2024-01-01">1 января 2024</time></p>
</header>
<p>Здесь начинается текст статьи, содержащий информацию, имеющую смысл вне контекста основного сайта.</p>
<footer>
<p>Автор статьи: <a href="/authors/john-doe">Джон До</a></p>
</footer>
</article>
Принципы использования:
- Семантическая целостность: Использование
<article>
способствует лучшему пониманию структуры контента поисковыми системами и улучшает доступность контента для вспомогательных технологий. - Метаданные: Внутри
<article>
можно использовать другие семантические элементы, такие как<header>
,<footer>
и<time>
, для обозначения заголовка статьи, информации об авторе и времени публикации соответственно. - Независимость: Содержимое внутри
<article>
должно быть понятно и иметь значение независимо от остальной части веб-страницы.
Правильное использование <article>
помогает создавать структурированные и логически организованные веб-страницы, что положительно сказывается