Las capas en HTML5

Con esta etiqueta podemos declarar la cabecera que tendrá la página Web. Podemos incluir por ejemplo un título para la página, o un menú de navegación hacia los distintos apartados de la Web. Otro de los elementos que se definen generalmente dentro de esta etiqueta es el logotipo de la Web.

Pueden añadirse tantos elementos header como se considere necesario, pero no podrán estar situados nunca dentro de los elementos footer, address u otro header.

 <header>
    <h1>Título de la página Web</h1>
    <p>Información sobre la página Web</p>
</header>

Utilizaremos esta etiqueta para declarar un menú de navegación hacia los distintos apartados que tenga la página Web. No es necesario que todos los enlaces de la página se declaren en el interior de esta sección, sino únicamente los utilizados como menú para la Web. Además, el uso de esta etiqueta mejora la accesibilidad de la página, ya que hay herramientas como los lectores de pantalla, que pueden identificar el menú de forma rápida para facilitar la navegación al usuario.

 <nav>
    <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="nosotros.html">Nosotros</a></li>
        <li><a href="contacto.html">Contacto</a></li>
    </ul>
</nav>

Mediante el uso de esta etiqueta se puede definir un contenido determinado que puede ser externo a la página Web, como por ejemplo una noticia de un periódico, un mensaje de un foro, etc. Este elemento suele utilizarse cuando un contenido tiene el mismo sentido si se separa del resto del contenido de la página Web. Además, dentro de un elemento article también pueden definirse los elementos header y footer para establecer una cabecera y un pie para el contenido.

 <article>
    <h2>Título de la noticia</h2>
    <p>Contenido de la noticia</p>
</article>

Esta etiqueta define una sección que se quiere establecer para agrupar un contenido determinado, como por ejemplo por capítulos, una introducción al contenido, etc. Generalmente el contenido de este elemento también tiene un encabezado, y su uso solo está recomendado cuando el contenido no puede ser definido en los elementos article, nav o aside.

 <section>
    <h1>Encabezado</h1>
    <p>Contenido</p>
</section>

Usando esta etiqueta se puede definir un contenido que está relacionado con otra parte de la página Web, y también para definir un determinado contenido que sirva como complemento del de la Web, como por ejemplo definiciones de términos, enlaces a páginas relacionadas, etc.

 <aside>
    <h3>HTML</h3>
    <p>HTML es un lenguaje...</p>
</aside>

Usaremos esta etiqueta para definir un contenido que quiera ser mostrado en el pie de página de la Web, como por ejemplo el autor de la página Web, los derechos de autor, etc. Pueden definirse tantos elementos footer como sean necesarios dentro de la página Web.

 <footer>
    <p>Página Web desarrollada por ...</p>
</footer>

Con esta etiqueta se puede definir cierta información relacionada con el autor del contenido de la página Web, como por ejemplo sobre una noticia, sobre la propia página Web, etc. A la hora de definir este elemento habrá que tener en cuenta que la información definida en su interior estará relacionada con el contenido de su elemento padre. Es decir, si se define dentro de un article se establecerá información sobre el autor de dicho contenido.

Generalmente, cuando la información que se quiere mostrar está relacionada con el autor de la página Web, el elemento address debe estar definido dentro del elemento footer.

 <address>
    Nombre del autor<br>
    E-mail<br>
    Dirección...
</address>

Por lo tanto, a la hora de definir la estructura de una página Web debemos empezar por la parte superior de la página, es decir, por la cabecera, e ir bajando hasta la parte inferior, hasta el pie. Así que, para comenzar a definir la estructura, empezaremos estableciendo la cabecera, y para ello tendremos que utilizar la etiqueta <header>. En su interior podremos colocar un logotipo identificativo para la página Web, y también un título, entre otras cosas.

 <header>
    <img src="logotipo.png" alt="Logotipo de la página">
    <h1>Bienvenidos a mi página Web</h1>
</header>

Una vez que ya hemos definido la cabecera, vamos a crear un menú de navegación justo debajo, a través del cual los usuarios puedan acceder a cualquiera de los apartados del sitio Web. Para ello tendremos que utilizar la etiqueta <nav>, y en su interior tendremos que colocar todos los enlaces a las distintas páginas del sitio Web. Al establecer los estilos para esta sección, es conveniente que los elementos del menú aparezcan de forma horizontal y siempre en el mismo sitio, para que el usuario no se pierda.

 <nav>
    <a href="inicio.html">Inicio</a>
    <a href="noticias.html">Noticias</a>
    <a href="empresa.html">Nuestra empresa</a>
    <a href="contacto.html">Contactar</a>
</nav>

En su interior lo primero que haremos será crear una cabecera con el título del artículo, por lo que tendremos que utilizar la etiqueta <header>. Debajo tocará establecer la información del artículo, para lo que podemos utilizar las etiquetas <p>. Para acabar la redacción del artículo podemos añadirle un pie mediante la etiqueta <footer>, en la que definiremos la información respecto al autor del artículo.

 <article>
    <header>
        <h1>Título del artículo</h1>
    </header>
    <p>Contenido del artículo</p>
    <footer>
        <p>Artículo escrito por...</p>
    </footer>
</article>

Por último, solamente nos quedará definir el pie para la página Web, donde se puede colocar cierta información respecto al autor de la página Web, cualquier información de contacto, logotipos de la página con un tamaño menor que en la cabecera, información sobre los derechos de autor de la Web, etc. Para ello tendremos que utilizar la etiqueta <footer>.

 <footer>
    <p>Todos los derechos reservados</p>
    <p>Página Web desarrollada por...</p>
    <img src="logotipo.png" alt="Logotipo de la página">
</footer>