Anatomía de un post

La anatomía del post es el esqueleto que lo conforma y le da formato y sentido al contenido de éste dentro de tu blog y para los buscadores y lectores de texto.

Ejemplo de la estructura de un post.

Contenedor

Según la especificación oficial de HTML5 los posts deben estar contenidos en un elemento <article>. Aquí adentró ira todo el texto bien marcado, la cabezera del articulo, las secciones del texto, el footer del artículo, y los comentarios.

Header

No solo el blog tiene un header general si no que también cada post debe tener su propio header que comúnmente contiene el título, la fecha, las etiquetas y el autor del post. El elemento para el header debe ser, por supuesto, un <header>.

Título

El título debe ir en un elemento <h1>, como lo expliqué en una entrada anterior, aunque hay quienes prefieren usar <h2>.

Fecha, etiquetas y autor

Los metadata del post como la fecha, el autor y las etiquetas deben estar antes o después del título pero en un elemento diferente, ya que no hacen parte de éste, pero dentro del header.

Pueden tener cada uno su propio contenedor, o pueden estar todos en el mismo bloque en linea.

Cuerpo

El cuerpo es todo el contenido actual del artículo: texto, imágenes, y todo lo que le quieras poner. Debe estar preferiblemente dentro de un elemento <section>.

Secciones

Cada Sección dentro del cuerpo del post debe estar marcada con un elemento <section> (obviamente) y debe empezar con un subtítulo.

Las secciones se usan para agrupar semanticamente contenido relacionado, en este caso las usamos para agrupar el texto con su título o subtítulo.

<section>
    <h1>Este es el título</h1>
    <p>Este es el texto que pertenece al título h1 y todo lo que esté dentro de esta sección también.</p>
    <section>
        <h2>Este es un subtítulo</h2>
        <p>Este texto pertenece al anterior subtítulo.</p>
    </section>
</section>

Párrafos

Los párrafos deben estar contenidos en elementos <p> y separados entre ellos únicamente por este mismo elemento y no con la etiqueta <br>.

Imágenes

Las imágenes van dentro de elementos <figure> y dentro se debe usar el elemento <figure> cuando se quiera agregar un pie de foto.

Footer

Si se quiere se puede agregar un footer al post con el elemento <footer>. Éste puede contener información adicional del post, como el nombre del autor, la fecha, las etiquetas, enlaces de compartir, enlaces de navegación entre artículos, etc… cada uno en su propio contenedor preferiblemente.

Resultado

Poniendo en práctia esta información, la estructura HTML de tu post debe verse más o menos así:

0 comentarios