W3docs
ru
Войти

HTML-тег <article>

The <article> tag is used to define logical blocks on a page. W3docs HTML tutorial explains how to use the HTML <article> tag with syntax, examples.

Тег <article> является одним из элементов HTML5. Он используется для определения независимого, самодостаточного контента. Статья должна иметь собственный смысл и легко отличаться от остального содержимого веб-страницы.

Элемент <article> может включать:

  • запись в блоге
  • сообщение на форуме
  • новость
  • комментарий

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

С помощью элемента <address> можно указать информацию об авторе элемента <article>. Это применяется к каждому <article> независимо, включая вложенные.

В одном HTML-документе можно использовать несколько тегов <article>.

Внутри тега <article> можно использовать заголовки (<h1>–<h6>) для структурирования содержимого. Каждый <article> может начинаться со своего собственного заголовка <h1>.

Дата и время публикации тега <article> можно указать с помощью элемента <time> с атрибутом datetime.

Синтаксис

Тег <article> парный. Содержимое записывается между открывающим (<article>) и закрывающим (</article>) тегами.

Пример использования HTML-тега <article>:

Пример использования HTML-тега <article>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>
Попробуйте сами »

Результат

article example

Пример использования HTML-тега <article> внутри HTML-тега <section>:

Статья о цветах с использованием тега article | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
      <article>
        <h2>Lilies</h2>
        <p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
      </article>
    </section>
  </body>
</html>
Попробуйте сами »

Атрибуты

Тег <article> поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег <article>

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

Практика

Практика

Какова функциональность HTML-тега &lt;article&gt;?