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 tutoriales en linea 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>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:
Sitio Web en HTML5 – Home, Inicio.
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 Sitio Web en HTML5</title>
</head>
<body>
<header>
<h1>Mi Sitio Web en HTML5</h1>
(<nav></nav>)
</header>
(<nav></nav)
<main>
<article>
<header>
<h2>Título de mi segundo post</h2>
<time datetime="2019-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="2019-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 article representa 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. Cada article debería estar identificado con un heading (elemento h1-h6) anidado dentro del elemento article.
...dev.w3.org/html5/spec/Overview.html#the-article-element
Así pues, el elemento article es el mejor para marcar un post y la estructura semántica en HTML5 sería:...dev.w3.org/html5/spec/Overview.html#the-article-element
Sitio Web en HTML5 – post
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.
...dev.w3.org/html5/spec/Overview.html#the-footer-element
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....dev.w3.org/html5/spec/Overview.html#the-footer-element
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 elementos article interiores representan elementos que están en principio relacionados con el contenido del article externo. Por ejemplo, una entrada de un blog en un sitio que acepta comentarios enviados por los usuarios podría representar los comentarios como elementos article anidados en el elemento article que contiene la entrada del blog.
...dev.w3.org/html5/spec/Overview.html#the-article-element
En definitiva, el post de un blog o sitio web podría tener esta pinta en HTML5:...dev.w3.org/html5/spec/Overview.html#the-article-element
<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="2019-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="2019-10-08">Hace 2 días</time></p>
</header>
<p>A la porra, vaya tostón!</p>
</article>
</section>
</article>Nota: en el código de ejemplo anterior el autor y fecha de los comentarios se ponen en un elemento 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>2019-01-03 14:36</time>Para mayor información los datos estructurados de schema
<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 - 2019, 9 en punto</time>
Comentarios