Anatomía de un blog en HTML5 HTML
Una de las principales características de HTML5 son los elementos de marcado con significado semántico. Por nombrar algunos: header, footer, main, nav o article. El significado semántico de estos elementos supone importantes ventajas. Por ejemplo, a cada uno se le asigna un role ARIA (Accessible Rich Internet Application) específico por defecto. Esto ayuda a mejorar la accesibilidad a nuestra página web para los que utilicen alguna tecnología de asistencia en la navegación como pueden ser los lectores de pantalla (screen readers).
En este artículo voy a hacer un repaso de como debería ser la estructura de un blog en HTML5 intentando abarcar los elementos característicos de un blog estándar: navegación, post, fechas, comentarios, columna lateral, etc. Me he inspirado en el artículo de Bruce Lawson Designing a blog with HTML5, y he añadido información más actualizada. Ponte cómodo que empezamos.
El DOCTYPE
Al comienzo de un documento HTML5 es imprescindible poner la simple y sencilla línea:
<!DOCTYPE html>No hacerlo hará que el navegador analice la página en quirks mode, una técnica utilizada por los navegadores modernos para emular a navegadores viejos y asegurar que viejas webs se vean bien. ¿Imáginas una web moderna en HTML5 analizada como si fuese una web antigua? Estás avisado. No te olvides nunca de poner el <!DOCTYPE html>.
El home o índice del blog
La inmensa mayoría de blogs siguen una estructura similar: una cabecera, un área para el contenido, uno o varios elementos de navegación, un área de contenido accesorio y un pie. Esta estructura en HTML5 se representaría con los elementos header (cabecera), main (para el contenido principal), nav (para la navegación), aside (para el contenido accesorio) y footer (para el pie). Dentro del elemento main se utilizan elementos article para cada entrada del blog. La estructura «universal» del home o índice de posts de un blog sería:
En un mismo documento puede haber múltiples elementos de cada tipo, excepto del elemento main que sólo debería haber uno. Al elemento main, si no especifica otra cosa, se le otorga el ARIA role="main" e identifica el contenido principal de la página para que los screen readers pueden encontrarlo fácilmente.
Los elementos footer y header pueden repetirse pero siempre como elementos hijos de secciones diferentes. No tiene sentido, por ejemplo, que un article tenga dos header, ¿no?. Respecto al elemento nav, puedes ponerlo en diferentes sitios. De hecho, según las especificaciones HTML5, un documento puede contener varios nav. Lo más común es que se sitúe un nav «principal» dentro del header o en el aside. La navegación entre las páginas del blog también sería un elemento nav.
El HTML podría sería:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Mi Blog en HTML5</title>
</head>
<body>
<header>
<h1>Mi blog en HTML5</h1>
(<nav></nav>)
</header>
(<nav></nav)
<main>
<article>
<header>
<h2>Título de mi segundo post</h2>
<time datetime="2014-10-05">Hace 3 días</time>
</header>
<p>Un post</p>
<footer>...</footer>
</article>
<article>
<header>
<h2>Título de mi primer post</h2>
<time datetime="2014-10-01">Hace 1 semana</time>
</header>
<p>Un post...</p>
<footer>...</footer>
</article>
<nav>(Paginación)</nav>
</main>
<aside>
(<nav></nav>)
</aside>
</footer>
</footer>
</body>
</html>Estructura de un post en HTML5
Las especificaciones HTML5 para el elemento article dice (traducido):
El elemento
articlerepresenta una composición completa o auto-contenida en un documento, página, aplicación o sitio que es, en principio, independientemente distribuible o reusable, por ejemplo en sindicación. Esto podría ser un post de un foro, un artículo de un periódico o revista, una entrada de un blog, un comentario enviado por los usuarios, un widget o gadget interactivo o cualquier otro elemento de contenido independiente. Cadaarticledebería estar identificado con un heading (elemento h1-h6) anidado dentro del elementoarticle.
Así pues, el elemento article es el mejor para marcar un post y la estrucutura semántica en HTML5 sería:
Creo que la imagen superior, aunque fea ;), se explica bastante bien por sí sola. Dentro de un article, tenemos un header dónde poner el título e información sobre el autor, la categoría y la fecha de publicación. La fecha la pondremos en un elemento time (un poco más adelante veremos los detalles).
El footer dentro del article podemos utilizarlo para poner información relacionada como pueden ser las etiquetas, enlaces a posts relacionados, enlaces para compartir, etc:
Un footer típicamente contiene información sobre su sección como quién lo escribió, enlaces a documentos relacionados, información de copyright y similar.
Si optas por poner los típicos enlaces de post anterior/siguiente, un elemento nav sería lo suyo. Esta estructura, por supuesto, no es cerrada ni fija y está sujeta a interpretaciones; siempre que se cumpla con las descripciones de cada elemento HTML5 lo estaremos haciendo bien. Por ejemplo, la información del autor puede estar en el footer pero también es correcto ponerlo en el header.
Comentarios
Los comentarios enviados por los usuarios, siguiendo estrictamente las especificaciones HTML5, pueden representarse mediante elementos article anidados en el article principal ya que son piezas de contenido relacionadas entre sí:
Cuándo se anidan elementos
article, los elementosarticleinteriores representan elementos que están en principio relacionados con el contenido delarticleexterno. Por ejemplo, una entrada de un blog en un sitio que acepta comentarios enviados por los usuarios podría representar los comentarios como elementosarticleanidados en el elementoarticleque contiene la entrada del blog.
En definitiva, el post de un blog podría tener esta pinta en HTML5:
<article>
<header>
<h1>Un post de mi blog</h1>
<time datetime="2014-10-05">Hace tres días</time>
</header>
<p>El contenido de mi post.</p>
<section>
<h2>Comentarios</h2>
<article>
<header>
<p>Paco Fernández dijo:</p>
<p><time datetime="2014-10-10">Hace 15 minutos</time></p>
</header>
<p>Gracias por este magnítico post!</p>
</article>
<article>
<header>
<p>Araceli dijo:</p>
<p><time datetime="2014-10-08">Hace 2 días</time></p>
</header>
<p>A la porra, vaya tostón!</p>
</article>
</section>
</article>header. Esta información podría ponerse en el footer siendo igualmente apropiado. Elegir uno u otro es, actualmente, una cuestión puramente de preferencia.Y ya que estamos con los comentarios, en el formulario de envío deberías utilizar las herramientas de validación que ofrece HTML5. ¿no te parece?
El elemento time
El elemento time se utiliza para poner la fecha de publicación de los posts, de los comentarios o cualquier otra información de fecha y hora. Se puede utilizar el formato que queramos. Por ejemplo:
<time>Hace 1 año, dos días y 6 minutos</time>
<time>8 de Abril de 1826</time>
<time>2014-01-03 14:36</time>Sin embargo, para que las máquinas lo entiendan bien, se debe poner la fecha y hora según el formato definido en el estándar ISO 8601 (YYYY-MM-DDThh:mm:ssTZD). Si no quieres perder el control sobre la forma en la que mostrar la fecha pero quieres que las máquinas lo sigan entendiendo, deberás utilizar la fecha ISO 8601 en el atributo datatime. Por ejemplo, las siguientes fechas serían leídas correctamente por las máquinas:
<time datetime="2024-07-13 09:00">El 13 de Julio de 2024 a las 9:00 UTC</time>
<time datetime="2024-07-13 09:00">Dentro de unos años</time>
<time datetime="2024-07-13 09:00">13 - Julio - 2014, 9 en punto</time>Creo que con esto he abarcado los elementos más importantes de un Blog en HTML5. Ahora tendré que practicar con el ejemplo e implementarlo en mi blog. Jejeje A ver si tengo un poco tiempo. Hecho.