Secciones y contornos de un documento HTML5

La especificación HTML5 da nuevas posibilidades a los desarroladores web, permitiendo describir la estructura de un documento de una página web usando una semántica estándar. Este documento describe estos elementos y cómo deben ser utilizados para definir el esquema deseado para cualquier documento de una página web.

 

Estructura de un documento HTML4Editar sección

La estructura de un documento ( todo lo contenido entre <body> y </body> ) es fundamental para mostrar la página web al usuario. HTML4 usa el concepto de "secciones" y "subsecciones" para describir la estructura de un documento de este tipo. Una sección es definida por un elemento divisor de HTML ( <div> ) , con elementos de encabezado HTML  ( <h1>, <h2>, <h3>, <h4>, <h5>, ó <h6> ) en su interior, definiendo su título. Las relaciónes entre estos elementos divisores y de encabezado definen la estructura de un documento HTML4.

 

El siguiente código

/content/body/div[3]/div[1]/pre[1], line 5, column 8: invalid XmlNode

se corresponde con:

1. Forest elephants
   1.1 Habitat

Los elementos <div> no necesariamente definen una nueva sección. La mera presencia de una elemento de cabecera HTML es suficiente para implicar una nueva sección. Así que :

/content/body/div[1]/pre[3], line 2, column 4: invalid XmlNode

da el siguiente esquema:

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

Problemas que HTML5 solucionaEditar sección

La definición de los esquemas que forman un documento HTML4 y el algoritmo de esquematización del mismo conlleva numerosos problemas:

1. El uso de <div> para definir secciones semánticas, sin definir valores específicos para los atributos de una clase, hace imposible la automatización del algoritmo de esquematización ( ¿ Es <div> parte de una sección de una página, definiendo parte de una sección o simplemente es utilizado por motivos de estilo de la página ? ). En otros términos, la especificación HTML4 es muy imprecisa en la definición de las secciones de un documento y en cómo el ámbito es definido. La generación automática de esquemas es importante, especialmente para la tecnología de asistencia, ámbito en el que se pretende adaptar la manera de mostrar la información dependiendo del usuario que acceda a ella. La especificación HTML5 elimina la necesidad de los elementos <div> para definir un esquema; introduciendo, por otra parte, el elemento de sección de HTML <section>

2. La combinación de varios documentos, es una tarea dificultosa. La inclusión de un subdocumento en un documento principal, conlleva el cambio del nivel del elemento de cabecera de HTML para que el esquema general no varíe. Este problema es solucionado en HTML5, con el uso de elementos nuevos para definir secciones ( <article>, <section>, <nav> y <aside>) que siempre son subsecciones de la sección anterior mas cercana, sin importar las secciones intermedias creadas mediante cabeceras internas.

3. Debido a que cada elemento de cabecera de HTML es parte del esquema general, no es posible describir un 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 ). HTML5 introduce el elemento <hgroup>, el cuál oculta todos los elementos de cabecera excepto el primero de mas alto rango (por ejemplo: <hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup> crea el esquema:  1. Justine).

4. En HTML4 cada sección es parte del esquema del documento; pero los documentos no son siempre tan lineales como para que esto sea utilizado siempre. Un documento puede tener secciones especiales que contienen información que no son parte principal del documento ( aunque pueden estar relacionadas con dicha parte principal ); como por ejemplo : Una parte para publicidad o un cuadro de explicaciónes. HTML5 introduce <aside> para permitir que ciertas secciones no sean parte principal del esquema.

5. De nuevo, debido a que en HTML4 cada sección es parte del esquema, no hay manera de tener secciones que contengan información relacionada con la página web entera. Por ejemplo: logotipos, menúes, tablas de contenidos, información sobre licencias etc. Para este propósito, HTML5 incluye tres elementos específicos: <nav> para colecciones de enlaces como una tabla de contenidos y  <footer> y <header> para información relacionada con el sitio web.

En resumen, HTML5 provee de precisión para los encabezados y para definir correctamente las secciones, permitiendo que los esquemas de los documentos sean predecibles y permitiendo también, que sean utilizados por el navegador web para mejorar la experiencia del usuario.

Algoritmo de esquematización de HTML5

Definición de las secciónes en HTML5Editar sección

Todo el contenido que está dentro del cuerpo <body> , es parte de una sección. Las secciones en HTML5 pueden ser anidadas. A parte de la sección principal, definida por la etiqueta <body>, los limites son definidas explícitamente o implícitamente. Si se hace de manera explícita, se utilizan las etiquetas <body><section><article><aside>, <footer><header> y <nav>

Ejemplo:

 /content/body/div[3]/div[1]/pre[1], line 5, column 8: invalid XmlNode

Este código HTML define dos secciones de máximo nivel:

 <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.
  </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>    
    <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.
  </section>
 
 <aside>
    <p>advertising block
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company
</footer>

 Lo que genera la siguiente estructura:

1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section (footer

Definición de cabeceras en HTML5

Mientras que la selección de elementos en HTML define la estructura del documento, un esquea también necesita encabezados para tener alguna utilidad. La regla básica es trivial: el primer elemento de encabezado define la sección actual ( los encabezados son: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ).

Los encabezados tienen un rango, que viene dado por el número en el nombre de la etiqueta. Para hacerse una idea, <h1> tiene el mayor rango y  <h6> el menor. Se pueden definir rangos relativos a una sección, utilizandolos sólo en dentro de esta ( de una manera similar a las variables locales en cualquier lenguaje de programación ). La estructura de las secciónes definen el esquema, el rango dado por las etiquetas anteriores no. Por ejemplo el código:

/content/body/div[3]/div[2]/pre[1], line 3, column 6: invalid XmlNode

da lugar al siguente esquema:

1. Forest elephants
   1.1 Habitat
2. Mongolian gerbils

Nótese que el rango dado por una de estas etiquetas ( en el ejemplo <h1> para la primera sección de mas alto rango,  <h2> para la subsección y <h3> para la segunda sección de mas alto rango) no es importante: Aunque no es una práctica recomendada por confusa, cualquier rango puede ser usado como en encabezado de una sección explícitamente definida.

Definición implícita de secciones

Debido a que no es obligatorio definir un esquema mediante elementos de sección de HTML, para mantener la compatiblidad con la mayoría de la web actual, basada en la especificación cuarta de HTML, hay una manera de definir secciones sin utilizar los elementos definidos en el párrafo anterior. Este método es denominado implicit sectioning en Inglés.

Los elementos de cabecera ( <h1> a <h6> ) definen una nueva sección implícita cuando no son el primer encabezado de sus secciónes padres explícitas. De este modo, esta sección implícita es posicionada en el esquema que es definido por su rango relativo, en relación al encabezado previo de la sección de su padre. Si es un rango menor que el del encabezado anterior, ello abre una subsección implícita. Este código:

/content/body/div[3]/div[3]/pre[1], line 3, column 6: invalid XmlNode

da lugar al esquema siguiente:

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

Si es de un rango mayor que el encabezado anterior, cierra la sección anterior y abre una nueva implícita de mayor rango que él.

/content/body/div[3]/div[3]/pre[5], line 4, column 6: invalid XmlNode

se corresponde con:

1. Mammals
1.1 Whales
1.1.1 Forest elephants
1.1.2 Mongolian gerbils 
1.2 Reptiles

Invalidar secciones implícitas

A veces, una sección necesita varios encabezados, algunos casos frecuentes son:

- Una sección sobre un libro , película, que tiene un título secundario

/content/body/div[3]/div[4]/ul/li[1]/pre[1], reference to undefined name 'Justine': line 2, column 7

da lugar a:

1. Justine
   1.1 Les Malheurs de la vertu

- Un título secundario puede ser usado para una lista de etiquetas:

/content/body/div[3]/div[4]/ul/li[2]/pre[1], line 3, column 11: invalid XmlNode

da:

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

Debido al implicit sectioning, esto no es posible sin la ayuda del grupo de elementos de cabecera HTML introducidos en HTML5 ( <hgroup> ). Esta etiqueta oculta todos los encabezamientos del exterior, excepto el primero, permitiendo la invalidación o anulación del implicit sectioning. Con este elemento , el ejemplo del libro:

/content/body/div[3]/div[4]/pre[1], reference to undefined name 'Justine': line 3, column 9

da:

1. Justine

Raíces de seccionamientoEditar sección

Una raíz de seccionamiento ( sectioning root ) es un elemento HTML que puede tener su esquema propio, pero las secciones y encabezados interiores a él, no contribuyen al encabezado de su antecesor. A pesar de que <body> es el principal sectioning root de un documento, los elementos a continuación, introducen contenido externo añadido a la página: <blockquote>, <details>, <fieldset>, <figure> y <td>. Ejemplo:

/content/body/div[3]/div[5]/pre[1], line 5, column 8: invalid XmlNode

Este ejemplo da lugar a:

1. Forest elephants
   1.1 Introduction
   1.2 Habitat

Este esquema no contiene el esqeuma interno del elemento <blockquote>, el cual, siendo una citación externa, es una raíz de seccionamiento y aisla su esquema interior.

Secciones exteriores al esquemaEditar sección

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

1. La sección de disgresión HTML ( <aside> ) define una sección que aunque está relacionada con el elemento principal, no pertenece al flujo principal del documento; como un cuadro de explicación o un espacio para publicidad. Tiene su propio esquema pero no pertenece al principal.

2. La sección navegacional HTML ( <nav> ) define una sección que contiene enlaces ed navegación. Puede haber varios en un documento, por ejemplo, uno con enlaces internos y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal ni del esquema, y pueden ser típicamente no renderizados por el lector de pantalla o por otros elementos de la tecnología de asistencia y accesibilidad.

3. La sección de cabecera HTML ( <header> ) define una cabecera, típicamente conteniendo el logotipo de la página web, así como el nombre del sitio y un menú horizontal. A pesar del nombre header, no se localiza necesariamente al principio del documento.

4. La sección de pie de página HTML ( <footer> ) define un espacio al final de la página que contiene información sobre licencias y notas legales, a veces enlaces. A pesar del nombre footer, no se localiza necesariamente al final del documento.

 

Datos de contacto y momento de publicación de un sitio webEditar sección

El autor de un documento, frecuentemente desea publicar información de contacto, como la dirección postal o el nombre del responsable del sitio. HTML4 permite esto mediante el elemento <address>, cuyas funcionalidades han sido ampliadas en la revisión quinta de HTML.

Un documento, puede estar compuesto por diferentes secciones de autores distintos. Una seccion de un autor que no sea el ideólogo principal del documento, se define mediante la etiqueta <article>. En consecuencia, la etiqueta <address> esta enlazada con el <body> mas cercano o con el <article> anterior.

Del mismo modo, el elemento <time> de HTML5, tiene un atributo lógico pubdate, atributo que representa la fecha de publicación del documento por completo, referido al mas cercano <body> o al <article> ancestro.

 

Uso de elementos HTML5 en navegadores web sin soporte HTML5Editar sección

Las secciones y las cabeceras deberían funcionar en navegadores que no soporten HTML5. A pesar de que ciertos navegadores no soportan las características de HTML5, éstos no necesitan una interfaz DOM especial y únicamente es necesario un estílo específico CSS, ya que por defecto, los elementos desconocidos, son procesados como display:inline.

/content/body/div[5]/pre[1], line 1, column 8: EOF expected

Por supuesto, el desarrolador web puede diseñarlos de manera distinta, pero recordando que en un navegador que no soporte HTML5, el estilo será diferente de lo esperado para los elementos HTML5. Tambien es necesario darse cuenta que la etiqueta <time>no ha sido incluida debido a que el estilo por defecto de una navegador sin soporte para HTML5, es el mismo que para uno que si lo soporte.

Este método tiene sus limitaciones, ciertos navegadores web no permiten representar elementos no soportados; como es el caso de Internet Explorer ( versiones 8 y anteriores ) que necesitan un script para permitir esto:

/content/body/div[5]/pre[2], line 1, column 2: invalid XmlNode

Este script ( en caso de Internet Explorer 8 y anteriores ) hace que los elementos HTML5 sean mostrados correctamente, siempre que se tenga activado el procesamiento de scripts. En caso contrario, dichos elementos no serán mostrados correctamente, lo que puede provocar problemas, si HTML5 has sido usado en los elementos estructurales de la página. Este es el motivo por que el que <noscript> debe ser añadido explícitamente en este caso:

/content/body/div[5]/pre[3], line 2, column 21: invalid Primary

Esto lleva al código siguiente, a permitir el soporte de secciones y cabeceras propias de HTML5 en navegadores sin soporte para el mismo, incluso en Internet Explorer ( versiones 8 y anteriores ) con la adecuada previsión por si se da el caso de que dicho navegador esté configurado para no usar scripts:

/content/body/div[5]/pre[4], line 1, column 2: invalid XmlNode

 

ConclusiónEditar sección

Las nuevas secciones y cabeceras de HTML5, dan la posibilidad de describir la estructura de un documento de una manera estándar. Esto es una gran ventaja para aquellos que utilizen un navegador compatible con HTML5 y que necesitan una estructura que permita entender la página, así como proveyendo tecnologías de asistencia. Estos nuevos elementos semánticos son simples, tanto su uso como su comprensión y pueden, aunque con pequeñas trabas, funcionar con navegadores incompatibles con HTML5; aunque estos nuevos elementos que HTML5 da, deberían poder ser utilizados sin restricciones.

Etiquetas y colaboradores del documento

Colaboradores de esta página: jswisher, sergiorzg, Izel
Última actualización por: jswisher,