files/ru/web/html/element/section/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

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

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

<div>{{EmbedInteractiveExample("pages/tabbed/section.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>Например, меню навигации должно быть помещено в элемент {{htmlelement("nav")}}, но список результатов поиска и отображение карты с её элементами управления не имеют специфических элементов и могут быть помещены в <code>&lt;section&gt;</code>.</p>

<div class="note">
<p><strong>Заметка:</strong> Если содержимое элемента имеет смысл объединить как единое целое (в цельный и независимый блок), то элемент {{HTMLElement("article")}} может стать лучшим выбором.</p>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Категории контента</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;section&gt;</code> не должен быть потомком элемента {{HTMLElement("address")}}.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые роли ARIA</th>
   <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</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;section&gt;</code> должен быть идентифицирован, обычно путём добавления заголовка (элементы {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) в качестве дочернего элемента.</li>
 <li>Если имеет смысл по-особому объединить содержимое элемента <code>&lt;section&gt;</code> (например, сделать цельным и независимым разделом HTML-документа), используйте вместо него элемент {{HTMLElement("article")}}.</li>
 <li>Не используйте элемент <code>&lt;section&gt;</code> как общий контейнер; для этого есть {{HTMLElement("div")}}, особенно когда секционирование применяется только для стилизации. На практике раздел должен логически выделяться в структуре документа.</li>
</ul>

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

<h3 id="До">До</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;h1&gt;Заголовок&lt;/h1&gt;
  &lt;p&gt;Много замечательного контента&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="После">После</h3>

<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt;Заголовок&lt;/h1&gt;
  &lt;p&gt;Много замечательного контента&lt;/p&gt;
&lt;/section&gt;
</pre>

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

<h3 id="До_2">До</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;h2&gt;Заголовок&lt;/h2&gt;
  &lt;img src="bird.jpg" alt="птица"&gt;
&lt;/div&gt;
</pre>

<h3 id="После_2">После</h3>

<pre class="brush: html">&lt;section&gt;
  &lt;h2&gt;Заголовок&lt;/h2&gt;
  &lt;img src="bird.jpg" alt="птица"&gt;
&lt;/section&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-section-element', '&lt;section&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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


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

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

<ul>
 <li>Связанные с этим разделом элементы: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
 <li><a href="/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document">Разделы и структура документа HTML5.</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: роль region</a></li>
</ul>