files/ru/web/html/element/article/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

---
title: <article>
slug: Web/HTML/Element/article
tags:
  - Element
  - HTML
  - Web
  - Веб
  - Разделы
  - Разделы HTML
  - Справка
  - Элемент
translation_of: Web/HTML/Element/article
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;article&gt;</code></strong> представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для независимого распространения или повторного использования.</span> Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>Данный документ может иметь множество статей; например, когда читатель просматривает блог, в котором текст каждой статьи отображается один за другим, каждая публикация будет находиться в элементе <code>&lt;article&gt;</code>, возможно, с одним или более элементами <code>&lt;section&gt;</code> внутри.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Секционный_контент">секционный контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Явный_контент">явный контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенное содержимое</th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">Основной поток</a>.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тега</th>
   <td>Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные родительские элементы</th>
   <td>Любой элемент, который разрешает <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток">контент основного потока</a> в качестве содержимого. Обратите внимание, что элемент <code>&lt;article&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}.</td>
  </tr>
  <tr>
   <th scope="row">Разрешенные ARIA роли</th>
   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM-интерфейс</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>К этому элементу применимы только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>

<h2 id="Примечание">Примечание</h2>

<ul>
 <li>Каждый элемент <code>&lt;article&gt;</code> должен быть идентифицирован, обычно путем добавления заголовка (элементы <a href="/ru/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code></a>) в качестве дочернего элемента.</li>
 <li>Когда элемент <code>&lt;article&gt;</code> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <code>&lt;article&gt;</code>, вложенными в другой <code>&lt;article&gt;</code>, являющийся публикацией в блоге.</li>
 <li>Информация об авторе в элементе <code>&lt;article&gt;</code> может быть представлена через элемент {{HTMLElement("address")}}, но это не применимо к вложенным элементам <code>&lt;article&gt;</code>.</li>
 <li>Дата и время публикации в элементе <code>&lt;article&gt;</code> могут быть описаны с помощью атрибута {{htmlattrxref("datetime", "time")}} элемента {{HTMLElement("time")}}. <em>Обратите внимание, что атрибут {{htmlattrxref("pubdate", "time")}} элемента {{HTMLElement("time")}} больше не является частью стандарта {{glossary("W3C")}} {{glossary("HTML5")}}.</em></li>
</ul>

<h2 id="Примеры">Примеры</h2>

<pre class="brush: html">&lt;article class="film_review"&gt;
  &lt;header&gt;
    &lt;h2&gt;Парк Юрского периода&lt;/h2&gt;
  &lt;/header&gt;
  &lt;section class="main_review"&gt;
    &lt;p&gt;Динозавры были величественны!&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="user_reviews"&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Слишком страшно для меня.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Опубликовано
          &lt;time datetime="2015-05-16 19:00"&gt;16 мая&lt;/time&gt;
          Лизой.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Я согласен, динозавры мои любимцы.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Опубликовано
          &lt;time datetime="2015-05-17 19:00"&gt;17 мая&lt;/time&gt;
          Томом.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Опубликовано
      &lt;time datetime="2015-05-15 19:00"&gt;15 мая&lt;/time&gt;
      Стаффом.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;
</pre>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>


<p>{{Compat("html.elements.article")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
 <li class="last"><a class="deki-ns current" href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5</a>.</li>
</ul>