files/es/web/html/element/main/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
149
150
151
152

---
title: <main>
slug: Web/HTML/Element/main
translation_of: Web/HTML/Element/main
original_slug: Web/HTML/Elemento/main
---
<h2 id="Resumen">Resumen</h2>

<p>El <strong>elemento</strong> <strong>HTML <code>&lt;main&gt;</code> </strong>representa el contenido principal del {{HTMLElement("body")}} de un documento o aplicación. El área principal del contenido consiste en el contenido que está directamente relacionado, o se expande sobre el tema central de un documento o la funcionalidad central de una aplicación. Este contenido debe ser único al documento, excluyendo cualquier contenido que se repita a través de un conjunto de documentos como barras laterales, enlaces de navegación, información de derechos de autor, logos del sitio y formularios de búsqueda (a menos, claro, que la función principal del documento sea un formulario de búsqueda).</p>

<div class="note">
<p><strong>Nota:</strong> <strong>no debe haber</strong> más de un elemento <code>&lt;main&gt;</code> en un documento, y este <strong>no debe ser</strong> descendiente de un elemento  {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</p>
</div>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, palpable content.</li>
 <li><dfn>Contenido permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li>
 <li><dfn>Omisión de etiquetas</dfn> Ninguna; ambas etiqueta inical y de fin son obligatorias.</li>
 <li><dfn>Elementos padres permitidos</dfn> Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, pero no debe ser un descendiente de un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</li>
 <li><dfn>Interfaz DOM</dfn> {{domxref("HTMLElement")}}</li>
</ul>

<h2 id="Atributos">Atributos</h2>

<p><span style="line-height: 21px;">Este elemento solo incluye  </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globales.</a></p>

<h2 id="Ejemplo">Ejemplo</h2>

<pre class="brush: html">&lt;!-- other content --&gt;

<span class="highlight">&lt;main&gt;</span>
  &lt;h1&gt;Apples&lt;/h1&gt;
  &lt;p&gt;The apple is the pomaceous fruit of the apple tree.&lt;/p&gt;

  &lt;article&gt;
    &lt;h2&gt;Red Delicious&lt;/h2&gt;
    &lt;p&gt;These bright red apples are the most common found in many
    supermarkets.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

  &lt;article&gt;
    &lt;h2&gt;Granny Smith&lt;/h2&gt;
    &lt;p&gt;These juicy, green apples make a great filling for
    apple pies.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

<span class="highlight">&lt;/main&gt;</span>

&lt;!-- other content --&gt;</pre>

<h2 id="Specifications" name="Specifications">Sobre Accesibilidad</h2>

<p>Algunos lectores de pantalla reconocen la etiqueta <code>main</code> y proveen un atajo para que el usuario pueda saltar directamente al contenido de esta etiqueta sin tener que pasar por el resto.</p>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Eliminada la restricción acerca de usar  <code>&lt;main&gt;</code> como un descendente del elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Sin cambios desde {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definición inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2>

<p>Como una caracterisca nueva propuesta para HTML, el elemento <code>&lt;main&gt;</code> no está todavía ampliamente soportado. Es sumamente recomendable añadir el rol ARIA <code>"main"</code> a cualquier elemento <code>&lt;main&gt;</code>:</p>

<pre class="brush: html">&lt;main role="main"&gt;
  ...
&lt;/main&gt;
</pre>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>
    <p>Característica</p>
   </th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>Chrome 26</td>
   <td>{{ CompatGeckoDesktop("21.0") }}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}} but in tests builds since WebKit r140374</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte 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="Ver_también">Ver también</h2>

<ul>
 <li>Basic structural elements: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
 <li>Section-related elements: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
</ul>