mozilla

Secciones y líneas generales de un documento HTML5

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 (<div>) con elementos de cabecera HTML (<h1>, <h2>, <h3>, <h4>, <h5>, o <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 <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 <div> para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de perfilado ("¿Es ese <div> parte del perfilado de la página, definiendo una sección o subsección?" o "¿es un <div> sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada 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 <div> del algoritmo de perfilado introduciendo un nuevo elemento, <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 (<article>, <section>, <nav> y <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 <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 <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: <nav> para colecciones de enlaces, como una tabla de contenidos, <footer> y <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 <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 <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 <body><section><article><aside>, <footer><header>, y <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 <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>

El bloque de HTML define dos secciones de alto nivel:

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

La primera sección tiene tres subsecciones:

<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 <h1>, <h2>, <h3>, <h4>, <h5>, <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 <h1> tiene el rango más alto, y <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, <h1> para la primera sección de más alto nivel, <h2> para la subsección y <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 (<h1> a <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 <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 (<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

Una raíz de seccionado es un elemento HTML que puede tener su propio perfil, pero las secciones y cabeceras dentro de ellos no contribuyen al perfil de su ancestro. Además de <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: <blockquote>, <details>, <fieldset>, <figure> y <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 <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 (<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 (<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 (<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 (<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 <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 <article>. Consecuentemente, el elemento <address> está ahora enlazado al ancestro más cercano, <body> o <article>.

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

Usando elementos HTML5 en navegadores no HTML5

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

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

Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento <time> no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.

Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:

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

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

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

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

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

Conclusión

Las nuevas secciones y cabeceras introducidas en HTML5 traen la posibilidad de describir la estructura y el perfil de un documento web en una manera estándar. Ellas traen una gran ventaja para personas teniendo navegadores HTML5 y necesitando la estructura para ayudarles a entender la página, por ejemplo personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son simples de usar y, con muy poco esfuerzo pueden hacerse trabajar también en navegadores no HTML5. Entonces ellos deben ser usados sin restricciones.

Etiquetas y colaboradores del documento

Contributors to this page: jesanchez, learnercys, pierre_alfonso, javigaar
Última actualización por: javigaar,