Semántica en HTML5 (II): Footer

Escrito por el |

En el artículo anterior sobre semántica en HTML5, vimos las ventajas que se obtienen al diseñar una web semántica, amén también de comenzar con la primera etiqueta de este tipo, header. Hoy vamos a ver la etiqueta footer, que es sin duda alguna la de más fácil aplicación, y que al contrario de lo que ocurre con otras etiquetas semánticas, no ha habido ningún tipo de discusión, al menos que yo sepa, sobre su uso o aplicación.

Es una etiqueta tremendamente sencilla, con lo cual no me extenderé mucho en su explicación. Para su total comprensión voy a usar el mismo ejemplo que utilicé en el primer artículo sobre semántica, y así etiqueta tras etiqueta y artículo tras artículo, iremos construyendo una plantilla 100% semántica. Ponte cómodo que empezamos.

Las especificaciones que nos ofrece la W3C son en ocasiones demasiado técnicas, incluso pedantes, para este caso concreto prefiero usar la que nos da w3schools, mucho más sencilla y directa. Dice así: "la etiqueta footer define el pie de página de un documento o sección", así de claro y sencillo. Un elemento footer aporta información sobre el elemento que lo contiene y no necesariamente a de estar al final de la sección, aunque sea este su uso más habitual.

Con estas especificaciones está claro que el pie de página de cualquier web/blog debería usar esta etiqueta, pues aporta información sobre el sitio en concreto, como el copyright, condiciones de uso, política de privacidad, política de cookies, y un sin fin de información adicional.


<!DOCTYPE html>
<html>
<head>
 ...
</head>
<body>
 <header id="cadecera">
  <img src="logo.gif">
  <p>título del blog</p>
  <form>formulario de búsqueda</form>
 </header>
 <div id="contenido">
  <header class="encabezado-post">
   <h1>Título del post</h1>
   <time>Fecha de publicación</time>
   <p>Autor del post</p>
  </header>
  <div class="contenido-post">
   ...
  </div>
 </div>
 <footer id="footer">
  copyright, condiciones de uso, etc.
 </footer>
</body>
</html>

Al igual que ocurre con la etiqueta header un documento puede contener varias etiquetas footer, ya que tanto un artículo como un post bien pueden tener un pie de página con información adicional, como fecha de publicación, autor, tags, ... Si bien esta información puede ir también dentro de las etiquetas header, es cuestión de diseño el que un post o un artículo tenga o no un footer.


<!DOCTYPE html>
<html>
<head>
 ...
</head>
<body>
 <header id="cadecera">
  <img src="logo.gif">
  <p>título del blog</p>
  <form>formulario de búsqueda</form>
 </header>
 <div id="contenido">
  <header class="encabezado-post">
   <h1>Título del post</h1>
   <time>Fecha de publicación</time>
   <p>Autor del post</p>
  </header>
  <div class="contenido-post">
   ...
  </div>
  <footer class="post-footer">
   nº de comentarios, tags
  </footer>
 </div>
 <footer id="footer">
  copyright, condiciones de uso, etc.
 </footer>
</body>
</html>

Como puedes ver el uso de la etiqueta footer es tremendamente sencillo, un punto más para pasarse definitivamente a HTML5 y diseñar webs con marcado semántico. Con esto doy por terminado el artículo de hoy, ahora es tu turno.