Тег <article>

Тег <article> (укр. – “стаття”) в HTML використовується для визначення самостійного, завершеного фрагмента контенту, який можна незалежно розповсюджувати або використовувати. Зазвичай його застосовують для створення статей, записів у блогах, коментарів, відгуків або інших окремих елементів вмісту.

Атрибути

Специфічні атрибути

Тег <article> не має специфічних атрибутів.

Глобальні атрибути

Тег <article> підтримує всі глобальні атрибути, що дозволяє застосовувати стилі, ідентифікатори, класи тощо.

  • id — унікальний ідентифікатор елемента. Наприклад:
<article id="blog-post">
   <!-- Контент статті -->
</article>
  • class — задає клас для стилізації через CSS. Наприклад:
<article class="news-item">
   <!-- Контент статті -->
</article>
  • style — додає інлайн-стилі. Наприклад:
<article style="background-color: #f9f9f9;">
   <!-- Контент статті -->
</article>
  • lang — визначає мову вмісту. Наприклад:
<article lang="uk">
   <!-- Контент статті -->
</article>
  • title — додає опис елемента, що відображається при наведенні курсора. Наприклад:
<article title="Контент статті">
   <!-- Контент статті -->
</article>

Приклади використання

<article>
  <h2>Як створити адаптивний веб-дизайн</h2>
  <p>Адаптивний дизайн дозволяє вашим сайтам працювати на будь-якому пристрої.</p>
  <footer>Опубліковано 14 грудня 2024 року</footer>
</article>

Додаткові моменти

  • Кожна стаття повинна мати свій заголовок (<h1>–<h6>), що описує її зміст. Якщо заголовок не відображений у дизайні, можна скористатися патерном visually-hidden, щоб його візуально приховати, але лишити доступним для пошукових систем та асистивних технологій.
  • Використовуйте тег <article>, коли контент може бути повторно використаний або опублікований окремо, наприклад, статті, новини, повідомлення в соціальних мережах.
  • Якщо частини контенту не є завершеними одиницями, замість <article> краще використовувати <section> або <div>.
  • Контент, огорнутий у <article>, часто має вищий пріоритет для пошукових систем, якщо в ньому використовується правильна семантика і структурованість.