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