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
|
---
title: <main>
slug: Web/HTML/Element/main
tags:
- Elemento
- HTML
- Referencia
- Web
translation_of: Web/HTML/Element/main
---
<h2 id="Resumo">Resumo</h2>
<p>O elemento <strong><code><main></code></strong><code> define o conteúdo principal dentro do </code>{{HTMLElement("body")}} em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca<code> </code><span id="result_box" lang="pt"><span class="hps">(a não ser</span><span>, é claro,</span> caso <span class="hps">a função principal do</span> <span class="hps">documento</span> <span class="hps">seja</span><span class="hps"> fazer algum tipo de busca</span><span class="hps">).</span></span></p>
<div class="note">
<p><strong>Nota:</strong> <code><main></code> <strong>não pode </strong>ser filho dos elementos {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}.</p>
<p><span id="result_box" lang="pt"><span class="hps">Autores</span> <strong><span class="hps">não devem</span></strong> <span class="hps">incluir mais de um</span> <span class="hps">elemento main no mesmo </span><span class="hps">documento<strong>.</strong></span></span></p>
</div>
<ul class="htmlelt">
<li><dfn><a class="new" href="https://developer.mozilla.org/pt-BR/docs/HTML/Content_categories" title="HTML/Content_categories">Categorias de conteúdo</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>, conteúdo palpável.</li>
<li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Conteúdo de fluxo</a>.</li>
<li><dfn>Omissão de tag</dfn> Nenhuma; <span id="result_box" lang="pt"><span class="hps">ambas</span> <span class="hps">as tags de início</span> <span class="hps">e fim</span> <span class="hps">são obrigatórios</span></span>.</li>
<li><dfn>Elementos pais permitidos</dfn> Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">conteúdo de fluxo</a>, mas não pode ser filho dos elementos {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}.</li>
<li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Atributos">Atributos</h2>
<p><span style="line-height: 21px;">Este elemento admite apenas os </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p>
<h2 id="Exemplo">Exemplo</h2>
<pre class="brush: html"><!-- outro conteúdo -->
<main>
<h1>Maçãs</h1>
<p>A maçã é a fruta pomácea da macieira.</p>
<article>
<h2>Vermelho delicioso</h2>
<p>Estas maçãs vermelhas brilhantes são as mais comumente encontradas em muitos supermercados.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Granny Smith</h2>
<p>Essas suculentas maçãs verdes, são um ótimo recheio para torta de maçã.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- outro conteúdo --></pre>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td><span id="result_box" lang="pt"><span class="hps">Removida</span> <span class="hps">a restrição</span> <span class="hps">sobre não usar</span> <span class="hps atn"><</span><span>main</span><span>></span> <span class="hps">como um filho</span> <span class="hps">dos elementos</span></span> {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}.</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Não há mudança na {{SpecName('HTML5 W3C')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadores compatíveis</h2>
<p><span id="result_box" lang="pt"><span class="hps atn">O </span><span>elemento</span> <span class="hps atn"><</span><span>main</span><span>> </span></span><span lang="pt"><span class="hps">é amplamente suportado</span> <span class="hps">(exceto pelo</span> <span class="hps">Internet</span> <span class="hps">Explorer).</span> <span class="hps">Sugere-se</span> <span class="hps">que, até</span> que o elemento <span class="hps atn"><main</span><span>> seja</span><span class="hps"> suportado pelo</span> <span class="hps">Internet</span> <span class="hps">Explorer, adicione a ele o atributo role com o valor "main"</span></span>:</p>
<pre class="brush: html"><main role="main">
...
</main>
</pre>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>Chrome 26</td>
<td>{{ CompatGeckoDesktop("21.0") }}</td>
<td>{{CompatNo()}}</td>
<td>Opera 16</td>
<td>Safari 7</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatNo()}}</td>
<td>{{ CompatGeckoMobile("21.0") }}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><span class="short_text" id="result_box" lang="pt"><span class="hps">Elementos estruturais básicos</span></span>: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
<li>Elementos relacionados a seções: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
</ul>
<p> </p>
|
