HTML <article> Tag

Последнее обновление
воскресенье 15-го мая 2022

Элемент статьи является идеальной возможностью для разработчика включить часть контента, которая будет отделена от остального контента.

Определение и использование

Тег <article> указывает независимое, автономное содержимое. Это может быть пост в социальных сетях, комментарий пользователя, новость или даже сообщение в блоге.

Три статьи с независимым, автономным содержанием.

	<article>
  <a href="/html-section-tag">
    <h2>HTML <section> Tag</h2>
    <div>
      <time>13 мая 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-lang">
    <h2>HTML lang Attribute</h2>
    <div>
      <time>13 мая 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-audio-tag">
    <h2>HTML Audio Tag</h2>
    <div>
      <time>13 мая 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>
	

Примечание: <article> элемент не отображается в браузере как что-то особенное.

Важно знать, что если у нас есть статья с длинным содержанием, мы можем использовать разделы внутри элемента статьи, чтобы логически разбить контент.

	<!--article начало-->

<article>
  <h1>Всем привет</h1>
  <section>
    <h2>Здравствуйте от California</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Здравствуйте от London</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Здравствуйте от Austria</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
</article>

<!--article конец-->
	

Как видно из приведенного выше примера, элемент article может иметь много элементов раздела.

Поддержка браузеров

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает элемент.

Элемент Chrome Edge Mozilla Safari Opera
<article> 6.0 9.0 4.0 5.0 11.1

Примечание Имейте в виду, что если содержимое является автономным, то предпочитайте использовать <article> тег . Вы можете использовать CSS для стилизации <article> элемента.

Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент <article> со следующими значениями по умолчанию.

	article {
  display: block;
}
	
article about html
articles on html
article in html
article on html
articles about html
article tags html
article tags
element article article element
article header
article html tag
article tag html
html article tag html tag article
article elements