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:
En ese orden de ideas, empecemos por la sección principal, para esto usaremos las etiquetas header, main, section y article
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.