Secciones y esquema de un documento HTML 5

  • Enlace amigable (slug) de la revisión: Secciones_y_esquema_de_un_documento_HTML_5
  • Título de la revisión: Secciones y esquema de un documento HTML 5
  • Id de la revisión: 14126
  • Creada:
  • Creador: hugohabel
  • ¿Es la revisión actual? No
  • Comentario 2 words added, 3 words removed

Contenido de la revisión

La especificación de HTML 5 trae varias novedades para los desarrolladores web que les permite describir la estructura de un documento web con una semántica estándar. Este documento describe estos elementos y cómo utilizarlos para definir el perfil deseado para cualquier documento.

Estructura de un documento en HTML 4

La estructura de un documento, es decir, la estructura semántica de lo que está entre <body> y </body>, es fundamental para la presentación de la página al usuario. HTML4 utiliza la noción de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento división de HTML ({{ HTMLElement("div") }}) con elementos de encabezado HTML ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }}) dentro de ella, que definen los títulos. Las relaciones de estos elementos HTML de división y los elementos HTML de encabezado conducen a la estructura del documento y su contorno.

Así que el siguiente marcado:

<div class="section" id="forest-elephants">
    <h1> Bosque elefantes </h1>
    <p> En esta sección, se discuten los elefantes menos conocidos de los bosques. ... Esta sección continúa ...</p>
    <div class="subsection" id="forest-habitat">
        <h2> Hábitat </h2>
        <p> Los elefantes del bosque no viven en los árboles, sino entre ellos. ... Este apartado sigue ...</p>
    </div>
</div>

lleva al siguiente esquema:

1. Bosque elefantes
   1.1 Hábitat

Los elementos {{ HTMLElement ("div") }} no son obligatorios para definir una nueva sección. La mera presencia de un elemento de encabezado HTML es suficiente para implicar una nueva sección. Por lo tanto:

<h1> Bosque elefantes </h1>
<p> En esta sección, se discuten los elefantes menos conocidos de los bosques.
... Esta sección continúa ...</p>
<h2> Hábitat </h2>
<p> Los elefantes del bosque no viven en los árboles, sino entre ellos.
... Este apartado sigue ... </p>
<h2> Dieta </h2>
<h1> Jerbos de Mongolia </h1>

lleva al siguiente esquema:

1. Bosque elefantes
   1.1 Hábitat
   1.2 Dieta
2. Jerbos de Mongolia

Problemas resueltos por HTML5

La definición de la estructura de un documento en HTML 4 y su algoritmo esquematizador implícito es poco flexible y da lugar a numerosos problemas:

  1. El uso de {{ HTMLElement("div") }} para definir secciones semánticas, sin definir valores específicos para los atributos class hace que sea imposible la automatización del algoritmo de esquema ("¿Es este {{ HTMLElement("div") }} parte del esquema de la página, la definición de una sección o una subsección? " O "es sólo un {{ HTMLElement("div") }} de presentación, utilizado para el estilo? "). En otros términos, la especificación HTML 4 es muy imprecisa en lo que es una sección, cuál es su ámbito de aplicación y cómo se define. La generación automática de esquemas es importante, especialmente para la tecnología de asistencia , que puedan adaptar la forma en que presentan la información a los usuarios de acuerdo a la estructura del documento. HTML5 elimina la necesidad de elementos {{ HTMLElement("div") }} del algoritmo esquematizador, introduciendo un nuevo elemento: {{ HTMLElement("section") }}, el elemento sección del HTML.
  2. La fusión de varios documentos es difícil: la inclusión de un sub-documento en un documento principal implica cambiar el nivel de los encabezados HTML para que pueda mantenerse el esquema. Esto se soluciona en HTML5 gracias a los elementos de sección introducidos recientemente: ({{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }} y {{ HTMLElement("aside") }}) que son siempre subsecciones del elemento de sección anterior más cercano, independientemente de que secciones sean creadas mediante encabezados.
  3. Debido a que cada elemento de encabezado HTML forma parte del esquema, 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 esquema 1.Justine 1.1 Les Malheurs de la Vertu ). HTML 5 introduce el elemento {{ HTMLElement("hgroup") }} que oculta todos los elementos de encabezado, excepto el principal (por ejemplo, <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> crea el esquema 1.Justine ).
  4. En HTML 4, cada sección es parte del esquema del documento. Pero los documentos a menudo no son lineales. Un documento puede tener secciones especiales que contienen información que no es parte del contenido principal, a pesar de que está relacionado con él, como un bloque de publicidad o una aclaración. HTML 5 introduce el elemento {{ HTMLElement("aside") }} que permite que dichos tramos no sean parte del esquema principal.
  5. Una vez más, en HTML4, ya que cada sección es parte del esquema del documento, no hay manera de tener secciones que contengan información que no este relacionado con el documento, si no con el sito web, como los logotipos, los menús, tabla de contenidos o información de derechos de autor y avisos legales . A tal efecto, HTML 5 introduce tres elementos de secciones específicas: {{ HTMLElement("nav") }} para los grupos de enlaces, tales como una tabla de contenido, {{ HTMLElement("footer") }} y {{ HTMLElement("header") }} para información relacionada con el sitio.

En términos más generales HTML5 aporta precisión a las características de sección y encabezado, lo que permite que el esquema del documento sea predecible y utilizado por el navegador para mejorar la experiencia del usuario.

El algoritmo de esquema de HTML5

Definición de las secciones de HTML 5

Todo el contenido que se encuentre dentro del elemento {{ HTMLElement("body") }} forma parte de una sección. Las secciones en HTML5 se pueden anidar. Al lado de la sección principal, definida por el elemento {{ HTMLElement("body") }}, los límites de las secciones se definen de forma explícita o implícita. Las secciones explícitamente definidas son las contenidas dentro de las etiquetas {{ HTMLElement("body") }}, {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("header") }} y {{ HTMLElement("nav") }}. 

Ejemplo:

<section>
  <h1> Bosque elefantes </h1> 
  <section>
    <h2> Introducción </h2>
    <p> En esta sección, se discuten los elefantes forestales menos conocidos</p> 
  </section>
  <section>
    <h2> Hábitat </h2>
    <p> Los elefantes del bosque no vive en los árboles, sino entre ellos.</p>
  </section>
  <aside>
    <p> bloque de publicidad </p>
  </aside>
</section>
<footer>
  <p> (c) 2010 La compañía Ejemplo </p>
</footer> 

Este fragmento de código HTML define dos secciones de nivel superior:

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

La primera sección consta de tres apartados:

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

Esto lleva a la siguiente estructura:

1. Sección
   Sección 1.1
   Sección 1.2
   Sección 1.3 (aside)
2. Sección (footer)
 

Definición de los encabezados en HTML5

Mientras que los elementos de sección de HTML son los que definen la estructura del documento, el esquema necesita los encabezados para ser útil. La regla básica es trivial: el primer elemento HTML de título  (uno de {{ HTMLElement("h1") }}, {{ HTMLElement ("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}) define el título de la sección actual.

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

<section>
  <h1> Bosque elefantes </h1>    
  <p> En esta sección, se discuten los elefantes menos conocidos de los bosques. 
      ... Esta sección continúa ... </p>
  <section>
    <h2> Hábitat </h2>
    <p> Los elefantes del bosque no viven en los árboles, sino entre ellos.
         ... Este apartado sigue ... </p>
   </section>
 </section>
 <section>
   <h3> Jerbos de Mongolia </h3>
   <p> En esta sección, se discuten los jerbos de Mongolia famosos. 
      ... Esta sección continúa ... </p>
 </section> 

lleva al siguiente esquema:

1. Bosque elefantes
   1.1 Hábitat
2. Jerbos de Mongolia

Tenga en cuenta que el rango del elemento del encabezado (en el ejemplo {{ HTMLElement("h1") }} para la primera sección de nivel superior, {{ HTMLElement("h2") }} de la subsección y {{ HTMLElement("h3") }} para la segunda sección de nivel superior) no es importante. Aunque es menos claro y no se recomienda, cualquier rango puede ser utilizado como el título de una sección definida explícitamente.

Seccionamiento implícito

Debido a que los elementos de sección de HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web actual dominada por HTML 4, hay una manera de definir secciones sin ellos. Esto se conoce como seccionamiento implícito.

Los elementos de encabezado de  ({{ HTMLElement("h1") }} a {{ HTMLElement ("h6 ") }}) definen una nueva sección implícita, cuando no son el primer elemento de encabezado del elemento padre. La forma en que esta sección implícita se coloca en el esquema se define por el rango relativo al anterior encabezado de su sección principal. Si se trata de un rango inferior que el encabezado anterior, se abre una sub-sección implícita. El código siguiente:

<section>
  <h1>Elefantes del Bosque</h1>  
  <p>En esta sección, se discuten los elefantes menos conocidos de los bosques.
      ... Esta sección continúa ... </p>
  <h3 class="implicit subsection"> Hábitat </h3>
  <p> Los elefantes del bosque no viven en los árboles, sino entre ellos.
        ... Este apartado sigue ... </p>
</section> 

que conduce al siguiente esquema:

1. Elefantes del Bosque
   1.1 Hábitat (implícitamente definido por el elemento h3)

Si es del mismo rango que el encabezado anterior, se cierra la sección anterior (¡que puede haber sido explícita!) y se abre una nueva sección implícita en el mismo nivel: 

<section>
  <h1>Elefantes del Bosque </h1>  
  <p> En esta sección, se discuten los elefantes menos conocidos de los bosques.
      ... Esta sección continúa ... </p>
  <h1 class="implicit section"> Jerbos de Mongolia </h1>
  <p> Jerbos de Mongolia son lindos pequeños mamíferos.
      ... Esta sección continúa ... </p>
 </section> 

que conduce al siguiente esquema: 

1. Elefantes del Bosque
2. Jerbos de Mongolia (implícitamente definido por el elemento h1, que cerró la sección anterior, al mismo tiempo)

Si se trata de un rango más alto que el encabezado anterior, se cierra la sección y se abre una nueva implícita en el nivel superior:

<body>
  <h1> Mamíferos </h1>
  <h2> Ballenas </h2>
  <p> En esta sección, se discuten las ballenas nadar.
     ... Esta sección continúa ... </p>
  <section>
    <h3> Bosque elefantes </h3>  
    <p> En esta sección, se discuten los elefantes menos conocidos de los bosques.
      ... Esta sección continúa ... </p>
    <h3> jerbos de Mongolia </h3>
      <p> Los elefantes del bosque no vive en los árboles, sino entre ellos.
         ... Este apartado sigue ... </p>
    <h2> Reptiles </h2>
      <p> Reptiles son animales de sangre fría.
          ... Este apartado sigue ... </p>
  </section>
</body>  

que conduce al siguiente esquema:

1. Mamíferos
1.1 Ballenas
1.1.1 Bosque elefantes
1.1.2 jerbos de Mongolia 
1.2 Los reptiles

Anulación del seccionamiento implícito

 A veces, una sección tiene que tener varios encabezados. Algunos casos habituales son:

  • Una sección 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>
    

    lleva al siguiente esquema:

    1. Justine
       1.1 Les Malheurs de la vertu
    
  • El encabezado secundario puede ser usado para una lista de etiquetas:
    <section>
      <h1> Sección y contornos de un documento </h1>
      <h2>HTML , HTML5, Secciones, Elementos </h2>
    </section>

    lleva al siguiente esquema:

    1. Sección y contornos de un documento
       1.1 HTML, HTML 5, Secciones, Elementos

Debido a las secciones implícitas, esto no es posible sin la ayuda del elemento de agrupado de encabezados HTML ({{ HTMLElement("hgroup") }} introducido en HTML5). Oculta todas las líneas desde el exterior, excepto la primera, lo que permite sobreescribir el seccionado implícito. Volviendo al ejemplo del libro:

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

lleva al siguiente esquema:

1. Justine

Seccionador raíz

El seccionador raíz es un elemento HTML que puede tener su propio esquema, pero las secciones y encabezados dentro de él no contribuyen al esquema del elemento padre. Además de {{ HTMLElement("body") }} que es el elemento raíz lógico de un documento, estos son los elementos que introducen contenido externo agregado a la página: {{ HTMLElement("blockquote") }},  {{ HTMLElement("details") }}, {{ HTMLElement("fieldset") }},  {{ HTMLElement("figure") }} y {{ HTMLElement("td") }}.

Ejemplo:

<section>
  <h1> Bosque elefantes </h1> 
  <section>
    <h2> Introducción </h2>
    <p> En esta sección, se discuten los elefantes forestales menos conocidos
  </section>
  <section>
    <h2> Hábitat </h2>
     <p> Los elefantes del bosque no vive en los árboles, sino entre ellos.¡Vamos!
       mira lo que los científicos están diciendo:
    <blockquote cite="The Bosque elefante en Borneo">
       <h1> Borneo
       <p> Las vidas elemento forestales en Borneo ...
    </blockquote>
  </section>
</section>

Este ejemplo da como resultado el siguiente esquema:

1. Bosque elefantes
   1.1 Introducción
   1.2 Hábitat

Este esquema no contiene el esquema interno del elemento {{ HTMLElement("blockquote") }}, que, siendo una cita externa, es un elemento raíz de sección y aísla su esquema interior.

Secciones fuera del esquema

 HTML 5 introduce cuatro nuevos elementos que permiten definir las secciones que no pertenecen al esquema principal de un documento web:

  1. El elemento de sección Aside ({{ HTMLElement("aside") }}) define una sección que, aunque relacionada con el elemento principal, no pertenece al contenido principal, como un cuadro de explicación o un anuncio. Tiene su propio esquema, pero no pertenece a la principal.
  2. El elemento de sección de navegación ({{ HTMLElement("nav") }}) define una sección que contiene enlaces de navegación. Puede haber varios de ellos en un documento, por ejemplo, una con enlaces internos, como una tabla de contenido y otra con enlaces de navegación a más páginas del sitio. Estos enlaces no forman parte del flujo principal ni del esquema y generalmente no son mostrados inicialmente por el lector de pantalla y tecnologías de asistencia similares.
  3. El elemento de sección de encabezado ({{ HTMLElement("header") }}) define un encabezado de la página, que por lo general contiene el logotipo y el nombre del sitio y, posiblemente, un menú horizontal. A pesar de su nombre, no se coloca necesariamente al principio de la página.
  4. El elemento de sección de pie de página ({{ HTMLElement ("footer") }}), por lo general contiene los derechos de autor e información legal y en ocasiones algunos enlaces. A pesar de su nombre, no necesariamente debe ir colocado en la parte inferior de la página.

Direcciones y hora de publicación de elementos de corte

El autor de un documento a menudo quiere publicar alguna información de contacto, como su nombre y su dirección. HTML4 ha permitido esto a través del elemento {{ HTMLElement("address") }}, que se ha extendido en HTML5.

Un documento puede tener diferentes secciones con diferentes autores. Una sección de otro autor que el de la página principal se define utilizando el elemento {{ HTMLElement("article") }}. En consecuencia, el elemento {{ HTMLElement("address") }} está vinculado a su elemento {{ HTMLElement("body") }} o {{ HTMLElement("article") }} padre más cercano.

Del mismo modo, el nuevo elemento de HTML5 {{ HTMLElement("time") }}, con su conjunto de atributos booleanos {{ htmlattrxref ("pubdate", "time") }}, representa la fecha de publicación asociada a todo el documento, o respectivamente al artículo, según su el elemento padre más cercano {{ HTMLElement("body") }} o {{ HTMLElement("article") }}.

Uso de elementos de HTML5 en navegadores no compatibles con HTML5

Los elementos de sección y encabezados deben funcionar en la mayoría de los navegadores previos a HTML5. Aunque no son compatibles, no necesitan una interfaz DOM especial y sólo se necesita un estilo CSS específico porque a los elementos desconocidos se les otorga un valor display: inline de forma predeterminada:

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

Por supuesto, el desarrollador web puede desear el estilo de manera diferente, pero tenga en cuenta que en un navegador no compatible con HTML5, el estilo predeterminado es diferente de lo que se espera de estos elementos. También tenga en cuenta que el elemento {{ HTMLElement("time") }} no se ha incluido, porque el estilo por defecto en un navegador no compatible con HTML5 es el mismo que el de uno compatible con HTML5.

Sin embargo este método tiene sus limitaciones, ya que algunos navegadores no permiten añadir estilo a elementos no compatibles. Tal es el caso de Internet Explorer (versión 8 y anteriores), que necesitan una secuencia de comandos específicos para permitir que esto:

<!--[ If IE]>
  <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]--> 

Esta secuencia de comandos significa que, en el caso de Internet Explorer (8 y versiones anteriores), JavaScript debe estar habilitado para mostrar correctamente elementos de sección y encabezados. Si no, no se mostrarán, lo que puede ser problemático, ya que muy probablemente estos elementos estén definiendo de la estructura de la página. Es por eso que debe añadirse explícitamente un elemento {{ HTMLElement("noscript") }} en este caso:

<noscript>
   ¡Advertencia <strong>!</strong>
   Debido a que su navegador no soporta HTML5, algunos elementos son simulados utilizando JavaScript.
   Desafortunadamente su navegador tiene desactivado las secuencias de comandos. Por favor, activa JavaScript para poder ver esta página.
</ Noscript>

Esto nos lleva al siguiente código para permitir el uso de los elementos de sección y encabezado en los navegadores previos a HTML5, incluso para Internet Explorer (8 años y versiones anteriores), con una advertencia para el caso en que se haya configurado el navegador para no permitir secuencias de comandos:

<!--[ If IE]>
  <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]-->  

Conclusión

Los nuevos elementos de sección y encabezados introducidos en HTML5 traen la capacidad de describir la estructura y el esquema de un documento web de una manera estándar. Permiten una gran ventaja para las personas que tienen navegadores compatibles con HTML5 y que necesitan la estructura para facilitar la comprensión de la página, por ejemplo las personas que necesitan la ayuda de una tecnología de asistencia. Estos nuevos elementos semánticos son simples de usar y, con muy pocas ayudas, pueden llegar a funcionar también en los navegadores no compatibles con HTML5. Por lo tanto, pueden ser utilizados sin restricciones.

{{ HTML5ArticleTOC () }}

 

{{ languages ( { "en": "en/Sections_and_Outlines_of_an_HTML5_document" } ) }}

Fuente de la revisión

<p>La especificación de HTML 5 trae varias novedades para los desarrolladores web que les permite describir la estructura de un documento web con una semántica estándar. Este documento describe estos elementos y cómo utilizarlos para definir el perfil deseado para cualquier documento.</p>
<h2>Estructura de un documento en HTML 4</h2>
<p>La estructura de un documento, es decir, la estructura semántica de lo que está entre <span style="font-family:Courier New">&lt;body&gt;</span> y <span style="font-family:Courier New">&lt;/body&gt;,</span> es fundamental para la presentación de la página al usuario. HTML4 utiliza la noción de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento división de HTML ({{ HTMLElement("div") }}) con elementos de encabezado HTML ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }}) dentro de ella, que definen los títulos. Las relaciones de estos elementos HTML de división y los elementos HTML de encabezado conducen a la estructura del documento y su contorno.</p>
<p>Así que el siguiente marcado:</p>
<pre class="brush: html">&lt;div class="section" id="forest-elephants"&gt;
    &lt;h1&gt; Bosque elefantes &lt;/h1&gt;
    &lt;p&gt; En esta sección, se discuten los elefantes menos conocidos de los bosques.<em> ... Esta sección continúa ...</em>&lt;/p&gt;
    &lt;div class="subsection" id="forest-habitat"&gt;
        &lt;h2&gt; Hábitat &lt;/h2&gt;
        &lt;p&gt; Los elefantes del bosque no viven en los árboles, sino entre ellos.<em> ... Este apartado sigue ...</em>&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>lleva al siguiente esquema:</p>
<pre>1. Bosque elefantes
   1.1 Hábitat
</pre>
<p>Los elementos {{ HTMLElement ("div") }} no son obligatorios para definir una nueva sección. La mera presencia de un elemento de encabezado HTML es suficiente para implicar una nueva sección. Por lo tanto:</p>
<pre class="brush: html">&lt;h1&gt; Bosque elefantes &lt;/h1&gt;
&lt;p&gt; En esta sección, se discuten los elefantes menos conocidos de los bosques.
<em>... Esta sección continúa ...</em>&lt;/p&gt;
&lt;h2&gt; Hábitat &lt;/h2&gt;
&lt;p&gt; Los elefantes del bosque no viven en los árboles, sino entre ellos.
<em>... Este apartado sigue ...</em> &lt;/p&gt;
&lt;h2&gt; Dieta &lt;/h2&gt;
&lt;h1&gt; Jerbos de Mongolia &lt;/h1&gt;
</pre>
<p>lleva al siguiente esquema:</p>
<pre>1. Bosque elefantes
   1.1 Hábitat
   1.2 Dieta
2. Jerbos de Mongolia
</pre>
<h2>Problemas resueltos por HTML5</h2>
<p>La definición de la estructura de un documento en HTML 4 y su algoritmo esquematizador implícito es poco flexible y da lugar a 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 que sea imposible la automatización del algoritmo de esquema ("¿Es este {{ HTMLElement("div") }} parte del esquema de la página, la definición de una sección o una subsección? " O "es sólo un {{ HTMLElement("div") }} de presentación, utilizado para el estilo? "). En otros términos, la especificación HTML 4 es muy imprecisa en lo que es una sección, cuál es su ámbito de aplicación y cómo se define. La generación automática de esquemas es importante, especialmente para <a class=" external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">la tecnología de asistencia</a> , que puedan adaptar la forma en que presentan la información a los usuarios de acuerdo a la estructura del documento. HTML5 elimina la necesidad de elementos {{ HTMLElement("div") }} del algoritmo esquematizador, introduciendo un nuevo elemento: {{ HTMLElement("section") }}, el elemento sección del HTML.</li> <li>La fusión de varios documentos es difícil: la inclusión de un sub-documento en un documento principal implica cambiar el nivel de los encabezados HTML para que pueda mantenerse el esquema. Esto se soluciona en HTML5 gracias a los elementos de sección introducidos recientemente: ({{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }} y {{ HTMLElement("aside") }}) que son siempre subsecciones del elemento de sección anterior más cercano, independientemente de que secciones sean creadas mediante encabezados.</li> <li>Debido a que cada elemento de encabezado HTML forma parte del esquema, 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 esquema <code>1.</code><code>Justine 1.1 Les Malheurs de la Vertu</code> ). HTML 5 introduce el elemento {{ HTMLElement("hgroup") }} que oculta todos los elementos de encabezado, excepto el principal (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 esquema <code>1.</code><code>Justine</code> ).</li> <li>En HTML 4, cada sección es parte del esquema del documento. Pero los documentos a menudo no son lineales. Un documento puede tener secciones especiales que contienen información que no es parte del contenido principal, a pesar de que está relacionado con él, como un bloque de publicidad o una aclaración. HTML 5 introduce el elemento {{ HTMLElement("aside") }} que permite que dichos tramos no sean parte del esquema principal.</li> <li>Una vez más, en HTML4, ya que cada sección es parte del esquema del documento, no hay manera de tener secciones que contengan información que no este relacionado con el documento, si no con el sito web, como los logotipos, los menús, tabla de contenidos o información de derechos de autor y avisos legales . A tal efecto, HTML 5 introduce tres elementos de secciones específicas: {{ HTMLElement("nav") }} para los grupos de enlaces, tales como una tabla de contenido, {{ HTMLElement("footer") }} y {{ HTMLElement("header") }} para información relacionada con el sitio.</li>
</ol>
<p>En términos más generales HTML5 aporta precisión a las características de sección y encabezado, lo que permite que el esquema del documento sea predecible y utilizado por el navegador para mejorar la experiencia del usuario.</p>
<h2>El algoritmo de esquema de HTML5</h2>
<h3>Definición de las secciones de HTML 5</h3>
<p>Todo el contenido que se encuentre dentro del elemento {{ HTMLElement("body") }} forma parte de una sección. Las secciones en HTML5 se pueden anidar. Al lado de la sección principal, definida por el elemento {{ HTMLElement("body") }}, los límites de las secciones se definen de forma explícita o implícita. Las secciones explícitamente definidas son las contenidas dentro de las etiquetas {{ HTMLElement("body") }}, {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("header") }} y {{ HTMLElement("nav") }}. </p>
<p>Ejemplo:</p>
<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt; Bosque elefantes &lt;/h1&gt; 
  &lt;section&gt;
    &lt;h2&gt; Introducción &lt;/h2&gt;
    &lt;p&gt; En esta sección, se discuten los elefantes forestales menos conocidos&lt;/p&gt; 
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h2&gt; <span><span>Hábitat</span> <span class="tag">&lt;/</span><span class="tag"><span class="tag-name">h2&gt;</span></span></span>
<span><span class="tag">    </span></span><span><span class="tag-name"><span class="tag">&lt;p&gt;</span></span> Los elefantes del bosque no vive en los árboles, sino entre ellos.</span>&lt;/p&gt;
<span><span>  &lt;/section&gt;</span></span>
<span><span>  &lt;aside&gt;</span></span>
<span><span>    &lt;p&gt; bloque de publicidad &lt;/p&gt;</span></span>
<span><span>  &lt;/aside&gt;</span></span>
<span><span>&lt;/section&gt;</span></span>
<span><span>&lt;footer&gt;</span></span>
<span><span>  &lt;p&gt; (c) 2010 La compañía Ejemplo</span></span> &lt;/p&gt;
<span><span>&lt;/footer&gt;</span></span> 
</pre>
<p>Este fragmento de código HTML define dos secciones de nivel superior:</p>
<pre><span style="color: red;"> &lt;section&gt;   
  &lt;h1&gt;Forest elephants&lt;/h1&gt;    
  &lt;section&gt;     
    &lt;h2&gt;Introduction&lt;/h2&gt;     
    &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
  &lt;/section&gt;   
  &lt;section&gt;     
    &lt;h2&gt;<span><span>Habitat</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;
    </span></span><span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>Forest elephants do not live in trees but among them.&lt;/p&gt;
  &lt;/section&gt;
   &lt;aside&gt;
    &lt;p&gt;advertising block&lt;/p&gt;
  &lt;/aside&gt;
&lt;/section&gt;
</span><span style="color: green;">&lt;footer&gt;
  &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
&lt;/footer&gt;</span></span></span>
</pre>
<p>La primera sección consta de tres apartados:</p>
<pre><span style="color: grey;">&lt;section&gt;
   &lt;h1&gt;Forest elephants&lt;/h1&gt;
 </span><span style="color: red;">  &lt;section&gt;     
     &lt;h2&gt;Introduction&lt;/h2&gt;     
     &lt;p&gt;In this section, we discuss the lesser known forest elephants&lt;/p&gt;
   &lt;/section&gt;   
 </span><span style="color: green;">  &lt;section&gt;     
     &lt;h2&gt;<span><span>Habitat</span><span class="tag">&lt;/</span><span class="tag-name">h2</span><span class="tag">&gt;
     </span></span><span><span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>Forest elephants do not live in trees but among them. &lt;/p&gt;
   &lt;/section&gt;
  </span><span style="color: blue;"> &lt;aside&gt;
     &lt;p&gt;advertising block&lt;/p&gt;
   &lt;/aside&gt;
 </span><span style="color: grey;">&lt;/section&gt;
 &lt;footer&gt;
   &lt;p&gt;(c) 2010 The Example company&lt;/p&gt;
 &lt;/footer&gt;</span></span></span>
</pre>
<p>Esto lleva a la siguiente estructura:</p>
<pre>1. Sección
   Sección 1.1
   Sección 1.2
   Sección 1.3 (aside)
2. Sección (footer<span id="Problems_Solved_by_HTML5">)
 </span></pre>
<h3>Definición de los encabezados en HTML5</h3>
<p>Mientras que los elementos de sección de HTML son los que definen la estructura del documento, el esquema necesita los encabezados para ser útil. La regla básica es trivial: el primer elemento HTML de título  (uno de {{ HTMLElement("h1") }}, {{ HTMLElement ("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}) define el título de la sección actual.</p>
<p>Los elementos de encabezado tienen un <em>rango</em> dado por el número en el 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 son relativos dentro de una sección, la estructura de las secciones determina el esquema, no el rango del encabezado de las secciones. Por ejemplo, este código:</p>
<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt; Bosque elefantes &lt;/h1&gt;    
  &lt;p&gt; En esta sección, se discuten los elefantes menos conocidos de los bosques. 
<span style="font-style:italic">     </span> <em>... Esta sección continúa ...</em> &lt;/p&gt;
  &lt;section&gt;
    &lt;h2&gt; Hábitat &lt;/h2&gt;
    &lt;p&gt; Los elefantes del bosque no viven en los árboles, sino entre ellos.
<span style="font-style:italic">        </span> <em>... Este apartado sigue ...</em> &lt;/p&gt;
   &lt;/section&gt;
 &lt;/section&gt;
 &lt;section&gt;
   &lt;h3&gt; Jerbos de Mongolia &lt;/h3&gt;
   &lt;p&gt; En esta sección, se discuten los jerbos de Mongolia famosos. 
<span style="font-style:italic">     </span> <em>... Esta sección continúa ...</em> &lt;/p&gt;
 &lt;/section&gt; 
</pre>
<p>lleva al siguiente esquema:</p>
<pre>1. Bosque elefantes
   1.1 Hábitat
2. Jerbos de Mongolia
</pre>
<p>Tenga en cuenta que el rango del elemento del encabezado (en el ejemplo {{ HTMLElement("h1") }} para la primera sección de nivel superior, {{ HTMLElement("h2") }} de la subsección y {{ HTMLElement("h3") }} para la segunda sección de nivel superior) no es importante. Aunque es menos claro y no se recomienda, cualquier rango puede ser utilizado como el título de una sección definida explícitamente.</p><h3>Seccionamiento implícito</h3>
<p>Debido a que los elementos de sección de HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web actual dominada por HTML 4, hay una manera de definir secciones sin ellos. Esto se conoce como <em>seccionamiento implícito.</em></p>
<p>Los elementos de encabezado de  ({{ HTMLElement("h1") }} a {{ HTMLElement ("h6 ") }}) definen una nueva sección implícita, cuando no son el primer elemento de encabezado del elemento padre. La forma en que esta sección implícita se coloca en el esquema se define por el rango relativo al anterior encabezado de su sección principal. Si se trata de un rango inferior que el encabezado anterior, se abre una sub-sección implícita. El código siguiente:</p>
<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt;Elefantes del Bosque&lt;/h1&gt;  
  &lt;p&gt;En esta sección, se discuten los elefantes menos conocidos de los bosques.
<span style="font-style:italic">     </span> <em>... Esta sección continúa ...</em> &lt;/p&gt;
  &lt;h3 class="implicit subsection"&gt; Hábitat &lt;/h3&gt;
  &lt;p&gt; Los elefantes del bosque no viven en los árboles, sino entre ellos.
<span style="font-style:italic">       </span> <em>... Este apartado sigue ...</em> &lt;/p&gt;
&lt;/section&gt; 
</pre>
<p>que conduce al siguiente esquema:</p>
<pre>1. Elefantes del Bosque
   1.1 Hábitat <em>(implícitamente definido por el elemento h3)</em>
</pre>
<p>Si es del mismo rango que el encabezado anterior, se cierra la sección anterior (¡que puede haber sido explícita!) y se abre una nueva sección implícita en el mismo nivel: </p>
<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt;Elefantes del Bosque &lt;/h1&gt;  
  &lt;p&gt; En esta sección, se discuten los elefantes menos conocidos de los bosques.
<span style="font-style:italic">     </span> <em>... Esta sección continúa ...</em> &lt;/p&gt;
  &lt;h1 class="implicit section"&gt; Jerbos de Mongolia &lt;/h1&gt;
  &lt;p&gt; Jerbos de Mongolia son lindos pequeños mamíferos.
<span style="font-style:italic">     </span> <em>... Esta sección continúa ...</em> &lt;/p&gt;
 &lt;/section&gt; 
</pre>
<p>que conduce al siguiente esquema: </p>
<pre>1. Elefantes del Bosque
2. Jerbos de Mongolia <em>(implícitamente definido por el elemento h1, que cerró la sección anterior, al mismo tiempo)</em>
</pre>
<p>Si se trata de un rango más alto que el encabezado anterior, se cierra la sección y se abre una nueva implícita en el nivel superior:</p>
<pre class="brush: html">&lt;body&gt;
  &lt;h1&gt; Mamíferos &lt;/h1&gt;
  &lt;h2&gt; Ballenas &lt;/h2&gt;
  &lt;p&gt; En esta sección, se discuten las ballenas nadar.
     <em>... Esta sección continúa ...</em> &lt;/p&gt;
  &lt;section&gt;
    &lt;h3&gt; Bosque elefantes &lt;/h3&gt;  
    &lt;p&gt; En esta sección, se discuten los elefantes menos conocidos de los bosques.
      <em>... Esta sección continúa ...</em> &lt;/p&gt;
    &lt;h3&gt; jerbos de Mongolia &lt;/h3&gt;
      &lt;p&gt; Los elefantes del bosque no vive en los árboles, sino entre ellos.
         <em>... Este apartado sigue ...</em> &lt;/p&gt;
    &lt;h2&gt; Reptiles &lt;/h2&gt;
      &lt;p&gt; Reptiles son animales de sangre fría.
          <em>... Este apartado sigue ...</em> &lt;/p&gt;
  &lt;/section&gt;
&lt;/body&gt;  
</pre>
<p>que conduce al siguiente esquema:</p>
<pre>1. Mamíferos
1.1 Ballenas
1.1.1 Bosque elefantes
1.1.2 jerbos de Mongolia 
1.2 Los reptiles
</pre>
<h3>Anulación del seccionamiento implícito</h3>
<p> A veces, una sección tiene que tener varios encabezados. Algunos casos habituales son:</p>
<ul> <li>Una sección de un libro o una película, que tiene un título secundario: <pre class="brush: html">&lt;section&gt;
  &lt;h1&gt; Justine &lt;/h1&gt;
  &lt;h2&gt; Les Malheurs de la vertu &lt;/h2&gt;
&lt;/section&gt;
</pre> <p>lleva al siguiente esquema:</p> <pre>1. Justine
   1.1 Les Malheurs de la vertu
</pre> </li> <li>El encabezado secundario puede ser usado para una lista de etiquetas: <pre class="brush: html">&lt;section&gt;
  &lt;h1&gt; Sección y contornos de un documento &lt;/h1&gt;
  &lt;h2&gt;HTML , HTML5, Secciones, Elementos &lt;/h2&gt;
&lt;/section&gt;</pre> <p>lleva al siguiente esquema:</p> <pre>1. Sección y contornos de un documento
   1.1 HTML, HTML 5, Secciones, Elementos</pre> </li>
</ul>
<p>Debido a las secciones implícitas, esto no es posible sin la ayuda del elemento de agrupado de encabezados HTML ({{ HTMLElement("hgroup") }} introducido en HTML5). Oculta todas las líneas desde el exterior, excepto la primera, lo que permite sobreescribir el seccionado implícito. Volviendo al ejemplo del libro:</p>
<pre class="brush: html">&lt;section&gt;
  &lt;hgroup&gt;
    &lt;h1&gt; Justine &lt;/h1&gt;
    &lt;h2&gt; Les Malheurs de la vertu &lt;/h2&gt;
  &lt;/hgroup&gt;
&lt;/section&gt;
</pre>
<p>lleva al siguiente esquema:</p>
<pre>1. Justine
</pre>
<h3><a name="sectioning_root">Seccionador raíz</a></h3>
<p>El seccionador raíz es un elemento HTML que puede tener su propio esquema, pero las secciones y encabezados dentro de él no contribuyen al esquema del elemento padre. Además de {{ HTMLElement("body") }} que es el elemento raíz lógico de un documento, estos son los elementos que introducen contenido externo agregado a la página: {{ HTMLElement("blockquote") }},  {{ HTMLElement("details") }}, {{ HTMLElement("fieldset") }},  {{ HTMLElement("figure") }} y {{ HTMLElement("td") }}.</p>
<p>Ejemplo:</p>
<pre class="brush: html">&lt;section&gt;
  &lt;h1&gt; Bosque elefantes &lt;/h1&gt; 
  &lt;section&gt;
    &lt;h2&gt; Introducción &lt;/h2&gt;
    &lt;p&gt; En esta sección, se discuten los elefantes forestales menos conocidos
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h2&gt; <span><span>Hábitat</span> <span class="tag">&lt;/</span><span class="tag"><span class="tag-name">h2&gt;</span></span></span>
<span><span class="tag">    </span></span> <span><span class="tag">&lt;p&gt;</span> Los elefantes del bosque no vive en los árboles, sino entre ellos.</span><span><span>¡Vamos!</span></span>
<span><span>       mira lo que los científicos están diciendo:</span></span>
<span><span>    &lt;blockquote cite="The Bosque elefante en Borneo"&gt;</span></span>
<span><span>       &lt;h1&gt; Borneo</span></span>
<span><span>       &lt;p&gt; Las vidas elemento forestales en Borneo ...</span></span>
<span><span>    &lt;/blockquote&gt;</span></span>
<span><span>  &lt;/section&gt;</span></span>
<span><span>&lt;/section&gt;</span></span></pre>
<p>Este ejemplo da como resultado el siguiente esquema:</p>
<pre>1. Bosque elefantes
   1.1 Introducción
   1.2 Hábitat
</pre>
<p>Este esquema no contiene el esquema interno del elemento {{ HTMLElement("blockquote") }}, que, siendo una cita externa, es un elemento raíz de sección y aísla su esquema interior.</p>
<h3>Secciones fuera del esquema</h3>
<p> HTML 5 introduce cuatro nuevos elementos que permiten definir las secciones que no pertenecen al esquema principal de un documento web:</p>
<ol> <li>El elemento de sección Aside ({{ HTMLElement("aside") }}) define una sección que, aunque relacionada con el elemento principal, no pertenece al contenido principal, como un cuadro de explicación o un anuncio. Tiene su propio esquema, pero no pertenece a la principal.</li> <li>El elemento de sección de navegación ({{ HTMLElement("nav") }}) define una sección que contiene enlaces de navegación. Puede haber varios de ellos en un documento, por ejemplo, una con enlaces internos, como una tabla de contenido y otra con enlaces de navegación a más páginas del sitio. Estos enlaces no forman parte del flujo principal ni del esquema y generalmente no son mostrados inicialmente por el lector de pantalla y tecnologías de asistencia similares.</li> <li>El elemento de sección de encabezado ({{ HTMLElement("header") }}) define un encabezado de la página, que por lo general contiene el logotipo y el nombre del sitio y, posiblemente, un menú horizontal. A pesar de su nombre, no se coloca necesariamente al principio de la página.</li> <li>El elemento de sección de pie de página ({{ HTMLElement ("footer") }}), por lo general contiene los derechos de autor e información legal y en ocasiones algunos enlaces. A pesar de su nombre, no necesariamente debe ir colocado en la parte inferior de la página.</li>
</ol>
<h2>Direcciones y hora de publicación de elementos de corte</h2>
<p>El autor de un documento a menudo quiere publicar alguna información de contacto, como su nombre y su dirección. HTML4 ha permitido esto a través del elemento {{ HTMLElement("address") }}, que se ha extendido en HTML5.</p>
<p>Un documento puede tener diferentes secciones con diferentes autores. Una sección de otro autor que el de la página principal se define utilizando el elemento {{ HTMLElement("article") }}. En consecuencia, el elemento {{ HTMLElement("address") }} está vinculado a su elemento {{ HTMLElement("body") }} o {{ HTMLElement("article") }} padre más cercano.</p>
<p>Del mismo modo, el nuevo elemento de HTML5 {{ HTMLElement("time") }}, con su conjunto de atributos booleanos {{ htmlattrxref ("pubdate", "time") }}, representa la fecha de publicación asociada a todo el documento, o respectivamente al artículo, según su el elemento padre más cercano {{ HTMLElement("body") }} o {{ HTMLElement("article") }}.</p>
<h2>Uso de elementos de HTML5 en navegadores no compatibles con HTML5</h2>
<p>Los elementos de sección y encabezados deben funcionar en la mayoría de los navegadores previos a HTML5. Aunque no son compatibles, no necesitan una interfaz DOM especial y sólo se necesita un estilo CSS específico porque a los elementos desconocidos se les otorga un valor <span style="font-family:Courier New">display: inline</span> de forma predeterminada:</p>
<pre class="brush: html">section, article, aside, footer, header, nav, hgroup {
  display: block;
}
</pre>
<p>Por supuesto, el desarrollador web puede desear el estilo de manera diferente, pero tenga en cuenta que en un navegador no compatible con HTML5, el estilo predeterminado es diferente de lo que se espera de estos elementos. También tenga en cuenta que el elemento {{ HTMLElement("time") }} no se ha incluido, porque el estilo por defecto en un navegador no compatible con HTML5 es el mismo que el de uno compatible con HTML5.</p>
<p>Sin embargo este método tiene sus limitaciones, ya que algunos navegadores no permiten añadir estilo a elementos no compatibles. Tal es el caso de Internet Explorer (versión 8 y anteriores), que necesitan una secuencia de comandos específicos para permitir que esto:</p>
<pre class="brush: html">&lt;!--[ If IE]&gt;
  &lt;script&gt;
    <code class="js">document.createElement(<span class="js__string">"header"</span> );</code>
<code class="js">    document.createElement(<span class="js__string">"footer" </span>);</code>
<code class="js">    document.createElement(<span class="js__string">"section"</span>); </code>
<code class="js">    document.createElement(<span class="js__string">"aside"</span>  );</code>
<code class="js">    document.createElement(<span class="js__string">"nav"</span>    );</code>
<code class="js">    document.createElement(<span class="js__string">"article"</span>); </code>
<code class="js">    document.createElement(<span class="js__string">"hgroup"</span> ); </code>
<code class="js">    document.createElement(<span class="js__string">"time"</span>   );</code>
<code class="js">  &lt;/script&gt;</code>
<code class="html"><span class="html__ie_style">&lt;![endif]--&gt;</span></code> </pre>
<p>Esta secuencia de comandos significa que, en el caso de Internet Explorer (8 y versiones anteriores), JavaScript debe estar habilitado para mostrar correctamente elementos de sección y encabezados. Si no, no se mostrarán, lo que puede ser problemático, ya que muy probablemente estos elementos estén definiendo de la estructura de la página. Es por eso que debe añadirse explícitamente un elemento {{ HTMLElement("noscript") }} en este caso:</p>
<pre class="brush: html">&lt;noscript&gt;
   ¡Advertencia &lt;strong&gt;!&lt;/strong&gt;
   Debido a que su navegador no soporta HTML5, algunos elementos son simulados utilizando JavaScript.
   Desafortunadamente su navegador tiene desactivado las secuencias de comandos. Por favor, activa JavaScript para poder ver esta página.
&lt;/ Noscript&gt;
</pre>
<p>Esto nos lleva al siguiente código para permitir el uso de los elementos de sección y encabezado en los navegadores previos a HTML5, incluso para Internet Explorer (8 años y versiones anteriores), con una advertencia para el caso en que se haya configurado el navegador para no permitir secuencias de comandos:</p>
<pre class="brush: html">&lt;!--[ If IE]&gt;
  &lt;script&gt;
    <code class="js">document.createElement(<span class="js__string">"header"</span> );</code>
<code class="js">    document.createElement(<span class="js__string">"footer" </span>);</code>
<code class="js">    document.createElement(<span class="js__string">"section"</span>); </code>
<code class="js">    document.createElement(<span class="js__string">"aside"</span>  );</code>
<code class="js">    document.createElement(<span class="js__string">"nav"</span>    );</code>
<code class="js">    document.createElement(<span class="js__string">"article"</span>); </code>
<code class="js">    document.createElement(<span class="js__string">"hgroup"</span> ); </code>
<code class="js">    document.createElement(<span class="js__string">"time"</span>   );</code>
<code class="js">  &lt;/script&gt;</code> <code class="html"><span class="html__ie_style">  &lt;noscript&gt;</span></code>
<code class="html"><span class="html__ie_style">     &lt;strong&gt;Warning !&lt;/strong&gt;</span></code>
<code class="html"><span class="html__ie_style">     Because your browser does not support HTML5, some elements are simulated using JScript.</span></code>
<code class="html"><span class="html__ie_style">     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.</span></code>
<code class="html"><span class="html__ie_style">  &lt;/noscript&gt;</span></code> <code class="html"><span class="html__ie_style">&lt;![endif]-<span style='font-family:"Courier New","Andale Mono",monospace'>-<span style="font-family:monospace">&gt;</span></span></span> </code> </pre>
<h2>Conclusión</h2>
<p>Los nuevos elementos de sección y encabezados introducidos en HTML5 traen la capacidad de describir la estructura y el esquema de un documento web de una manera estándar. Permiten una gran ventaja para las personas que tienen navegadores compatibles con HTML5 y que necesitan la estructura para facilitar la comprensión de la página, por ejemplo las personas que necesitan la ayuda de una tecnología de asistencia. Estos nuevos elementos semánticos son simples de usar y, con muy pocas ayudas, pueden llegar a funcionar también en los navegadores no compatibles con HTML5. Por lo tanto, pueden ser utilizados sin restricciones.</p>
<p>{{ HTML5ArticleTOC () }}</p>
<p> </p>
<p>{{ languages ( { "en": "en/Sections_and_Outlines_of_an_HTML5_document" } ) }}</p>
Revertir a esta revisión