DAWeb. Etiquetas estructurales en HTML5

Nuevo doctype

Independientemente de las prestaciones de los navegadores en que se ejecutará el código, se ha de indicar al navegador que el contenido se ha de presentar de acuerdo con la especificación HTML5. Esto se logra usando la declaración doctype. Esta declaración indica al navegador en qué versión del lenguaje de marcas está escrita la página. Esto lo hace considerando una Document Type Definition (DTD). La DTD especifica las reglas usadas por el lenguaje de marcas, para que los navegadores puedan presentar el contenido correctamente.

Doctype puede ser un concepto confuso. En la especificación previa HTML hay varios doctypes, y las diferencias entre ellos no son muy claras. La siguiente tabla muestra los doctypes actualmente disponibles y sus capacidades.

Doctypes y capacidades

Doctype	Capacidades	Ejemplo
HTML 4.01 estricto	Permite todos los elementos y atributos HTML, pero no permite etiquetas de presentación, como la etiqueta de fuente. No se permiten conjuntos de marcos.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 transicional	Igual que HTML estricto, pero permite el uso de elementos en desuso, como la etiqueta de fuente. No se permiten conjuntos de marcos.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 conjunto de marcos	Igual al HTML transicional, pero permite conjuntos de marcos.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 estricto	Igual al HTML estricto, pero todo el contenido debe estar escrito como XML bien formateado. Por ejemplo, todas las etiquetas de apertura deben tener etiquetas de cierre. No se permiten conjuntos de marcos.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 transicional	Igual al HTML transicional, pero todo el contenido debe estar escrito como XML bien formateado. No se permiten conjuntos de marcos.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 conjunto de marcos	Igual al XHTML transicional, pero permite conjuntos de marcos.	<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	Igual al XHTML estricto, pero también proporciona capacidades para módulos, como soporte Ruby para idiomas orientales-asiáticos.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

afortunadamente, la declaración doctype se ha simplificado en HTML5. De hecho es sólo una. Para que el navegador muestre en pantalla la página web usando la especificación HTML5, se ha de añadir el doctype:

<!DOCTYPE html>

La declaración de doctype debe ser el primer elemento en un documento HTML, antes que <html>.

Nuevos elementos estructurales

La razón para crear nuevas etiquetas estructurales es dividir las páginas Web en partes lógicas que describan el tipo de contenido que incluyen. Conceptualmente, se puede considerar la página Web como un documento. Los documentos tienen encabezados, pies de página, capítulos y otras secciones diferentes que dividen el documento en partes lógicas.

En esta sección se revisan los métodos actuales de dividir un documento HTML usando código genérico de muestra. En el resto de estos apuntes, se revisará el código original usando las nuevas etiquetas estructurales HTML5 para ver cómo el documento es transformado en secciones lógicas.

Enfoque HTML 4

Si se ha trabajado con documentos HTML simples, entonces se estará familiarizado con la etiqueta div. La etiqueta div es el principal mecanismo de la era previa al estándar HTML5 para crear bloques de contenido en un documento HTML. Por ejemplo, el Listado siguiente muestra cómo usar etiquetas div para crear una página simple con un encabezado, un área de contenido y un pie de página.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>
Una página HTML simple usando Divs
</title>

</head>

<body>

<div id='header'>
Header</div>

<div id='content'>
Content</div>

<div id='footer'>
Footer</div>

</body>

</html>

La etiqueta div es una buena etiqueta para uso general. Sin embargo, además de mirar el atributo id de cada etiqueta div, es difícil decir qué sección del documento representa cada etiqueta div. Aunque se puede pensar que id es un indicador suficiente si se nombra adecuadamente, los atributos id son arbitrarios. Hay muchas variaciones que se pueden considerar id igualmente válidas. La etiqueta en sí no ofrece ninguna indicación sobre el tipo de contenido que se pretende que represente.

Enfoque HTML5

HTML5 es el estándar que ha proporcionando un conjunto de etiquetas que definen con mayor claridad los bloques principales de contenido que componen un documento HTML. Sin importar el contenido final mostrado por la página web, la mayoría de páginas consisten en combinaciones de variantes de secciones y elementos de página comunes.

El código del siguiente listado crea una página simple con un encabezado, un área de contenido y un pie de página. Estos y otras secciones y elementos de página son bastante comunes, de manera que HTML5 incluye etiquetas que dividen los documentos en las secciones comunes y que indican el contenido de cada una. Las nuevas etiquetas son:

header
section
article
aside
footer
nav

que se describen en detalle y con ejemplos.

Área header

Como su nombre sugiere, la etiqueta header tiene por finalidad marcar una sección de una página HTML como el encabezado. El siguiente listado muestra el ejemplo de código del Listado codevio, modificado para que use un header.


<!DOCTYPE html>

<html>

<head>

<title>
Una página HTML simple</title>

</head>

<body>

<header>
Header</header>

<div id='content'>
Content</div>

<div id='footer'>
Footer</div>

</body>

</html>

Área section

La etiqueta section tiene por objeto identificar porciones significativas del contenido de la página. Esta etiqueta es de alguna forma análoga a dividir un libro en capítulos. Añadiendo una etiqueta section al código de ejemplo, da como resultado el código del listado mostrado a continuación.


<!DOCTYPE html>

<html>

<head>

<title>
Una página HTML simple</title>

</head>

<body>

<header>
Header</header>

<section>

    <p>

    Esta es una sección importante de la página.
    </p>

    </section>

<div id='footer'>
Footer</div>

</body>

</html>

Área article

La etiqueta article identifica las secciones principales del contenido dentro de la página web. Por ejemplo en un blog, donde cada publicación de cada persona constituye una porción significativa de contenido. Añadiendo etiquetas article al código de ejemplo da como resultado el código mostrado en el siguiente listado.


<!DOCTYPE html>

<html>

<head>

<title>

Una página HTML simple
</title>

</head>

<body>

<header>
Header</header>

<section>

<article>

    <p>

    Esta es una sección importante del contenido de la página.
    Tal vez una publicación en blog.
    </p>

    </article>

    <article>

    <p>

    Esta es una sección importante del contenido de la página.
    Tal vez una publicación en blog.
    </p>

    </article>

</section>

<div id='footer'>
Footer</div>

</body>

</html>

Etiqueta aside

La etiqueta aside indica que el contenido dentro de ella está relacionado el contenido principal de la página pero que no es parte de ella. En cierta forma es análogo a usar paréntesis para hacer un comentario en un cuerpo de texto (como este). El contenido entre paréntesis proporciona información adicional sobre el elemento que lo contiene. Añadiendo una etiqueta aside al código de ejemplo da como resultado el código en el siguiente listado.


<!DOCTYPE html>

<html>

<head>

<title>

Una página HTML simple
</title>

</head>

<body>

<header>
Header</header>

<section>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</aside>

    </p>

    Este es un aparte de la primera publicación en blog.
    </p>

    </aside>

</article>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</article>

</section>

<div id='footer'>
Footer</div>

</body>

</html>

Etiqueta footer

La etiqueta footer marca el contenido dentro del elemento que es el pie de página del documento. Añadiendo una etiqueta footer al código de ejemplo da como resultado el código en el siguiente listado.


<!DOCTYPE html>

<html>

<head>

<title>

Una página HTML simple
</title>

</head>

<body>

<header>
Header</header>

<section>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</aside>

</p>

Este es un aparte de la primera publicación en blog.
</p>

</aside>

</article>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</article>

</section>

<footer>
Footer</footer>

</body>

</html>

en este punto, todas las etiquetas div originales han sido reemplazadas con etiquetas HTML5 estructurales.

Etiqueta nav

El contenido dentro de la etiqueta nav tiene por objeto propósitos de navegación. Añadiendo una etiqueta nav al código de ejemplo da como resultado el código en el siguiente listado.


<!DOCTYPE html>

<html>

<head>

<title>

Una página HTML simple
</title>

</head>

<body>

<header>
Header
<nav>

    <a href='#'>
Algún enlace de navegación</a>

    <a href='#'>
Algún enlace de navegación adicional</a>

    <a href='#'>
Un tercer enlace de navegación</a>

    </nav>

</header>

<section>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</aside>

</p>

Este es un aparte de la primera publicación en blog.
</p>

</aside>

</article>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</article>

</section>

<footer>
Footer</footer>

</body>

</html>

Ejemplo completo

El listado muestra el resultado de reemplazar las etiquetas div originales por las nuevas etiquetas HTML5 estructurales.


<!DOCTYPE html>

<html>

<head>

<title>

Una página HTML simple
</title>

</head>

<body>

<header>
Header
<nav>

<a href='#'>
Algún enlace de navegación</a>

<a href='#'>
Algún enlace de navegación adicional</a>

<a href='#'>
Un tercer enlace de navegación</a>

</nav>

</header>

<section>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</aside>

</p>

Este es un aparte de la primera publicación en blog.
</p>

</aside>

</article>

<article>

<p>

Esta es una sección importante del contenido de la página.
Tal vez una publicación en blog.
</p>

</article>

</section>

<footer>
Footer</footer>

</body>

</html>

Conclusión

Las nuevas etiquetas HTML5 describen los tipos de contenido que incorporan, y ayudan a dividir el documento en secciones lógicas. Todavía depende del autor de la web decidir cuándo y dónde utilizar las nuevas etiquetas dentro de un documento, de forma similar a como un autor escribe un libro. Mientras dos autores escribiendo el mismo libro pueden optar por diferentes formas de dividir el libro en capítulos, la acción de usar capítulos ofrece un método consistente de dividir el libro en secciones. De manera similar, aunque los dos autores de una página web dada pueden optar por estructuras diferentes, las nuevas etiquetas estructurales HTML5 proporcionan nuevas convenciones que los desarrolladores de páginas Web pueden usar y que las viejas etiquetas div no ofrecían.