¿Cuándo se usa la etiqueta div?

¿Cuándo se usa la etiqueta div?

¿Cuándo se usa la etiqueta div?

La aparición de HTML5 y sus nuevas etiquetas semánticas ha provocado que la etiqueta de división div se utilice cada vez menos en nuestras páginas webs. Teniendo alternativas semánticas como header, section, aside, footer o main entre otras, es común que nos preguntemos para qué y cuándo se usa  la etiqueta div en estos momentos.

En la versión anterior de HTML, la etiqueta div se definía como un elemento de estructuración genérico para una página. Normalmente se usaban los atributos de id y clase para asignar nombres que representaran semántica mente de qué parte de división se trataba. Actualmente, la especificación de W3 define la etiqueta de la siguiente manera:

The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. W3 Specification 

(Traducción) El elemento div no tiene ningún significado especial. Se puede utilizar con los atributos “id”, “class”, “lang” y “title” para marcar una seminatica común a un grupo de elementos consecutivos.

Por tanto, esta etiqueta ha quedado relegada a un uso más minoritario y carece de semántica propia. Su uso actual es para estilizar con hojas de estilo contenidos de una web que carezca de etiqueta semántica. Supongamos que tengo un listado de artículos de compra en una web. El conjunto de todos los artículos probablemente sea una etiqueta de tipo <section> y cada uno de los artículos de compra sea representado por una etiqueta de tipo <article>. Pero cada artículo me gustaría que el fondo de cada artículo sea de color blanco para que el lector esté cómodo con la lectura del mismo, pero entre el blanco y el artículo me gustaría que tuviese un fondo de color lima de 5 píxeles de anchura y dos esquinas redondeadas. Probablemente para hacer este efecto dentro de la etiqueta <article> veamos la necesidad de invocar otra etiqueta auxiliar para estilizar más cómodamente. Aquí es cuando entra en escena la división <div>.

Espero que os haya podido haya servido este artículo para optimizar mejor vuestros sitios y vosotros ¿Cómo aplicáis la etiqueta div en vuestras páginas? ¡Espero vuestros comentarios!

Escribe un comentario