Maquetación web utilizando header y footer de HTML5

En este artículo mostraremos una forma muy sencilla de estructurar un sitio web con un layout bastante básico que hará uso de dos elementos que son parte de la más reciente versión de HTML. Nos estamos refiriendo al elemento “header”, utilizado para definir los encabezados de distintas secciones, conteniendo elementos de navegación, logos, entre otro contenido, y el elemento “footer” que nos ayuda a crear un apartado donde se mostrará información complementaria de la sección a la que fue agregado, generalmente utilizado para mostrar links hacia contenido relacionado y licencias de copyright.

Si consideras un inconveniente el hecho de manejar las etiquetas “header” o “footer” dentro de tu layout por ser parte de HTML5, una versión no reconocida por navegadores antiguos, puedes reemplazar todas las secciones definidas por estos elementos con capas de elementos “div”. El layout lucirá de la misma manera, la única diferencia se verá reflejada en la semántica del sitio, tenemos que recordar que estos elementos fueron integrados en HTML5 para definir de manera exacta las partes de la interfaz donde se mostrará la información que contienen.

El propósito de crear este layout es dividir nuestra área principal de contenido en tres zonas distintas que son las de más común uso en las páginas de internet de la actualidad, utilizaremos un encabezado principal, un pie de página y por supuesto un cuerpo de contenido.

Header

El encabezado del sitio es la primera parte que se muestra en la interfaz de una página web, aunque esto no significa que necesariamente sea la primera parte del código. En esta sección encontraremos regularmente los menús de navegación, barras de búsqueda, el logo del sitio o empresa y quizás algún login para usuarios.

Debemos aclarar que aunque el elemento “header” será utilizado para definir el encabezado del sitio, esta etiqueta no fue hecha exclusivamente para esta función, ya que puede ser utilizada para definir el encabezado de cualquier contenedor y del contenido que en este se muestra. Con esto me refiero a que si tenemos un “div” dentro de nuestro contenido y esta capa tiene alguna clase de información, podemos darle un encabezado con esta misma etiqueta.

Footer

Esta sección es utilizada generalmente para mostrar logos adicionales, enlaces hacia otros sitios, secciones de la página, mapas del sitio, información de derechos, licencias y copyright. De las tres secciones puede resultar la menos importante por así decirlo, aunque en realidad son muchas las páginas que manejan esta sección dentro de sus layouts, ya que permite una navegación más sencilla y deja en claro, en un lugar visible, como manejas, proteges y utilizas tu contenido.

Al igual que el elemento “header”, esta etiqueta no fue hecha exclusivamente para ser pie del sitio en general, ya que puede utilizarse para cualquier otro contenedor de información, aunque resulta más común únicamente utilizarlo en el layout general.

Definición de las áreas

Lo primero que debemos hacer, es crear el código que le diga al navegador que parte de la información será el englobada en el encabezado, cual será nuestro contenido y que mostraremos en el pie de nuestra página, este es el patrón que observaremos con regularidad. Para ello debemos empezar con algo simple, como defnir en que parte del código incluiremos la información disponible.

Anteriormente la etiqueta utilizada para definir todas las partes de un layout era “div”, a estas capas se les daba algún ID o clase para distinguirlas, darles estilo y posicionarlas, de esta manera cada capa actuaba de manera independiente y podían ser colocadas en distintos lugares. Ahora HTML5 nos da la opción de utilizar etiqueta específicas para cada sección, la cual nos ayudará a tener mejor orden en el código, facilitando el “crawling”, el uso de robot y mejorando el SEO de nuestras páginas, ya que el contenido se encontrará mejor organizado.

Para definir las tres áreas empezaremos con un código bastante básico como el siguiente, el cual irá dentro de nuestro elemento “body”:

<header>
<!-- Aquí irá la información del encabezado -->
</header>

<div id="cuerpo">
<!-- Aquí estará el contenido principal -->
</div>

<footer>
<!-- Este será nuestro pie de página -->
</footer>

Como ya dijimos, esto es un patrón de diseño, no significa que necesariamente tengamos que tener las tres secciones en nuestro sitio, si quieres modificar esta estructura y únicamente utilizar ciertas secciones, o agregar más puedes hacerlo.

Agregar contenido

En nuestro encabezado iremos agregando elementos que sean de uso común, como por ejemplo un título para la página y un menú de navegación. Para ello utilizamos la etiqueta “h2” la cual nos permite definir que estamos utilizando un tipo de encabezado para escribir el título, y para el menú utilizaremos una lista desordenada a la cual le daremos su respectivo formato.

Dicha lista deberá de estar incluida en un elemento “nav”, el cual también es parte de la nueva versión de HTML, y fue creado para definir específicamente elementos de navegación como los menús.

<header>
    <h2>Mi sitio web</h2>
    <nav>
        <h3>Navega</h3>
        <ul>
            <li><a href="#">Sección 1</a></li>
            <li><a href="#">Sección 2</a></li>
            <li><a href="#">Sección 3</a></li>
            <li><a href="#">Sección 4</a></li>
        </ul>
    </nav>
</header>

Después de tener nuestro encabezado pasamos a definir el contenido del sitio, en esta ocasión utilizaremos texto de prueba para simular una entrada de blog. En este caso utilizaremos un elemento “div” para definir la sección, no debemos tener miedo en usarlo ya que para esto fueron hechos, simplemente ahora contamos con etiquetas más especializadas, pero los “div” siguen siendo los elementos más utilizados dentro de nuestro layout.

<div id="cuerpo">
    <h2>Entrada</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum tempus lacus, sit amet molestie sapien iaculis vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in lorem sapien. Pellentesque tempor augue ut ipsum fringilla sodales. In fermentum facilisis lobortis. Aenean egestas porttitor eros, in accumsan diam rutrum vel. Phasellus et tellus in arcu faucibus placerat vitae id felis. Integer sit amet mauris ipsum. Integer interdum lorem quis metus venenatis sit amet mattis mauris adipiscing. Donec non lorem tortor. Sed arcu nulla, tincidunt sed faucibus vitae, bibendum sed lorem. Curabitur nec risus lorem, quis placerat mauris. Donec bibendum ipsum vel mi imperdiet quis ornare orci imperdiet. Nam vulputate scelerisque ipsum, ut vehicula sapien pretium sit amet. Mauris vehicula viverra lobortis. </p>
</div>

Y finalmente nuestro footer:

<footer>
Todos los derechos reservados 2012, Mi sitio web. Diseñado por: xxxxx.
</footer>

Estilo

Una vez que tenemos la estructura y su contenido pasamos a dar estilo con CSS, lo que permitirá mostrar las secciones de manera adecuada, empezaremos con el encabezado. La lista será el principal elemento a editar, debemos agregar un estilo “inline” que permita mostrar los elementos en una sola línea como menú, de igual forma podemos agregar cualquier estilo que deseemos a nuestro encabezado utilizando “header” como selector, aunque recuerda que esto también se aplicará si utilizas esta etiqueta en alguna otra parte del código, por lo que puedes utilizar un ID o un selector más avanzado.

ul{
padding-left:0;
}

li{
list-style: none;
display: inline;
padding-right: 10px;
}

body > header{
background: #333;
}

Lo que hicimos con el selector del header fue únicamente aplicar el estilo al header que es hijo directo de body, esto quiere decir que solamente se aplicará al header que definimos como encabezado de página. Si no estás muy relacionado con CSS no te preocupes esto será lo más avanzado en relación en este tema por el momento, en un selector podemos utilizar el símbolo mayor que (>) para agregar especificidad y seleccionar hijos directos de un elemento padre, en este caso body es el padre de header y en caso de que CSS no encuentre ningún hijo directo con esa etiqueta el estilo simplemente no se aplica.

Ahora apliquemos al resto del sitio dos colores distintos para distinguir cada parte:

#contenido{
background: #CCC;
}

body > footer{
background: #666;
}

body{
color: #FFF;
}

Obviamente no estoy sugiriendo que utilices esta combinación de colores en tu sitio, simplemente estamos probando un punto y dando forma a un layout básico, lo que nos permitirá identificar claramente cada parte del sitio.