CSS: Div y span

Los elementos div y span fueron introducidos en la especificación de HTML 4 para proveer un mecanismo genérico para agrupar y dar estructura a los documentos.

el tag div

Esta etiqueta se encarga de crear una capa, que es un elemento de bloque que sirve de contenedor a otros elementos de bloque e inline.

El uso de las capas viene dado por dos motivos: para organizar semánticamente la páginay para maquetar. Por ejemplo, el layout típico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral4 y la del pie de página.

Mediante CSS podrá controlarse la disposición de las capas.

El elemento div es un contenedor en bloque (block) y span es un contenedor en linea (inline).

Un elemento id y/o class suele asociarse con el div o span para utilizarlo como ancla para estilos css. Este conceptio surgió cuando los desarrolladores reemplazaron los layouts creados con tablas por layouts CSS.

Sin embargo, ha habido un abuso de los elementos div hasta el punto de casi crear su propio lenguaje compuesto básicamente de elementos div anidados.

El elemento div es semánticamente neutro: no tiene ningún otro significado a parte de ser un contenedor. Debe usarse cuando no exista otro elemento que pueda actuar como contenedor, no como reemplazo de elementos con un significado reconocido y aceptado, como los encabezados, párrafos, listas, etc.

El tag span

El tag <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.

Para su correcta comprensión, supóngase la siguiente cita:

<p>El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p>

Se quiere resaltar en rojo las palabras 'saludable', 'rico' y 'sabio'. La solución consiste en utilizar el atributo </span>. A cada elemento span se le añadirá el atributo class, que podría definirse así en nuestra hoja de estilo:

.destacado-en-rojo { color:red; }

Una vez definida la clase CSS el resultado HTML sería el siguiente:

<p>El que pronto se acuesta y pronto se levanta, es hombre <span class="destacado-en-rojo>saludable</span>,
<span class="destacado-en-rojo>
rico</span> y
<span class="destacado-en-rojo>sabio</span>.</p>

Y el resultado en el navegador:

El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO