Ejemplos de estructura en HTML 5

Ejemplos de estructura en HTML 5

1. Una estructura simple

Si volvemos a tomar como ejemplo la estructura de página que usamos al principio de este capítulo, podremos modificarla para adaptarla al HTML5.

En el elemento <header> encontraremos los elementos del encabezado de la página, como el logotipo y el eslogan, por ejemplo.

En el elemento <nav>, situado a la izquierda, encontraremos los vínculos que nos permitirán navegar por ese sitio web.

Todos los artículos del blog estarán colocados, por supuesto, dentro de los elementos <article>.

Por último, el pie de página, <footer>, podrá contener las menciones legales o los vínculos de contacto, por ejemplo.

2. Una estructura más elaborada

Veamos ahora la estructura de un sitio web un poco más elaborado.

Encontramos de nuevo el elemento <header>, que ya todos conocemos.

Debajo tenemos el primer elemento <nav>, para el menú de navegación general del sitio web, que nos permitirá navegar por las distintas páginas.

A la izquierda tenemos una segunda caja <nav>, para la navegación secundaria, que contiene los vínculos relacionados directamente con el contenido de la página en cuestión.

A la derecha encontramos el elemento <aside>, que muestra información relacionada con el contenido de la página, como los vínculos promocionales o los contenidos relacionados, por ejemplo.

El contenido de la página aparece dentro de dos elementos <section>, de modo que podamos distinguir con facilidad esos dos contenidos diferentes. Cada <section> contiene un elemento <article> para el contenido textual y un elemento <aside> para incluir los elementos de información adicional relacionados con el artículo (iconografía, enlaces...).

Por último, la página presenta un pie de página <footer> que contiene la información legal, las condiciones de venta, un vínculo de contacto, un plano de acceso...

Claro está, cada elemento de la estructura deberá contar con un código de identificación único o con una clase común para varios elementos.

3. La estructura de un artículo

Veamos ahora la estructura de lo que podría ser un artículo de un sitio web en HTML5.

Tenemos un elemento <article> como contenedor general.

Nuestros artículos presentan cabeceras, introducciones, por lo que hemos usado el elemento <header>. Este elemento <header> contiene el título <h1> del artículo y su subtítulo <h2>.

El contenido textual del artículo se sitúa entre los elementos <p>. El artículo incluye vínculos, que completan el contenido facilitado, ordenados en una lista <ul>.

Por último, el artículo presenta un pie de página <footer> o, mejor dicho, un "pie de artículo", con la fecha de la publicación, la sección a la que pertenece dicho artículo y el nombre del autor, por ejemplo.