IMPORTANCIA DE LA MAQUETACIÓN HTML
Si ya estás familiarizado con la estructura de HTML o a penas estás iniciando en este mundo, es normal que veas muchos proyectos donde se utilice mucho la etique <div/>, no obstante, te cuento que aunque tiene ventajas excepciones puesto que es un contenedor que por defecto maneja un display block, al que con ciertas propiedades podemos estilzarlo a nuestro gusto y a los elementos dentro de estos, organizarlos con ciertos tipos de display como el flex y el grid, la realidad es que HTML tiene etiquetas para cosa que deseemos realizar. Desde poner un titulo, hasta realizar un formulario o incluso, abrir ventajas emergentes.
Resulta que el navegador de Google y otros, priorizan a las páginas que tienen maquetados que se dan a entender con el motor del mismo. No es lo mismo por ejemplo, un documento HTMl estructurado solo con div, que si bien, visualmente podemos tener un buen resultado, si investigamos un poco podemos notar que hay más etiquetas que pueden proporcionar el mismo resultado y un extra: UN BUEN SEO. Resulta que los navegadores priorizan aquellas páginas web que tienen buen maquetado, lo que se conoce como maquetado semantico. En ese orden, no es lo mismo esto:
<div><div><label/><input/></div></div>A esto:
<form><div><label/><input/></div></form>El navegador o browser comprende que no es solo un div, sino que es un espacio de la página web donde hay un formulario.
Ahora bien, se entiende que son muchas las etiquetas para aprenderlas, y bueno, hay que ser conscientes de algo, los programadores no nos aprendemos las etiquetas de memoria, las guardamos en documentación o en repositorios para hacer uso de ellas cuando las necesitemos, es por ello que HTML Reference IO provee una lista de las etiquetas HTML, el tipo de display que trae por default y ejemplos, de modo que, podamos recurrir a ellas y no morir en el momento de hacer más semántico nuestro documento y posicionarlo en los buscadores.
