Elementos span y div

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

Estos dos elementos de HTML no añaden nada al documento en sí.

Pero con CSS se pueden usar para añadir características visuales distintivas a partes específicas del documento.

Los elementos <div> y <span>, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (span) o en bloque (div)

<span> sirve para aplicarle estilo a una pequeña parte de una página HTML.

Con <div> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <span> y <div> es que con esta última podemos aplicar estilo a una parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta <div> tiene un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o justificado.

Recordar que los id's se referencian con el prefijo "#" y las clases con "."

Un id debe ser único y una clase puede ser referenciada por muchos elementos, incluso un elemento puede tener 2 clases.

Dentro de estos elementos <span> y <div> podemos poner distintos contenidos a los cuales se le dara una estructura con ayuda de los atributos class e id o estilos CSS.

Veamos uno ejemplos:

Caja 1 de 200px x 100px

Código utilizado:

<div style="width: 200px; height:100px; border: 1px solid #000000; color: #ffff00; text-align: left; background: #6699FF;">Caja 1 de 200px x 100px</div>

Caja 2 de 200px x 70px

Código utilizado:

<div style="width: 200px; height:70px; border: 2px solid #0000ff; color: #ffffff; text-align: right; background: #ff0000; float: right; ">Caja 2 de 200px x 70px</div>

Caja 3 de 200px x 100px con imagen dentro

Código utilizado:

<div style="width: 200px; height:100px; border: 3px solid #0000ff; color: #ffff00; text-align: left; background: #6699FF;"><img style="float: left;padding:5px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlp4RfKK78lWNsoDGrrQyviZOfsDZOrtbS6INr6b7uOwTbR_9f7Y08nObfdVb2FeyLnTZXn17hx89NYgW0wXnEdvBB1sqBdj1fb8V77VD8FqxIAUv0mN05nKChfZCx0plZnlqbi6_vYFRy/s1600/vkucfsb.png"/>Caja 3 de 200px x 100px con imagen dentro</div>

Caja 4 de 200px x 150px con menú

• página
• página
• página

Código utilizado:

<div style="width: 200px; height:150px; border: 3px solid #ffff00; color: #ffffff; text-align: center; background: #ccc;">Caja 4 de 200px x 150px con menú
<ul>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
<li><a href="#">página</a></li>
</ul>
</div>

En los ejemplos anterires yo puse el estilo directo en el div, pero también se puede poner afuera con los atributos class e id.

Ejemplo:

Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.

Código utilizado:

<div class="caja5"><img id="caja5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlp4RfKK78lWNsoDGrrQyviZOfsDZOrtbS6INr6b7uOwTbR_9f7Y08nObfdVb2FeyLnTZXn17hx89NYgW0wXnEdvBB1sqBdj1fb8V77VD8FqxIAUv0mN05nKChfZCx0plZnlqbi6_vYFRy/s1600/vkucfsb.png"/>Caja 5 de 250px x 100px con imagen dentro con los atributos class e id.</div>

CSS:

<style>
.caja5 {
width: 250px;
height:100px;
border: 3px solid #0000ff;
color: #ffff00;
text-align: left;
background: #6699FF;
}

#caja5 {
float: left;
padding:5px;
}
</style>

Si ponemos solo <div class="caja5"></div>

Se muestra la caja vacia sin contenido, pero con los estilos puestos en la clase caja5

También utilicé dos veces la misma clase, si fuese un id, eso no lo podría hacer.

El contenido dentro de un div o span puede ser muchas cosas, hasta otro div o span.


Leer también:

Guía de referencia CSS.
Manual HTML Básico.