Содержание статьи
Тег <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> помогает создавать структурированные и логически организованные веб-страницы, что положительно сказывается
