path: root/files/es/sections_and_outlines_of_an_html5_document/index.html

---
title: Secciones y esquema de un documento HTML5
slug: Sections_and_Outlines_of_an_HTML5_document
translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
---
<p>La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.</p>

<div class="note">
<p>A lo largo de este documento se empleará la palabra <strong>esquema</strong> en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos <strong>algoritmo de esquematizado</strong> al proceso de construir el esquema infiriéndolo del contenido.</p>
</div>

<h2 id="Estructura_de_un_documento_HTML_4">Estructura de un documento HTML 4</h2>

<p>La estructura de un documento, por ejemplo la estructura semántica de lo que está entre<code> &lt;body&gt;</code> y <code>&lt;/body&gt;</code> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.</p>

<p>Entonces el siguiente marcado:</p>

<div style="overflow: hidden;">
<pre class="brush:xml">&lt;div class="seccion" id="zorro" &gt;
&lt;h1&gt;El zorro&lt;/h1&gt;
&lt;p&gt;En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
... bla, bla, bla ...
&lt;div class="subseccion" id="zorro-habitat" &gt;
&lt;h2&gt;Hábitat&lt;/h2&gt;
&lt;p&gt;El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
...bla, bla, bla...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>genera el siguiente esquema:</p>

<pre>1. El zorro
   1.1 Hábitat
</pre>

<p>Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,</p>

<pre class="brush:xml">&lt;h1&gt;El zorro&lt;/h1&gt;
&lt;p&gt;En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
... bla, bla, bla ...
&lt;h2&gt;Hábitat&lt;/h2&gt;
&lt;p&gt;El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
...bla, bla, bla...
&lt;h2&gt;Costrumbres&lt;/h2&gt;
&lt;h1&gt;El oso&lt;/h1&gt;
</pre>

<p>genera el siguiente esquema:</p>

<pre>1. El zorro
   1.1 Hábitat
   1.2 Costumbres
2. El oso
</pre>

<h2 id="Problemas_resueltos_por_HTML5">Problemas resueltos por HTML5</h2>

<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:</p>

<ol>
 <li>El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos <strong>class</strong> hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para <a class="external" href="https://es.wikipedia.org/wiki/Tecnolog%C3%ADas_de_apoyo" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologías de apoyo</a>, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.</li>
 <li>Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.</li>
 <li>Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <code>&lt;h1&gt;Mozart&lt;/h1&gt;&lt;h2&gt;El genio salzburgués&lt;/h2&gt;</code> crea el esquema <code>1. Mozart 1.1 El genio salzburgués</code>). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <code>&lt;hgroup&gt;&lt;h1&gt;Mozart&lt;/h1&gt;&lt;h2&gt;El genio salzburgués&lt;/h2&gt;&lt;/hgroup&gt;</code> crea el esquema <code>1. Mozart</code>).</li>
 <li>En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.</li>
 <li>Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.</li>
</ol>

<p>De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.</p>

<h2 id="El_algoritmo_de_esquematizado_de_HTML5">El algoritmo de esquematizado de HTML5</h2>

<h3 id="Definiendo_secciones_en_HTML5">Definiendo secciones en HTML5</h3>

<p>Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.</p>

<div class="note"><strong>Nota: </strong>Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</a>.</div>

<p>Ejemplo:</p>

<pre class="brush:xml">&lt;section&gt;
  &lt;h1&gt;El pato&lt;/h1&gt;
  &lt;section&gt;
    &lt;h1&gt;Introducción&lt;/h1&gt;
    &lt;p&gt;En esta sección, ampliaremos nuestro concepto del pato.
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h1&gt;Hábitat&lt;/h1&gt;
    &lt;p&gt;El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
  &lt;/section&gt;
  &lt;aside&gt;
    &lt;p&gt;otros estudiosos del pato
  &lt;/aside&gt;
&lt;/section&gt;
&lt;footer&gt;
  &lt;p&gt;(c) 2010 The Example company
&lt;/footer&gt;</pre>

<p>El bloque de HTML define dos secciones de alto nivel:</p>

<pre><span style="color: red;">&lt;section&gt;
  &lt;h1&gt;El pato&lt;/h1&gt;
  &lt;section&gt;
    &lt;h1&gt;Introducción&lt;/h1&gt;
    &lt;p&gt;En esta sección, ampliaremos nuestro concepto del pato.
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h1&gt;Hábitat&lt;/h1&gt;
    &lt;p&gt;El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
  &lt;/section&gt;
   &lt;aside&gt;
    &lt;p&gt;otros estudiosos del pato
  &lt;/aside&gt;
&lt;/section&gt;</span>

<span style="color: green;">&lt;footer&gt;
  &lt;p&gt;(c) 2010 The Example company
&lt;/footer&gt;</span></pre>

<p>La primera sección tiene tres subsecciones:</p>

<pre>&lt;section&gt;
  &lt;h1&gt;El pato&lt;/h1&gt;

  <span style="color: red;">&lt;section&gt;
    &lt;h1&gt;Introducción&lt;/h1&gt;
    &lt;p&gt;En esta sección, ampliaremos nuestro concepto del pato.
  &lt;/section&gt;</span>

  <span style="color: green;">&lt;section&gt;
    &lt;h1&gt;Hábitat&lt;/h1&gt;
    &lt;p&gt;El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
  &lt;/section&gt;</span>

  <span style="color: blue;">&lt;aside&gt;
    &lt;p&gt;Otros estudiosos del lobo
  &lt;/aside&gt;</span>
&lt;/section&gt;

&lt;footer&gt;
  &lt;p&gt;(c) 2010 The Example company
&lt;/footer&gt;</pre>

<p>Esto genera la siguiente estructura:</p>

<pre>1. El pato
   1.1 Introducción
   1.2 Hábitat
   1.3 Section (aside)
</pre>

<h3 id="Definiendo_cabeceras_en_HTML5">Definiendo cabeceras en HTML5</h3>

<p>Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.</p>

<p>Los elementos de cabecera tienen un <em>rango</em> dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango <em>más alto</em>, y {{HTMLElement("h6")}} tiene el rango <em>más bajo</em>. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:</p>

<pre class="brush:xml">&lt;section&gt;
  &lt;h1&gt;La mosca&lt;/h1&gt;
  &lt;p&gt;El esta sección hablaremos de la mosca, una criatura adorable.
    ... bla, bla, bla ...
  &lt;section&gt;
    &lt;h2&gt;Hábitat&lt;/h2&gt;
    &lt;p&gt;Únicamente se han divisado colonias de moscas en los montes de....
        ...bla, bla, bla ...
  &lt;/section&gt;
&lt;/section&gt;
&lt;section&gt;
  &lt;h3&gt;El mosquito&lt;/h3&gt;
  &lt;p&gt;A continuación, otra rareza a punto de extinguirse, el mosquito.
     ...bla, bla, bla...
&lt;/section&gt;</pre>

<p>Genera el siguiente esquema:</p>

<pre>1. La mosca
   1.1 Hábitat
2. El mosquito</pre>

<p>Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).</p>

<h3 id="Seccionado_implícito">Seccionado implícito</h3>

<p>Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado <em>seccionado implícito</em>.</p>

<p>Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:</p>

<pre class="brush:xml">&lt;section&gt;
  &lt;h1&gt;El águila&lt;/h1&gt;
  &lt;p&gt; ....

  &lt;h3 class="subsec-implicita"&gt;Hábitat&lt;/h3&gt;
  &lt;p&gt; ...
&lt;/section&gt;</pre>

<p>Genera el siguiente esquema:</p>

<pre><strong>1. El águila</strong>
   <strong>1.1 Hábitat</strong> <em>(impícitamente definido mediante &lt;h3&gt;)</em>
</pre>

<p>Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: </p>

<pre class="brush:xml">&lt;section&gt;
  &lt;h1&gt;El águila&lt;/h1&gt;
  &lt;p&gt;...
  &lt;h1 class="secc-implicita"&gt;El buitre&lt;/h1&gt;
  &lt;p&gt;...
&lt;/section&gt;</pre>

<p>genera el siguiente esquema: </p>

<pre><strong>1. El águila</strong>
<strong>2. El buitre</strong> <em>(implícitamente definido por &lt;h1&gt;, quien al mismo tiempo cierra el &lt;h1&gt; anterior)</em>
</pre>

<p>Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:</p>

<pre class="brush:xml">&lt;body&gt;
  &lt;h1&gt;Colores&lt;/h1&gt;
  &lt;h2&gt;Rojo&lt;/h2&gt;
  &lt;p&gt; ...
  &lt;section&gt;
    &lt;h3&gt;Amarillo&lt;/h3&gt;
    &lt;p&gt; ...
    &lt;h3&gt;Verde&lt;/h3&gt;
      &lt;p&gt; ...
    &lt;h2&gt;Sabores&lt;/h2&gt;
      &lt;p&gt;...
  &lt;/section&gt;
&lt;/body&gt;</pre>

<p>generando el siguiente esquema:</p>

<pre><strong>1. Colores
   1.1 Rojo</strong> <em>(implícitamente con <code>&lt;h2&gt;</code> )</em>
   <strong>1.2 Amarillo</strong><em>(explícitamente con <code>&lt;section&gt; </code>)</em>
   <strong>1.3 Verde</strong> <em>(impícitamente con <code>&lt;h3&gt;</code>, cerrando el <code>&lt;h3&gt;</code> previo)</em>
<strong>2. Sabores</strong> <em>(implícitamente con &lt;h2&gt;, cerrando el &lt;section&gt; previo)</em>
</pre>

<p>Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica</p>

<ul>
 <li>Usar <strong>etiquetas explícitas</strong> para abrir y cerrar secciones.</li>
 <li> Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. </li>
</ul>

<p>Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.</p>

<p>Una <strong>excepción</strong> a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser <strong>reutilizadas</strong> en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.</p>

<h3 id="Sobreescribiendo_seccionamiento_implícito">Sobreescribiendo seccionamiento implícito</h3>

<p>A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:</p>

<ul>
 <li>Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural:
  <pre class="brush:xml">&lt;section&gt;
  &lt;h1&gt;La flauta mágica&lt;/h1&gt;
  &lt;h2&gt;Ópera en dos actos del genio salzburgués&lt;/h2&gt;
&lt;/section&gt;</pre>

  <p>genera el siguiente esquema, que claramene <strong>no</strong> es el que se desea:</p>

  <pre>1. La flauta mágica
   1.1 Ópera en dos actos del genio salzburgués
</pre>
 </li>
 <li>El encabezado secundario puede ser usado por una lista de etiquetas:
  <pre class="brush:xml">&lt;section&gt;
  &lt;h1&gt;Secciones y esquema del documento&lt;/h1&gt;
  &lt;h2&gt;HTML, HTML5, secciones, esquema&lt;/h2&gt;
&lt;/section&gt;</pre>

  <p>genera el siguiente esquema, que <strong>tampoco es</strong> el que se desea:</p>

  <pre>1. Secciones y esquema del documento
   1.1 HTML, HTML5, secciones, esquema</pre>
 </li>
</ul>

<p>Debido al seccionado implícito, <strong>esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras</strong> ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:</p>

<pre class="brush:xml">&lt;section&gt;
  &lt;hgroup&gt;
    &lt;h1&gt;La flauta mágica&lt;/h1&gt;
    &lt;h2&gt;Ópera en dos actos del genio salzburgués&lt;/h2&gt;
  &lt;/hgroup&gt;
  ... algún contenido ...
&lt;/section&gt;
</pre>

<p>genera el siguiente esquema, que es el que se desea:</p>

<pre>1. La flauta mágica</pre>

<h3 id="Secciones_desacopladas"><a name="sectioning_root">Secciones desacopladas</a></h3>

<p>Piensa por un momento en una sección <strong><em>A</em></strong> que contiene una subsección <strong><em>B</em></strong>. A veces es conveniente que <em><strong>B</strong></em> mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de<em><strong> A</strong></em>, dando lugar a esquemas más claros.</p>

<p>Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.<br>
  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.</p>

<p>Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.</p>

<p>Ejemplo:</p>

<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt;Bach&lt;/h1&gt;
  &lt;section&gt;
    &lt;h2&gt;Introducción&lt;/h2&gt;
    &lt;p&gt;...
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h2&gt;La Pasión según S. Mateo&lt;/h2&gt;
    &lt;p&gt; Bla, bla, bla ...
    &lt;blockquote&gt;
       &lt;h1&gt;Friedich Nietzsche
       &lt;p&gt;“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
    &lt;/blockquote&gt;
  &lt;/section&gt;
&lt;/section&gt;</pre>

<p>Este ejemplo resulta en el siguiente esquema:</p>

<pre>1. Bach
   1.1 Introducción
   1.2 La Pasión según s. Mateo</pre>

<p>Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.</p>

<h3 id="Secciones_fuera_del_esquema">Secciones fuera del esquema</h3>

<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:</p>

<ol>
 <li>El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.</li>
 <li>El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.</li>
 <li>El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.</li>
 <li>El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.</li>
</ol>

<h2 id="Direcciones_y_tiempo_de_publicación_en_elementos_de_seccionado">Direcciones y tiempo de publicación en elementos de seccionado</h2>

<p>El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.</p>

<p>Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p>

<p>De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p>

<h2 id="Usando_elementos_HTML5_en_navegadores_no_HTML5">Usando elementos HTML5 en navegadores no HTML5</h2>

<p>Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como <code>display:inline</code> por defecto:</p>

<pre class="brush: css">section, article, aside, footer, header, nav, hgroup {
  display:block;
}
</pre>

<p>Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.<br>
 <br>
 Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:</p>

<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
  &lt;script&gt;
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section");
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article");
    document.createElement("hgroup" );
    document.createElement("time"   );
  &lt;/script&gt;
&lt;![endif]--&gt;</pre>

<p>Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.</p>

<pre class="brush:xml">&lt;noscript&gt;
   &lt;strong&gt;Warning !&lt;/strong&gt;
   Because your browser does not support HTML5, some elements are simulated using JScript.
   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
&lt;/noscript&gt;</pre>

<p>Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:</p>

<pre class="brush:xml">&lt;!--[if lt IE 9]&gt;
  &lt;script&gt;
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section");
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article");
    document.createElement("hgroup" );
    document.createElement("time"   );
  &lt;/script&gt;
  &lt;noscript&gt;
     &lt;strong&gt;Warning !&lt;/strong&gt;
     Because your browser does not support HTML5, some elements are simulated using JScript.
     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
  &lt;/noscript&gt;
&lt;![endif]--&gt;</pre>

<h2 id="Conclusión">Conclusión</h2>

<p>Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.</p>

<div>{{HTML5ArticleTOC()}}</div>