1

Como usar html semántico para hacer el post de un blog

Algunas etiquetas del html semántico son ideales para realizar la entrada de un blog, veamos como podemos utilizarlas para ello agregandole algo de estilo, nuestra intención será lograr un diseño parecido a este:

Empecemos por la estructura básica, si usas visual studio code puedes hacerla escribiendo html:5 en un archivo y presionando la tecla tab .html también añadamos una etiqueta style

Una vez tengamos la estructura básica podemos empezar por la estructura semántica, lo que queremos hacer incluye:

  • Un título para simular que estamos en un blog con varios artículos de la misma temática.
  • Una sección principal que engloba todo el articulo del post, esta tiene el texto, una imagen y un pequeño texto para la imagen.
  • Un footer donde pondremos información del autor de la página.

En ese orden de ideas, empecemos por la sección principal, para esto usaremos las etiquetas header, main, section y article

  • La etiqueta header define el contenido que está en la parte superior de la página, suele tener información que se repite en distintas páginas conectadas como por ejemplo, una barra de navegación, en este tutorial no añadiremos una pero pondremos un título con <h1>, simulando que tendremos distintos blogs de un mismo tema en está página.
  • La etiqueta main se usa para el contenido principal de una página, en el caso del blog que estamos simulando, los posts irían dentro de esta etiqueta.
  • La etiqueta section se usa para separar distintos elementos o partes de una página, cada artículo o post de este blog iría en una de estas, así que utilizamos una para englobarlo.
  • La etiqueta article se suele usar para contenido independiente como un texto (muchas veces dentro de una sección pero no tiene que ser así necesariamente) en este caso aquí es donde estará el post en si, le ponemos un titulo con <h2> y usamos <p> para cada párrafo.

Por ahora nuestra página se ve así:

Ahora, agreguemos un footer, esta etiqueta es usada para crear pies de página, en estos se suele poner información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados, en este caso pondremos algo de información del autor.

También añadamos la imagen, en html semántico podemos usar la etiqueta figure para encapsular contenido multimedia de todo tipo y también la etiqueta figcaption para información adicional de este contenido, en este caso lo pondremos dentro de nuestro article.

Con esto ya tenemos todos los elementos que queremos y solo queda estilizar, no entraré mucho en detalles en esta parte ya que el tutorial es sobre html semántico más que css.

Mi imagen es gigante así que empezaré por darle un tamaño más controlado con width y height, también centraré el titulo en el header y le pondré display flex al section y a main para crear la disposición deseada, también cambiaré el font-size de todo el html para usar rem como unidad de medida de la fuente

Ahora le daré un width y un height al article y figure que están dentro de nuestro post especifico usando porcentajes, también voy a sacar el footer del main ya que tal vez sea mejor para estilizarlo.

Ahora voy a jugar con el tamaño y disposición de la letra de article para que se vea más beneficiado por la estructura general.

Con eso, ya tenemos la estructura deseada, y solo queda añadir color y margenes pero eso queda en tus manos, te dejaré una imagen de que como lo estilicé para que lo tengas como inspiración y trates de replicarlo con lo enseñado en el curso y otros tutoriales o lo estilices de alguna otra forma que te parezca mejor.

Se ve que no soy el mejor en diseño gráfico pero logré la estructura que quería, si fuera una página real, gracias al html semántico sería accessible y tendría un buen SEO, recuerda usarlo siempre que puedas.

Escribe tu comentario
+ 2