HTML-тег `<article>`

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

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

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

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

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

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

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

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

Синтаксис

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

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

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

html

<!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>

Try it Yourself »

Результат

article example

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

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

html

<!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>

Try it Yourself »

Атрибуты

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

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

css

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

Практика

Какова функциональность HTML-тега <article>?

Он определяет раздел в документе.Он определяет гиперссылкуОн указывает независимый, самодостаточный контент.Он отмечает начало веб-страницы.Он используется для встраивания мультимедиа, такого как аудио, видео и т. д., в HTML-документ.

HTML-тег <article> ​

Синтаксис ​

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

Результат ​

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

Атрибуты ​