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
|
---
title: section
slug: Web/HTML/Element/section
translation_of: Web/HTML/Element/section
original_slug: Web/HTML/Elemento/section
---
<h2 id="Resumen">Resumen</h2>
<p>El elemento de <em>HTML section</em> (<code><section></code>) representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema. Piensa en el esquema como en el índice de contenido de un libro; un tema común y subsecciones relacionadas. Es, por lo tanto, una etiquéta semántica. Su funcionalidad principal es estructurar semánticamente un documento a la hora de ser representado por parte de un agente usuario. Por ejemplo, un agente de usuario que represente el documento en voz, podría exponer al usuario el índice de contenido por niveles para navegar rápidamente por las distintas partes.</p>
<div class="note">
<p><em>Notas de uso:</em></p>
<ul>
<li>Si la intención es indicar el contenido de un elemento {{HTMLElement("section")}} , es mejor usar el elemento {{HTMLElement("article")}} en su lugar, a modo de artículos independientes como en las revistas. {{HTMLElement("section")}} está diseñado para contenidos dependientes, pero diferenciados.</li>
<li>No se debe usar el elemento {{HTMLElement("section")}} como un mero contenedor genérico; para esto ya existe {{HTMLElement("div")}}, especialmente si el objetivo solamente es aplicar un estilo (CSS) a la sección. Como regla general, el título de una sección debería aparecer en el esquema del documento.</li>
</ul>
</div>
<h2 id="Contexto_de_uso">Contexto de uso</h2>
<table class="standard-table">
<tbody>
<tr>
<td>Contenido permitido</td>
<td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">Contenido dinámico</a></td>
</tr>
<tr>
<td>Omisión de etiquetas</td>
<td>Ninguna, tanto la etiqueta de apertura como la de cierre son obligatorias.</td>
</tr>
<tr>
<td>Elementos padres permitidos</td>
<td>
<p>Todo elemento que acepte <a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content Categories#Flow content">contenido dinámico</a>. Nótese que un elemento {{ HTMLElement("section") }} no debe ser descendiente de un elemento {{ HTMLElement("address") }}.</p>
</td>
</tr>
<tr>
<td>Documento normativo</td>
<td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element">HTML5, sección 4.4.2</a></td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento carece de otros atributos fuera de los <a href="/en/HTML/Global_attributes" rel="internal">atributos globales</a>, que son comunes a todos los elementos.</p>
<h2 id="Interfaz_del_DOM">Interfaz del DOM</h2>
<p>Este elemento implementa la interfaz <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p>
<h2 id="Ejemplo_1">Ejemplo 1</h2>
<h3 id="Antes_de_HTML5">Antes de HTML5</h3>
<pre class="line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">>Encabezado</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span></code>Un montón de contenido impresionante.<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre>
<h3 id="con_HTML5">con HTML5</h3>
<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>section</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span></code><code>Encabezado</code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span></code>Un montón de contenido impresionante.<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>section</span><span class="punctuation token">></span></span></code></pre>
<h2 id="Ejemplo_2">Ejemplo 2</h2>
<h3 id="Antes_de_HTML5_2">Antes de HTML5</h3>
<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>Encabezado</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"roble</span>.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"un roble</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre>
<h3 id="con_HTML5_2">con HTML5</h3>
<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>section</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Encabezado<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"roble</span>.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"un roble</span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>section</span><span class="punctuation token">></span></span></code></pre>
<h2 id="Compatibilidad">Compatibilidad</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>Soporte 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 Móvil (Gecko)</th>
<th>IE Móvil</th>
<th>Opera Móvil</th>
<th>Safari Móvil</th>
</tr>
<tr>
<td>Soporte 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="Véase_también">Véase también</h2>
<ul>
<li>Otros elementos relacionados: {{ 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">Secciones y esquemas de un documento en HTML5</a>.</li>
</ul>
|
