Las etiquetas div y span: contenedores para estilos

Ya conoces muchas etiquetas, cada una con su significado. Pero a veces solo quieres dar estilo a un fragmento de texto o a varios párrafos, sin agregar un significado especial. Por ejemplo, poner un fondo rojizo a las «enfermedades» que consideras más peligrosas.

Si el cambio es solo visual, ¿debemos evitar las etiquetas que aportan significado? Así es.

Para eso existen dos etiquetas sin un significado propio: <div>, de «division», y <span>. Son contenedores genéricos que sirven para agrupar otros elementos y darles estilo. Úsalos cuando no haya una etiqueta semántica más adecuada.

<div> y <span> no tienen una apariencia especial de forma predeterminada. Casi siempre se combinan con class para aplicarles estilos.

<div> suele agrupar elementos grandes, como varios párrafos, o servir de contenedor para distribuir la página. <span> se usa para fragmentos de texto pequeños: partes de palabras, palabras enteras o frases:

<article>
  <div class="highlight">
    <p>Somos dos párrafos bien destacados.</p>
    <p>¡Con un fondo amarillo!</p>
  </div>
  <p>Texto con <span>una frase destacada</span>.</p>
</article>

En este ejercicio usaremos <div> para agrupar términos y descripciones de una lista. En ese caso, no debe haber grupos sin contenedor dentro de <dl>. O envolvemos todos los grupos en <div>, o dejamos todos los <dt> y <dd> sin contenedores. Mezclar ambos formatos en una misma lista es un error.

Al terminar este ejercicio, puedes descargar el estado actual de nuestro sitio para principiantes desde este enlace.

Preparamos estilos para destacar texto y bloques. Puedes verlos en la pestaña style.css.