Dejé estos dos elementos HTML para luego de haber presentado los conceptos de CSS. Estas marcas se utilizan en conjunción con las hojas de estilo. Sin estas tiene poco sentido el empleo de estos elementos HTML.
Estos elementos "div" y "span" nos permiten agrupar un conjunto de elementos y aplicar reglas de estilo.
La diferencia entre estos dos elementos es que cuando utilizamos el elemento div produce un salto de línea previo y uno al final, es decir es una marca de bloque como lo son h1,h2,p etc. En cambio el elemento span no produce un salto de línea porque se trata de un elemento en línea como lo son a,em,strong,input etc.
Veamos un ejemplo creando una división (div) y la aplicación de algunas reglas de estilo, como así un elemento span.
Listar una serie de nombres y un bloque de comentarios para cada nombre. Indentar la primer linea de cada párrafo. Hacer que algunas palabras del párrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo:
<!DOCTYPE html> <html> <head> <title>título página</title> <meta charset="UTF-8"> </head> <body> <div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888;text-indent:20px"> Aquí <span style="background-color:#eeee00">comentarios.</span> Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. </p> <h3>Ana Rodriguez</h3> <p style="color:#888888;text-indent:20px"> <span style="background-color:#eeee00">Aquí comentarios.</span> Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. </p> </div> </body> </html>
El resultado en el navegador es:
Veamos como definimos los elementos span:
<span style="background-color:#eeee00">comentarios.</span>
Como podemos ver luego en el resultado de la página el texto "comentarios" aparece con un color amarillo de fondo. El resto del párrafo continúa inmediatamente a la derecha, es decir el elemento span no produce salto de línea. Para ver la diferencia con el elemento div pruebe de remplazar la palabra span por div y vea los resultados (recuerde cambiar tanto la marca de apertura como la de cerrado del span) Como verá el texto aparece en un bloque independiente.
El div agrupa todos los títulos y párrafos y define la propiedad background-color que es heredado por todos los elementos contendidos por el div:
<div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888;text-indent:20px"> Aquí <span style="background-color:#eeee00">comentarios.</span> Aquí comentarios. . . . . Aquí comentarios. Aquí comentarios. </p> </div>