This page was translated from English by the community. Learn more and join the MDN Web Docs community.
<article>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
HTML-элемент <article> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.
Интерактивный пример
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article>
.forecast {
margin: 0;
padding: 0.3rem;
background-color: #eee;
}
.forecast > h1,
.day-forecast {
margin: 0.5rem;
padding: 0.3rem;
font-size: 1.2rem;
}
.day-forecast {
background: right/contain content-box border-box no-repeat
url("/shared-assets/images/examples/rain.svg") white;
}
.day-forecast > h2,
.day-forecast > p {
margin: 0.2rem;
font-size: 1rem;
}
Данный документ может иметь множество статей; например, когда читатель просматривает блог, в котором текст каждой статьи отображается один за другим, каждая публикация будет находиться в элементе <article>, возможно, с одним или более элементами <section> внутри.
| Категории контента | Основной поток, секционный контент, явный контент. |
|---|---|
| Допустимое содержимое | Основной поток. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который разрешает контент основного потока в качестве содержимого. Обратите внимание, что элемент <article> не должен быть потомком элемента <address>. |
| Допустимые ARIA-роли | application , document , feed , main , presentation , region |
| DOM-интерфейс | HTMLElement |
Атрибуты
К этому элементу применимы только глобальные атрибуты.
Примечание
- Каждый элемент
<article>должен быть идентифицирован, обычно путём добавления заголовка (элементы<h1>-<h6>) в качестве дочернего элемента. - Когда элемент
<article>является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами<article>, вложенными в другой<article>, являющийся публикацией в блоге. - Информация об авторе в элементе
<article>может быть представлена через элемент<address>, но это не применимо к вложенным элементам<article>. - Дата и время публикации в элементе
<article>могут быть описаны с помощью атрибутаdatetimeэлемента<time>. Обратите внимание, что атрибутpubdateэлемента<time>больше не является частью стандарта W3C HTML5.
Примеры
<article class="film_review">
<header>
<h2>Парк Юрского периода</h2>
</header>
<section class="main_review">
<p>Динозавры были величественны!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Слишком страшно для меня.</p>
<footer>
<p>
Опубликовано
<time datetime="2015-05-16 19:00">16 мая</time>
Лизой.
</p>
</footer>
</article>
<article class="user_review">
<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>
Спецификации
| Specification |
|---|
| HTML # the-article-element |
Совместимость с браузерами
Loading...