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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: <section>
slug: Web/HTML/Element/section
translation_of: Web/HTML/Element/section
---
<p>O <strong>elemento HTML <code><section></code></strong> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.</p>
<p>Por exemplo, um menu de navegação deve estar dentro um elemento {{htmlelement ("nav")}}, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma <section>.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo de fluxo</a> , <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">conteúdo de seção</a>, conteúdo palpável.</td>
</tr>
<tr>
<th scope="row">Conteúdo permitido</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>.</td>
</tr>
<tr>
<th scope="row">Omissão de tags</th>
<td>Sem omissão de tags</td>
</tr>
<tr>
<th scope="row">Tags-pai permitidas</th>
<td>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">conteúdo de fluxo</a>. Note que um elemento {{HTMLElement("section")}} não deve ser um descendente de um elemento {{HTMLElement("address")}}.</td>
</tr>
<tr>
<th scope="row">Regras ARIA permitidas</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">Interface DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento inclui apenas os <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>
<h2 id="Notas_de_uso">Notas de uso</h2>
<ul>
<li>Cada <code><section></code> deve ser identificado, geralmente incluindo um cabeçalho (elemento {{HTMLElement('h1')}}-{{HTMLElement('h6')}}) como um filho do elemento <code><section></code>.</li>
<li>Se faz sentido distribuir separadamente o conteúdo de um elemento {{HTMLElement("section")}}, use um elemento {{HTMLElement("article")}} em seu lugar.</li>
<li>Não use o elemento {{HTMLElement("section")}} como um container genérico; para isso que a {{HTMLElement("div")}} serve, especialmente quando a seção é apenas com propósito de estilização. Uma regra de ouro é ,"usar quando uma seção deve aparecer logicamente na estrutura de um documento".</li>
</ul>
<h2 id="Exemplo_1">Exemplo 1</h2>
<h3 id="Antes">Antes</h3>
<pre class="brush: html"><code><div>
<h1>Cabeçalho</h1>
<p>Um monte de conteúdo incrível</p>
</div></code></pre>
<h3 id="Depois">Depois</h3>
<pre class="brush: html"><code><section>
<h1>Cabeçalho</h1>
<p>Um monte de conteúdo incrível</p>
</section></code></pre>
<h2 id="Exemplo_2">Exemplo 2</h2>
<h3 id="Antes_2">Antes</h3>
<pre class="brush: html"><code><div>
<h2>Cabeçalho</h2>
<img src="passaro.jpg" alt="pássaro">
</div></code></pre>
<h3 id="Depois_2">Depois</h3>
<pre class="brush: html"><code><section>
<h2>Cabeçalho</h2>
<img src="passaro.jpg" alt="pássaro">
</section></code>
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentários</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>5</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>9.0</td>
<td>11.10</td>
<td>4.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>2.2</td>
<td>{{ CompatGeckoMobile("2.0") }}</td>
<td>9.0</td>
<td>11.0</td>
<td>5.0 (iOS 4.2)</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também"><span class="short_text" id="result_box" lang="pt"><span class="hps">Veja também</span></span></h2>
<ul>
<li><span class="short_text" id="result_box" lang="pt">Outros elemtnos relacionados</span>: {{ 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 class="last"><a class="deki-ns current" href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e estrurura do um documento HTML5</a>.</li>
</ul>
|
