Secciones y líneas generales de un documento HTML5

  • Enlace amigable (slug) de la revisión: Sections_and_Outlines_of_an_HTML5_document
  • Título de la revisión: Secciones y líneas generales de un documento HTML5
  • Id de la revisión: 304239
  • Creada:
  • Creador: jesanchez
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

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 perfil de cualquier documento.

Estructura de un documento HTML 4

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> 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 perfil.

Entonces el siguiente marcado:

<div class="section" id="forest-elephants" >
<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<div class="subsection" id="forest-habitat" >
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
</div>
</div>

genera el siguiente perfil:

1. Forest elephants
   1.1 Habitat

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,

<h1>Forest elephants</h1>
<p>In this section, we discuss the lesser known forest elephants.
...this section continues...
<h2>Habitat</h2>
<p>Forest elephants do not live in trees but among them.
...this subsection continues...
<h2>Diet</h2>
<h1>Mongolian gerbils</h1>

genera el siguiente perfil:

1. Forest elephants
   1.1 Habitat
   1.2 Diet
2. Mongolian gerbils

Problemas resueltos por HTML5

La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado es muy tosco y genera numerosos problemas:

  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de perfilado makes the automation of the outlining algorithm impossible ("¿Es ese {{HTMLElement("div")}} parte del perfilado 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 se ámbito está definido. La generación automatizada de perfilado es importante, especialmente para tecnologías de apoyo, 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 perfilado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.
  2. 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 perfilado 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 de su sección ancestra más cercana, sin importar qué secciones son creadas por cabeceras internas.
  3. Debido a que cada elemento de cabecera HTML es parte del perfil, no es posible describir un subtítulo o título secundario (por ejemplo, <h1>Justine</h1><h2>Les Malheurs de la Vertu</h2> crea el perfil 1. Justine 1.1 Les Malheurs de la Vertu). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> crea el perfil 1. Justine).
  4. En HTML4, cada sección es parte del perfil 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 perfil principal.
  5. Otra vez, en HTML4, debido a que cada sección es parte del perfil del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero si 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.

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

El algoritmo de perfilado de HTML5

Definiendo secciones en HTML5

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")}}.

Nota: 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 Definiendo cabeceras en HTML5.

Ejemplo:

<section>
  <h1>Forest elephants</h1> 
  <section>
    <h1>Introduction</h1>
    <p>In this section, we discuss the lesser known forest elephants.
  </section>
  <section>
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them. 
  </section>
  <aside>
    <p>advertising block
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company
</footer>

This HTML snippet defines two top-level sections:

<section>
  <h1>Forest elephants</h1>    
  <section>     
    <h1>Introduction</h1>     
    <p>In this section, we discuss the lesser known forest elephants.
  </section>   
  <section>     
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them. 
  </section>
   <aside>
    <p>advertising block
  </aside>
</section>

<footer>
  <p>(c) 2010 The Example company
</footer>

The first section has three subsections:

<section>
  <h1>Forest elephants</h1>
 
  <section>     
    <h1>Introduction</h1>     
    <p>In this section, we discuss the lesser known forest elephants.
  </section>

  <section>     
    <h1>Habitat</h1>
    <p>Forest elephants do not live in trees but among them. 
  </section>

  <aside>
    <p>advertising block
  </aside>
</section>

<footer>
  <p>(c) 2010 The Example company
</footer>

Esto genera la siguiente estructura:

1. Forest elephants
   1.1 Introduction
   1.2 Habitat
   1.3 Section (aside)

Definiendo cabeceras en HTML5

Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un perfil también necesita cabeceras para ser útiles. 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.

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

<section>
  <h1>Forest elephants</h1>    
  <p>In this section, we discuss the lesser known forest elephants. 
    ...this section continues...
  <section>
    <h2>Habitat</h2>  
    <p>Forest elephants do not live in trees but among them.
        ...this subsection continues...
  </section>
</section>
<section>
  <h3>Mongolian gerbils</h3>
  <p>In this section, we discuss the famous mongolian gerbils. 
     ...this section continues...
</section>

Genera el siguiente perfil:

1. Forest elephants
   1.1 Habitat
2. Mongolian gerbils

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).

Seccionado implícito

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

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 perfil es definida por su rango relativo con la cabecera anterior ensu 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:

<section>
  <h1>Forest elephants</h1>  
  <p>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  <h3 class="implicit subsection">Habitat</h3>
  <p>Forest elephants do not live in trees but among them.
    ...this subsection continues...
</section>

Genera el siguiente perfil:

1. Forest elephants
   1.1 Habitat (implicitly defined by the h3 element)

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: 

<section>
  <h1>Forest elephants</h1>  
  <p>In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  <h1 class="implicit section">Mongolian gerbils</h1>
  <p>Mongolian gerbils are cute little mammals.
    ...this section continues...
</section>

genera el siguiente perfil: 

1. Forest elephants
2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)

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:

<body>
  <h1>Mammals</h1>
  <h2>Whales</h2>
  <p>In this section, we discuss the swimming whales.
    ...this section continues...
  <section>
    <h3>Forest elephants</h3>  
    <p>In this section, we discuss the lesser known forest elephants.
      ...this section continues...
    <h3>Mongolian gerbils</h3>
      <p>Hordes of gerbils have spread their range far beyond Mongolia.
         ...this subsection continues...
    <h2>Reptiles</h2>
      <p>Reptiles are animals with cold blood.
          ...this subsection continues...
  </section>
</body>

generando el siguiente perfil:

1. Mammals
   1.1 Whales (implicitly defined by the h2 element)
   1.2 Forest elephants (explicitly defined by the section element)
   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
   1.4 Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)

Este no es el perfil que uno podría esperar por mirar rápidamente las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible por humanos, es una buena práctica usar etiquetas explícitas para abrir y cerrar secciones, y emparejar el rango de cabecera al nivel anidado de la sección deseada. Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el perfil de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.

Una excepción a la regla de que ese rango de cabecera debe emparejar el nivel anidado de sección es para secciones que pueden ser reusadas 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.

Sobreescribiendo seccionamiento implícito

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

  • Una sección acerca de un libro, o una película, que tiene un título secundario:
    <section>
      <h1>Justine</h1>
      <h2>Les Malheurs de la vertu</h2>
    </section>

    genera el siguiente perfil:

    1. Justine
       1.1 Les Malheurs de la vertu
    
  • El encabezado secundario puede ser usado por una lista de etiquetas:
    <section>
      <h1>Section and outlines of a document</h1>
      <h2>HTML, HTML5, Sections, Outlines</h2>
    </section>

    genera el siguiente perfil:

    1. Section and outlines of a document
       1.1 HTML, HTML5, Sections, Outlines

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del perfil, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Con este elemento el ejemplo del libro secundario:

<section>
  <hgroup>
    <h1>Justine</h1>
    <h2>Les Malheurs de la vertu</h2>
  </hgroup>
  ... Some Contents ...
</section>

genera el siguiente perfil:

1. Justine

Seccionado raíces

Unaraíz de seccionado es un elemento HTML que puede tener sus propio perfil, pero las secciones y cabeceras dentro de ellos no contribuyen al perfil de su ancestro. Además de {{HTMLElement("body")}} que es la raíz de seccionado lógica de un documento, hay a veces elementos que introducen contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.

Ejemplo:

<section>
  <h1>Forest elephants</h1> 
  <section>
    <h2>Introduction</h2>
    <p>In this section, we discuss the lesser known forest elephants
  </section>
  <section>
    <h2>Habitat</h2>
    <p>Forest elephants do not live in trees but among them. Let's
       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":
    <blockquote>
       <h1>Borneo
       <p>The forest element lives in Borneo...
    </blockquote>
  </section>
</section>

Este ejemplo resulta en el siguiente perfil:

1. Forest elephants
   1.1 Introduction
   1.2 Habitat

Este perfil no contiene el perfil interno del elemento {{HTMLElement("blockquote")}} que, siendo una citación externa, es una raíz de seccionado y aisla su perfil interno.

Secciones fuera del perfil

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al perfil principal de un documento web:

  1. 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 perfil, pero no pertenece al perfil principal.
  2. 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 perfil y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.
  3. El elemento de sección de cabecera ({{HTMLElement("header")}}) define una página de cabecera, 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.
  4. 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.

Direcciones y tiempo de publicación en elementos de seccionado

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.

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")}}.

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")}}.

Usando elementos HTML5 en navegadores no HTML5

Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as display:inline by default:

section, article, aside, footer, header, nav, hgroup {
  display:block;
}

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
<![endif]-->

This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:

<noscript>
   <strong>Warning !</strong>
   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.
</noscript>

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
  <noscript>
     <strong>Warning !</strong>
     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.
  </noscript>
<![endif]-->

Conclusion

The new sections and headings elements introduced in HTML5 bring the ability to describe the structure and the outline of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

{{HTML5ArticleTOC()}}

Fuente de la revisión

<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 perfil de cualquier documento.</p>
<h2 id="Structure_of_a_Document_in_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 perfil.</p>
<p>Entonces el siguiente marcado:</p>
<div style="overflow:hidden;">
  <pre class="brush:xml">
&lt;div class="section" id="forest-elephants" &gt;
&lt;h1&gt;Forest elephants&lt;/h1&gt;
&lt;p&gt;In this section, we discuss the lesser known forest elephants.
...this section continues...
&lt;div class="subsection" id="forest-habitat" &gt;
&lt;h2&gt;Habitat&lt;/h2&gt;
&lt;p&gt;Forest elephants do not live in trees but among them.
...this subsection continues...
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
<p>genera el siguiente perfil:</p>
<pre>
1. Forest elephants
   1.1 Habitat
</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;Forest elephants&lt;/h1&gt;
&lt;p&gt;In this section, we discuss the lesser known forest elephants.
...this section continues...
&lt;h2&gt;Habitat&lt;/h2&gt;
&lt;p&gt;Forest elephants do not live in trees but among them.
...this subsection continues...
&lt;h2&gt;Diet&lt;/h2&gt;
&lt;h1&gt;Mongolian gerbils&lt;/h1&gt;
</pre>
<p>genera el siguiente perfil:</p>
<pre>
1. Forest elephants
   1.1 Habitat
&nbsp;&nbsp; 1.2 Diet
2. Mongolian gerbils
</pre>
<h2 id="Problems_Solved_by_HTML5">Problemas resueltos por HTML5</h2>
<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de perfilado 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 perfilado makes the automation of the outlining algorithm impossible ("¿Es ese {{HTMLElement("div")}} parte del perfilado 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 se ámbito está definido. La generación automatizada de perfilado 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 perfilado 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 perfilado 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 de su sección ancestra más cercana, sin importar qué secciones son creadas por cabeceras internas.</li>
  <li>Debido a que cada elemento de cabecera HTML es parte del perfil, no es posible describir un subtítulo o título secundario (por ejemplo, <code>&lt;h1&gt;Justine&lt;/h1&gt;&lt;h2&gt;Les Malheurs de la Vertu&lt;/h2&gt;</code> crea el perfil <code>1. Justine 1.1 Les Malheurs de la Vertu</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;Justine&lt;/h1&gt;&lt;h2&gt;Les Malheurs de la Vertu&lt;/h2&gt;&lt;/hgroup&gt;</code> crea el perfil <code>1. Justine</code>).</li>
  <li>En HTML4, cada sección es parte del perfil 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 perfil principal.</li>
  <li>Otra vez, en HTML4, debido a que cada sección es parte del perfil del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero si 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:&nbsp;{{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 perfiles de documento ser predecibles y usados por el navegador para mejorar la experiencia de usuario.</p>
<h2 id="The_HTML5_Outline_Algorithm">El algoritmo de perfilado de HTML5</h2>
<h3 id="Defining_Sections_in_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")}},&nbsp; {{HTMLElement("section")}},&nbsp; {{HTMLElement("article")}},&nbsp; {{HTMLElement("aside")}}, {{HTMLElement("footer")}},&nbsp; {{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;
&nbsp; &lt;h1&gt;Forest elephants&lt;/h1&gt; 
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Introduction&lt;/h1&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants.
&nbsp; &lt;/section&gt;
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Habitat&lt;/h1&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;Forest&nbsp;elephants&nbsp;do&nbsp;not&nbsp;live&nbsp;in&nbsp;trees&nbsp;but&nbsp;among&nbsp;them. 
&nbsp; &lt;/section&gt;
&nbsp; &lt;aside&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;advertising block
&nbsp; &lt;/aside&gt;
&lt;/section&gt;
&lt;footer&gt;
&nbsp; &lt;p&gt;(c) 2010 The Example company
&lt;/footer&gt;</pre>
<p>This HTML&nbsp;snippet defines two top-level sections:</p>
<pre>
<span style="color:red;">&lt;section&gt;
&nbsp; &lt;h1&gt;Forest elephants&lt;/h1&gt;  &nbsp; 
&nbsp; &lt;section&gt; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Introduction&lt;/h1&gt; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants.
&nbsp; &lt;/section&gt; &nbsp; 
&nbsp; &lt;section&gt; &nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Habitat&lt;/h1&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;Forest&nbsp;elephants&nbsp;do&nbsp;not&nbsp;live&nbsp;in&nbsp;trees&nbsp;but&nbsp;among&nbsp;them. 
&nbsp; &lt;/section&gt;
 &nbsp; &lt;aside&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;advertising block
&nbsp; &lt;/aside&gt;
&lt;/section&gt;</span>

<span style="color:green;">&lt;footer&gt;
&nbsp; &lt;p&gt;(c) 2010 The Example company
&lt;/footer&gt;</span></pre>
<p>The first section has three subsections:</p>
<pre>
&lt;section&gt;
 &nbsp;&lt;h1&gt;Forest elephants&lt;/h1&gt;
 
  <span style="color:red;">&lt;section&gt; &nbsp;&nbsp;&nbsp; 
 &nbsp;  &lt;h1&gt;Introduction&lt;/h1&gt; &nbsp;&nbsp;&nbsp; 
 &nbsp;  &lt;p&gt;In this section, we discuss the lesser known forest elephants.
 &nbsp;&lt;/section&gt;</span>

  <span style="color:green;">&lt;section&gt; &nbsp;&nbsp;&nbsp; 
 &nbsp;  &lt;h1&gt;Habitat&lt;/h1&gt;
 &nbsp;  &lt;p&gt;Forest&nbsp;elephants&nbsp;do&nbsp;not&nbsp;live&nbsp;in&nbsp;trees&nbsp;but&nbsp;among&nbsp;them. 
 &nbsp;&lt;/section&gt;</span>

  <span style="color:blue;">&lt;aside&gt;
 &nbsp;  &lt;p&gt;advertising block
 &nbsp;&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. Forest elephants
&nbsp;&nbsp; 1.1 Introduction
&nbsp;&nbsp; 1.2 Habitat
&nbsp;&nbsp; 1.3 Section (aside)
</pre>
<h3 id="Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</h3>
<p>Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un perfil también necesita cabeceras para ser útiles. 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; la estructura de las secciones determinan el perfil, no el rango de cabeceras de las secciones. Por ejemplo, este código:</p>
<pre class="brush:xml">
&lt;section&gt;
&nbsp; &lt;h1&gt;Forest elephants&lt;/h1&gt;&nbsp;&nbsp;&nbsp; 
&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants. 
&nbsp;&nbsp;&nbsp;&nbsp;...this section continues...
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Habitat&lt;/h2&gt;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Forest elephants do not live in trees but among them.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...this subsection continues...
&nbsp; &lt;/section&gt;
&lt;/section&gt;
&lt;section&gt;
&nbsp; &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
&nbsp; &lt;p&gt;In this section, we discuss the famous mongolian gerbils. 
&nbsp;&nbsp;&nbsp;&nbsp; ...this section continues...
&lt;/section&gt;</pre>
<p>Genera el siguiente perfil:</p>
<pre>
1. Forest elephants
   1.1 Habitat
2. Mongolian gerbils</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="Implicit_Sectioning">Seccionado implícito</h3>
<p>Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un perfil, 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 perfil es definida por su rango relativo con la cabecera anterior ensu 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;
&nbsp; &lt;h1&gt;Forest elephants&lt;/h1&gt;&nbsp; 
&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants.
&nbsp;&nbsp;&nbsp; ...this section continues...
&nbsp; &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
&nbsp;&nbsp;&lt;p&gt;Forest elephants do not live in trees but among them.
&nbsp;&nbsp;&nbsp;&nbsp;...this subsection continues...
&lt;/section&gt;</pre>
<p>Genera el siguiente perfil:</p>
<pre>
1. Forest elephants
   1.1 Habitat&nbsp;<em>(implicitly defined by the h3 element)</em>
</pre>
<p>Si es del mismo rango que la cabecera anterior, cierra la sección previa&nbsp; (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel:&nbsp;</p>
<pre class="brush:xml">
&lt;section&gt;
&nbsp; &lt;h1&gt;Forest elephants&lt;/h1&gt;&nbsp; 
&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants.
&nbsp;&nbsp;&nbsp;&nbsp;...this section continues...
&nbsp; &lt;h1 class="implicit section"&gt;Mongolian gerbils&lt;/h1&gt;
&nbsp; &lt;p&gt;Mongolian gerbils are cute little mammals.
&nbsp; &nbsp;&nbsp;...this section continues...
&lt;/section&gt;</pre>
<p>genera el siguiente perfil:&nbsp;</p>
<pre>
1. Forest elephants
2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</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;
&nbsp; &lt;h1&gt;Mammals&lt;/h1&gt;
&nbsp; &lt;h2&gt;Whales&lt;/h2&gt;
&nbsp; &lt;p&gt;In this section, we discuss the swimming whales.
&nbsp;&nbsp;&nbsp; ...this section continues...
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h3&gt;Forest elephants&lt;/h3&gt;&nbsp; 
&nbsp;&nbsp;&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants.
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;...this section continues...
&nbsp;&nbsp;&nbsp; &lt;h3&gt;Mongolian gerbils&lt;/h3&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;Hordes of gerbils have spread their range far beyond Mongolia.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; ...this subsection continues...
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Reptiles&lt;/h2&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;Reptiles are animals with cold blood.
&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; ...this subsection continues...
&nbsp; &lt;/section&gt;
&lt;/body&gt;</pre>
<p>generando el siguiente perfil:</p>
<pre>
1. Mammals
   1.1 Whales <em>(implicitly defined by the h2 element)</em>
   1.2 Forest elephants <em>(explicitly defined by the section element)</em>
   1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em>
   1.4 Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em>
</pre>
<p>Este no es el perfil que uno podría esperar por mirar rápidamente las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible por humanos, es una buena práctica usar etiquetas explícitas para abrir y cerrar secciones, y emparejar el rango de cabecera al nivel anidado de la sección deseada. Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el perfil de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.</p>
<p>Una excepción a la regla de que ese rango de cabecera debe emparejar el nivel anidado de sección es para secciones que pueden ser reusadas 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="Overriding_Implicit_Sectioning">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 acerca de un libro, o una película, que tiene un título secundario:
    <pre class="brush:xml">
&lt;section&gt;
&nbsp;&nbsp;&lt;h1&gt;Justine&lt;/h1&gt;
&nbsp;&nbsp;&lt;h2&gt;Les Malheurs de la vertu&lt;/h2&gt;
&lt;/section&gt;</pre>
    <p>genera el siguiente perfil:</p>
    <pre>
1. Justine
   1.1 Les Malheurs de la vertu
</pre>
  </li>
  <li>El encabezado secundario puede ser usado por una lista de etiquetas:
    <pre class="brush:xml">
&lt;section&gt;
&nbsp;&nbsp;&lt;h1&gt;Section and outlines of a document&lt;/h1&gt;
&nbsp;&nbsp;&lt;h2&gt;HTML, HTML5, Sections, Outlines&lt;/h2&gt;
&lt;/section&gt;</pre>
    <p>genera el siguiente perfil:</p>
    <pre>
1. Section and outlines of a document
   1.1 HTML, HTML5, Sections, Outlines</pre>
  </li>
</ul>
<p>Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del perfil, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Con este elemento el ejemplo del libro secundario:</p>
<pre class="brush:xml">
&lt;section&gt;
&nbsp; &lt;hgroup&gt;
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Justine&lt;/h1&gt;
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Les Malheurs de la vertu&lt;/h2&gt;
&nbsp; &lt;/hgroup&gt;
  ... Some Contents ...
&lt;/section&gt;
</pre>
<p>genera el siguiente perfil:</p>
<pre>
1. Justine</pre>
<h3 id="Sectioning_roots"><a name="sectioning_root">Seccionado raíces</a></h3>
<p>Unaraíz de seccionado es un elemento HTML que puede tener sus propio perfil, pero las secciones y cabeceras dentro de ellos no contribuyen al perfil de su ancestro. Además de {{HTMLElement("body")}} que es la raíz de seccionado lógica de un documento, hay a veces elementos que introducen contenido externo a la página:&nbsp;{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.</p>
<p>Ejemplo:</p>
<pre class="brush:xml">
&lt;section&gt;
&nbsp; &lt;h1&gt;Forest elephants&lt;/h1&gt; 
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Introduction&lt;/h2&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;In this section, we discuss the lesser known forest elephants
&nbsp; &lt;/section&gt;
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Habitat&lt;/h2&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;Forest&nbsp;elephants&nbsp;do not&nbsp;live&nbsp;in&nbsp;trees&nbsp;but&nbsp;among&nbsp;them. Let's
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; look what scientists are saying in "&lt;cite&gt;The Forest Elephant in Borneo&lt;/cite&gt;":
&nbsp;&nbsp;&nbsp; &lt;blockquote&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;Borneo
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;The forest element lives in Borneo...
&nbsp;&nbsp;&nbsp; &lt;/blockquote&gt;
&nbsp; &lt;/section&gt;
&lt;/section&gt;
</pre>
<p>Este ejemplo resulta en el siguiente perfil:</p>
<pre>
1. Forest elephants
   1.1 Introduction
&nbsp;&nbsp; 1.2 Habitat</pre>
<p>Este perfil no contiene el perfil interno del elemento {{HTMLElement("blockquote")}} que, siendo una citación externa, es una raíz de seccionado y aisla su perfil interno.</p>
<h3 id="Sections_outside_the_outline">Secciones fuera del perfil</h3>
<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al perfil 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,&nbsp; como una caja de explicación o un anuncio. Tiene su propio perfil, pero no pertenece al perfil 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 perfil 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 página de cabecera, 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="Addresses_and_publication_time_in_sectioning_elements">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="Using_HTML5_Elements_in_Non-HTML5_Browsers">Usando elementos HTML5 en navegadores no HTML5</h2>
<p>Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM&nbsp;interface and they only need a specific CSS styling as unknown elements are styled as <code>display:inline</code> by default:</p>
<pre class="brush: css">
section, article, aside, footer, header, nav, hgroup {
&nbsp; display:block;
}
</pre>
<p>Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.</p>
<p>This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:</p>
<pre class="brush:xml">
&lt;!--[if&nbsp;lt IE 9]&gt;
&nbsp; &lt;script&gt;
&nbsp;&nbsp;&nbsp; document.createElement("header" );
&nbsp;&nbsp;&nbsp; document.createElement("footer" );
&nbsp;&nbsp;&nbsp; document.createElement("section"); 
&nbsp;&nbsp;&nbsp; document.createElement("aside"&nbsp; );
&nbsp;&nbsp;&nbsp; document.createElement("nav"&nbsp;&nbsp;&nbsp; );
&nbsp;&nbsp;&nbsp; document.createElement("article"); 
&nbsp;&nbsp;&nbsp; document.createElement("hgroup" );&nbsp;
&nbsp;&nbsp;&nbsp; document.createElement("time"&nbsp;&nbsp; );
&nbsp; &lt;/script&gt;
&lt;![endif]--&gt;</pre>
<p>This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:</p>
<pre class="brush:xml">
&lt;noscript&gt;
&nbsp;&nbsp; &lt;strong&gt;Warning !&lt;/strong&gt;
&nbsp;&nbsp; Because your browser does not support HTML5, some elements are simulated using JScript.
&nbsp;&nbsp; Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
&lt;/noscript&gt;</pre>
<p>This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:</p>
<pre class="brush:xml">
&lt;!--[if&nbsp;lt IE 9]&gt;
&nbsp; &lt;script&gt;
&nbsp;&nbsp;&nbsp; document.createElement("header" );
&nbsp;&nbsp;&nbsp; document.createElement("footer" );
&nbsp;&nbsp;&nbsp; document.createElement("section"); 
&nbsp;&nbsp;&nbsp; document.createElement("aside"&nbsp; );
&nbsp;&nbsp;&nbsp; document.createElement("nav"&nbsp;&nbsp;&nbsp; );
&nbsp;&nbsp;&nbsp; document.createElement("article"); 
&nbsp;&nbsp;&nbsp; document.createElement("hgroup" );&nbsp;
&nbsp;&nbsp;&nbsp; document.createElement("time"&nbsp;&nbsp; );
&nbsp; &lt;/script&gt;
&nbsp; &lt;noscript&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;Warning !&lt;/strong&gt;
&nbsp;&nbsp;&nbsp;&nbsp; Because your browser does not support HTML5, some elements are simulated using JScript.
&nbsp;&nbsp;&nbsp;&nbsp; Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
&nbsp; &lt;/noscript&gt;
&lt;![endif]--&gt;</pre>
<h2 id="Conclusion">Conclusion</h2>
<p>The new sections and headings elements introduced in HTML5 bring the ability to describe the structure and the outline of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.</p>
<div>
  {{HTML5ArticleTOC()}}</div>
Revertir a esta revisión