La etiqueta <div> es un contenedor genérico y neutro (sin significado semántico). Sirve para contener otras etiquetas y poder hacer un tratamiento conjunto, por ejemplo darles un estilo, asignarles un identificador o estructurar el contenido. Normalmente se utiliza para agrupar etiquetas de bloque como párrafos, tablas, listas, nav, section, article, etc.
Si aplicamos una etiqueta <div> sin mas, no producirá ningún efecto. Los navegadores no le asignan ningún formato por defecto. Tampoco los buscadores de darán ningún significado.
Uso de la etiqueta <div>.
Hasta la aparición de las etiquetas semánticas (nav, section, article, etc.), se ha venido utilizando la etiqueta div para estructurar las páginas web. Ahora la recomendación oficial es no utilizar la etiqueta div cuando sea posible utilizar una etiqueta semántica, dejando el uso de la etiqueta div como último recurso para dar estructura a la página web. La razón para este cambio es que la página web tendrá un mejor significado semántico.
Por lo tanto, el uso de la etiqueta div se centrará en cuestiones de formato. Otro uso importante de la etiqueta div es para identificar partes de la página a efectos de programación. Por ejemplo, para ocultar/mostrar contenido, menús desplegables, animaciones, etc.
Las etiquetas div no pueden utilizarse dentro de un párrafo (p), ni encabezados (h1, h2, ...), ni texto preformateado (pre). Tampoco dentro de elementos en-línea como (strong, em, span).
No tiene mucho sentido utilizar la etiqueta div para agrupar una única etiqueta, en ese caso es mejor dar el formato directamente a esa etiqueta.
Por ejemplo, esto no sería recomendable:
<div><p>En internet hay muchos cursos gratuitos.<p></div>
La etiqueta <span> se utiliza para delimitar un texto corto con el fin de darle formato, o realizar otro tratamiento sobre él. Esta etiqueta no tiene significado semántico, por lo tanto no indica que el texto tenga más o menos importancia. Los navegadores no dan ningún formato por defecto. Como siempre, para dar formato se utilizan las hojas de estilo. La etiqueta <span> es de tipo display inline por lo que no introduce ningún salto de línea, mientras que la etiqueta <div> si lo hace.
Por ejemplo, para poner el fondo de color utilizaremos un estilo .fondo_amarillo { background-color: yellow }
<p> El futbolista es el deportista mejor <span class="fondo_amarillo">pagado</span>.</p>
El futbolista es el deportista mejor pagado.
La etiqueta span está pensada para delimitar un texto corto dentro de un párrafo u otro elemento, si el texto es largo y va a ocupar varias líneas, lo más lógico es utilizar una etiqueta p, ya que ese texto será un párrafo en si mismo.
 Ejercicio propuesto de la Unidad 12 |
 Prueba evaluativa de la Unidad 12 |
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.