Semántica en HTML5 (I): Header
El entre comillas "nuevo lenguaje HTML5", nos ofrece entre otras muchas cosas, una serie de etiquetas de marcado con significado semántico. El significado semántico de estas nuevas etiquetas aporta una serie de ventajas. Por ejemplo, a cada uno de estos elementos se le asigna un role ARIA (Accessible Rich Internet Application) específico por defecto, ayudando a mejorar la accesibilidad de nuestro documento de cara a personas que usen alguna tecnología de asistencia en la navegación, como pueden ser los screen readers (lectores de pantalla).
También hay que tener en cuenta que ayudan a la mejor interpretación de nuestro documento por parte de los motores de búsqueda, lo que facilita que nos indexen lo que realmente importa, el contenido. Amén también, de que un texto HTML5 bien etiquetado, hace su código más comprensible por cualquiera que lo esté leyendo.
Hoy voy a comenzar por una de las etiquetas más sencillas, la etiqueta header. Así que ponte cómodo, que el código también se hizo para alienígenas.
Según el W3C la etiqueta header representa el encabezamiento de una nueva sección. También puntualiza diciendo que está destinada a contener el encabezamiento de una sección (etiquetas h1-h6), aunque esto no es obligatorio. También puede contener un menú de navegación, un formulario de búsqueda o cualquier imagen relevante (por ejemplo, un logotipo). Con toda esta información está claro cual es el primer uso que se me viene a la cabeza. Sí, as acertado, el encabezado de cualquier blog.
<!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">
...
</div>
<div id="footer">
...
</div>
</body>
</html>
La etiqueta header no está restringida a un único uso por documento, con lo cual puede haber varias etiquetas header dentro del mismo documento. Su uso por tanto será siempre que empecemos una nueva sección, así que otro uso muy común será en el encabezamiento de un post. Eso sí, siempre que el encabezamiento contenga algo más que sólo el título, no vayamos a realizar sobremarcado.
<!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>
<div id="footer">
...
</div>
</body>
</html>
Uno de los errores más comunes el abuso de las etiquetas de marcado en HTML5, tanto las semánticas que estoy tratando como el resto. La etiqueta header debe ser usada para contener la información de encabezamiento que precede a una nueva sección, por contra no la usaremos si dentro de ella sólo vamos a usar un elemento h, ya que es redundante, el elemento h es un elemento de marcado con suficiente fuerza semántica.
<header>
<h1>Título del post</h1>
</header>
En este ejemplo se ve su uso inadecuado, que no incorrecto. La etiqueta h1 tiene la suficiente fuerza para no ser necesario englobarla dentro de una etiqueta header. Con esto doy por terminado el artículo de hoy, que espero te haya sido de ayuda. Ahora sólo hace falta un poco de tiempo para ponerlo en práctica.