Bueno un placer hacer este breve compilado de etiquetas Html5 que dotan de un significado contundente y preciso a los elementos estructurales de una web.

Compilado etiquetas HTML5 – Maquetación

La etiqueta <section> corresponde a un contenido que guarda relación entre sí y corresponde a una sección genérica de contenido dentro de un documento, lo que se quiere destacar, el tema relevante que se desarrollará. Estos bloques son temáticos es decir giran alrededor de un tema concreto.

Si el único motivo para encerrar un contenido es aplicar los mismos estilos css, lo idóneo sería seguir aplicándole un <div>.

Una sección puede componerse de varias secciones como si una empresa de tours mostrara en su portada los tours que realiza primero los de Colombia, luego los de México y posteriormente los de Argentina. Sería pensable suponer que en el inicio mostrara una sección grande que contuviera otras tres secciones.

La etiqueta <article> sería como la división de bloques de contenido que pertenecen a una sección. Bloques de noticias, novedades, o los mismos tours. Un ejemplo podría ser un mensaje de un foro, el artículo de una revista o periódico, un comentario de un usuario a una entrada de blog. Suele usarse para fragmentos independientes de contenido.

La etiqueta <header> encierra lo que comúnmente se conoce como cabezote. Y igual sucede con el <footer> o parte inferior de la web, conocido en español como “pie de página”.

Otra etiqueta de diagramación es <nav> la cuál encierra los elementos del menú, según las directrices de html5 es recomendable sólo usar un bloque tipo nav en una página. Sirve para establecer con facilidad los comportamientos del menú en los diferentes dispositivos móviles (web responsive).

Otra etiqueta destacada es el <aside> la cual establece bloques de contenido complementarios que no son relativos a la información primordial de la sección como bloques publicitarios, enlaces externos, citas, un calendario de eventos.

Si creamos varias etiquetas <h1><h2><h3> el navegador consideraría que cada una de ellas es una sub-sección para evitarlo cuando se van a emplear varias etiquetas de títulos dentro de una sección hay que emplear la etiqueta <hgroupe>. Tan sólo se debe emplear cuando tenemos más de un títulos en una sección. En este caso por ejemplo no se debe emplear:

<section>
<h1>Tour de aventura</h1>
<p>Aumenta la adrenalina</p>…
</section>

En este caso si es correcto, adecuado, indicado, justo y necesario:

<section>
<hgroup>
<h1>Descansa te lo mereces</h1>
<h2>Hotel Tropical</h2>
</hgroup>
<p>Playas privadas para tu intimidad.</p>…
</section>

Las etiquetas <big> = Texto sea más grande
<small> = Reduce el tamaño del texto.
<mark> = Texto resaltado
<b> = Negrita
<em> = Itálica

Y bueno para finalizar una de las ventajas de emplear etiquetas html5 es su valor semántico, incorporando etiquetas que permiten clasificar y ordenar en distintos niveles y estructuras el contenido. Lo que es muy positivo en términos de SEO y accesibilidad. Espero sea de valor y utilidad.