HTML5, pon un 3.0 a tu página web
Hoy en día, con el uso correcto de las etiquetas html5 podemos construir una web semántica, identificando cada una de sus partes y ofreciendo un diseño web con significado.
Anteriormente, se utilizaban los contenedores div para todo porque no teníamos, al alcance de nuestras manos, etiquetas que tuviesen significado por sí mismas. Aun así, han pasado los años y los div siguen vivos, siendo la base de la estructura de la web mientras no exista ninguna etiqueta que represente mejor el contenido en ese momento.
Por lo tanto, html5 nos proporciona unos tags nuevos que permiten mejorar la semántica de nuestra web, como es el caso de <header>, <main>,<footer>, <nav>, <article>, <section> y <aside>.
Un ejemplo de estructura en html5 podría ser:
<header></header>
<nav></nav>
<main>
<section>
<article>
<header> </header>
</article>
<section>
</main>
<aside></aside>
<footer></footer>
A continuación, os explicamos de forma breve la función de estos nuevos tags:
El <header> constituye la cabecera de la página y <nav> el menú de navegación que permite a los buscadores detectar la estructura básica de la págian web.
La etiqueta <main> contiene el cuerpo principal y puede estar dividido en secciones <section>. Por otro lado, el tag <article> representa un artículo y este a su vez puede contener un <header> y otras etiquetas. La etiqueta <aside> hace referencia a la barra lateral de la web y el <footer> al pie de página.
Gracias al uso de las etiquetas semánticas de html5, el contenido de nuestra web estará orientado a mejorar su posicionamiento SEO, obteniendo mejores resultados en Google.