¿Qué és el outline de un documento html?
Para comprender bien este post es fundamental saber qué es el outline de un documento html. El outline es lo que se puede llamar el esquema o índice del documento. No es más que la lista de secciones que forma la página web.
Estructura de un documento HTML4
La estructura de un documento, es decir, la estrutura semántica de lo que está entre las etiquetas <body> y </ body>, es fundamental para la presentación de la página al usuario. HTML4 utiliza el concepto de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por una división de HTML (<div>) con elementos de encabezado (<h1>, <h2>, <h3>, <h4>, <h5> o <h6>) dentro de ella, que definen su título. Las relaciones del elemento div junto con un encabezado forman la estructura del documento y forman el outline del documento.
Para ver un ejemplo de como se forma el outline de un documento html veamos el siguiente ejemplo:
<div class="section" id="forest-elephants"> <h1> Forest elephants</h1> In this section, we discuss the lesser known forest elephants. ...this section continues... <div class="subsection" id="forest-habitat"> <h2> Habitat</h2> Forest elephants do not live in trees but among them. ...this subsection continues... </div> </div>
El resultado será:
1. Forest elephants
1.1 Habitat
Un elemento <div> no implica la creación de una nueva sección. La mera presencia de un encabezado implicará la creación de una nueva sección.
De esta forma, el siguiente ejemplo:
<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>
implica el siguiente esquema:
1. Forest elephants
1.1 Habitat
1.2 Diet
2. Mongolian gerbils
Problemas resueltos por HTML5
La definición de un documento con HTML4 implica numerosos problemas, a continuación comentamos los problemas que HTML5 ha intentado resolver respecto a los que teníamos en HTML4
- El uso de <div> para definir secciones semántica, sin definir valores específicos para los atributos class, hace que automatizar un algoritmo para la generación del esquema sea algo imposible ("¿Es ese <div> parte del esquema de la página, define una sección o una subsección?" O "Es sólo un <div> de presentación, sólo utilizado para dar estilo?").En otras palabras, la especificación HTML 4 es muy imprecisa a la hora de definir una nueva sección. La generación automática de esquemas es importante, especialmente para los software especializados en ayudar a personas discapacitadas, 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 utilizar elementos <div> para esquematizar nuestras pátinas html, introduciendo un nuevo elemento, <section>, que es el responsable de quedar este tipo de secciones en los nuevos documentos HTML.
- La fusión de varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel del elemento de encabezados para conseguir mantener el esquema correcto. Esto se soluciona en HTML5 con los nuevos elementos de seccionamiento (<article>, <section>, <nav> y <aside>), que son siempre subsecciones de la sección anterior más cercana, independientemente de que las secciones hayan sido creadas por encabezados internos.
- Porque cada elemento de encabezado es parte de un esquema, no es posible describir un subtitulo o título secundario (Ej: <h1>Título</h1><h2>Subtítulo</h2> creará el esquema: 1. Título 1.1 Subtítulo) de forma que que el subtítulo dependa directamente del título. HTML 5 introduce el elemento <hgroup> que esconde todos los elementos de encabezado dentro de él bajo una misma entrada del esquema formando tan solo una sección (<hgroup><h1>Título</h1><h2>Subtítulo</h2></hgroup> creará un esquema tal que: 1. Título).
- En HTML 4, cada sección es parte del esquema del documento. Pero hay documentos que a menudo no son lineales. Un documento puede tener secciones especiales que contienen información que no es parte de él, a pesar de que está relacionado con el flujo principal, como un bloque de publicidad o una caja de explicación. HTML 5 introduce el elemento <aside> permitiendo que dichos tramos no sean parte del esquema principal.
- Una vez más, en HTML4, ya que cada sección es parte del esquema del documento, no hay manera de tener información de la sección que contenga información relacionada con todo el sitio completo y no con el documento actual, así 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: <nav> para las colecciones de enlaces, tales como una tabla de contenido o menús, <foot> y <header> para obtener información relacionada con el sitio.
En términos más generales HTML5 aporta precisión a las características de seccionamiento y encabezado, lo que permite crear esquemas de documentos más predecibles y que pueden ser utilizados por el navegador más fácilmente para mejorar la experiencia del usuario.
Este articulo está basado en el artículo sections and outlines of an HTML5 document del Mozilla Developer Center.
