<article> – Елемент вмісту статті

{{HTMLSidebar}}

Елемент <article> HTML представляє самодостатню сутність у документі, в застосунку, на сторінці або на сайті. Призначений для незалежного розповсюдження або перевикористання (наприклад, на інших вебсайтах). Приклади використання: записи на форумі, статті у журналах, газетах або блогах, картки товарів в інтернет-магазинах, коментарі користувачів, інтерактивні віджети або гаджети та інші незалежні одиниці контенту.

Спробуйте його в дії

Документ може містити декілька елементів статей. Наприклад, у блозі, де читачу, що гортає сторінку, по черзі показується текст різних статей, кожен запис містився б в елементі <article>, можливо, з одним або декількома елементами <section> всередині.

Атрибути

Цей елемент приймає лише глобальні атрибути.

Примітки щодо використання

  • Кожен елемент <article> повинен бути ідентифікований. Зазвичай шляхом додавання елементів заголовка (<h1> - <h6>) як нащадків елемента <article>.
  • Коли елемент <article> вкладений в інший елемент <article>, то внутрішній з них репрезентує статтю, що повʼязана з зовнішнім елементом. Наприклад, коментарі до запису в блозі можуть бути елементами <article>, вкладеними в елемент <article>, що відповідає за сам запис.
  • Інформація про автора елемента <article> може бути розміщена в елементі <address>, але він не буде належати до елемента <article>.
  • Час та дата публікації елемента <article> можуть бути записані в атрибуті datetime елемента <time>.

Приклади

<article class="film_review">
  <h2>Парк Юрського періоду</h2>
  <section class="main_review">
    <h3>Відгук</h3>
    <p>Динозаври були чудовими!</p>
  </section>
  <section class="user_reviews">
    <h3>Відгуки користувачів</h3>
    <article class="user_review">
      <h4>Занадто страшно</h4>
      <p>Вони застрашні для мене</p>
      <footer>
        <p>
          Опубліковано
          <time datetime="2015-05-16 19:00">16 травня</time>
          Лізою.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Люблю динозаврів!</h4>
      <p>Погоджуюсь, динозаври найкращі.</p>
      <footer>
        <p>
          Опубліковано
          <time datetime="2015-05-17 19:00">17 травня</time>
          Тарасом.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Опубліковано
      <time datetime="2015-05-15 19:00">15 травня</time>
      Працівниками.
    </p>
  </footer>
</article>

Результат

Технічний підсумок

Категорії вмісту Потоковий вміст, Розділовий вміст, відчутний вміст
Дозволений вміст Потоковий вміст.
Пропуск тега Немає; і початковий, і кінцевий теги – обов'язкові.
Дозволені батьківські елементи Усі елементи, що приймають потоковий вміст. Зверніть увагу, що елемент <article> не повинен бути нащадком елемента <address>.
Неявна роль ARIA article
Дозволені ролі ARIA application, document, feed, main, none, presentation, region
Інтерфейс DOM HTMLElement

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
article
Chrome Full support 5
Edge Full support 12
Firefox Full support 4
Internet Explorer Full support 9
Opera Full support 11.1
Safari Full support 5
WebView Android Full support Yes
Chrome Android Full support Yes
Firefox for Android Full support 4
Opera Android Full support 11.1
Safari on iOS Full support 4.2
Samsung Internet Full support Yes

Дивіться також