> Faqs > Qué diferencia hay entre las etiquetas div, section, article...

Qué diferencia hay entre las etiquetas div, section, article...

Quisiera saber qué diferencia existe entre las etiquetas <div>, <section>, <article>, <main>... y creo que hay otras como esas.

Las uso una y otra y parece todo igual, las intercambio y en la página no veo ningún cambio apreciable.

¿Por qué motivo tenemos etiquetas HTML que hacen aparentemente lo mismo?

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Excepto <div>, todas las demás etiquetas que comentas son semánticas y se introdujeron en el HTML5. La semántica no tiene aplicación a la hora de visualizar la etiqueta, me refiero en su representación visual, pero puede servir a distintos sistemas a entender el contenido que se aloja en cada bloque de una página web.

Si usamos <div> a secas no estamos indicando a nadie el sentido o significado del contenido alojado en esa etiqueta. Nadie que no sea un humano y viendo el contexto del propio contenido acertaría a decir a ciencia cierta que ese <div> es un contenido importante, accesorio, si es un pie de página o un navegador de secciones.

Son embargo, si usamos <main> por ejemplo, estamos indicando que esa etiqueta es un contenido principal. Si usamos <article> podemos indicar que es un artículo, puede que uno de varios ítems que se representen en un listado. Por ejemplo <section> es una sección de contenido sobre algo que se se está hablando... y así.

Ejemplos de sistemas que se pueden beneficiar del uso de etiquetas semánticas son navegadores para invidentes, que pueden infomar al usuario del sentido que hace cada contenido. Pero, sobre todo, los buscadores como Google por ejemplo se benefician mucho de las etiquetas semánticas a la hora de interpretar el contenido de una página. Asço Google será capaz de saber mejor el valor de cada bloque y la función que realiza dentro de la web.

Hay un artículo ya publicado que explica el valor y significado de las etiquetas semánticas del HTML5.

Alberto
150 7 11 8

Aunque las etiquetas aparentemente tienen el mismo funcionamiento y de hecho en la práctica se renderiza de la misma manera, son diferentes.

La cuestión en este caso es la semántica. cada etiqueta tiene un significado diferente y se tiene que usar según corresponda.

div es algo genérico que sirve para todo, realmente esta er etiqueta no tiene semántica.

Las que sí tienen semántica son article, sectión, main.

Salva
30 1