Estructura de un sitio Web en HTML5

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 Deg 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. ¿Imaginas 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 rio 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 rio) 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 s, 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:

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.

Comentarios

Los comentarios enviados por los s, 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 s 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:

<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>

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:
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>

Creo que con esto he abarcado los elementos más importantes de un Blog o sitio web en HTML5. Ahora tendré que practicar con el ejemplo e implementarlo en mi sitio web.