Aprendiendo HTML, diferencias entre div y span

Dentro del diseño web, la gente que empieza a familiarizarse con la maquetación web, o creación de sitios web llega a la siguiente pregunta: ¿Cuál es la diferencia entre div y span? La verdad es que a pesar de que el uso que le damos es diferente, la gente suele tener cierta confusión, por eso en esta ocasión vamos a ver las diferencias fundamentales de usar las dos etiquetas, espero les guste y dejen sus comentarios sobre el tutorial.

¿Qué son las etiquetas div y span?

Las etiquetas <span> y <div> son aquellas que nos permiten contener algún elemento más dentro de ellas, es decir, actúan como contenedores, por lo que a simple vista no se ven. Al ser contenedores se abren y se cierran las etiquetas, <div></div> y <span> </span>, sin embargo, a pesar de que son contenedores tienen funciones muy distintas.

¿Cuales son las diferencias de div y span?

Ambas etiquetas tienen las mismas propiedades, pero la diferencia varia en la función que tienen, ya que mientras la etiqueta span trabaja sólo como contenedor de línea, la etiqueta div trabaja como contenedor de bloque. La siguiente imagen ejemplifica lo anterior:

La etiqueta span sólo funciona como contenedor de una línea, es decir, no se puede ampliar para ocupar un párrafo, por ejemplo, lo que si puede hacer div, puesto que puede expandirse lo que sea necesario, es quizá la razón más clara por la que para crear un sitio web, la estructura básica comienza con capas div.

Entonces ¿cuando debo usar span?

Hay varios usos en cuanto a la implementación de la etiqueta span, por ejemplo:

1. Edición de frases en párrafos: a veces queremos aplicar estilos a frases específicas de un párrafo o texto, por ejemplo:

Inicio<span class=”highlight”>Texto iluminado.</span> Fin del texto

2. Creación de botones: esta es una buena idea, usar span para poder dar un padding a un enlace, creando el efecto de botón

3. Agrupar diferentes elementos en una línea: Por ejemplo, aunque no es tan común, podemos definir y acomodar elementos como imágenes, textos o enlaces en una sola línea, aplicar estilos para cada uno de ellos, y mostrarlos en línea sin que salten de una línea a otra, esto ayuda a tener una alineación buena y no tener contenido desalineado.

¿Cuándo se usa div?

1. Maquetación web: para crear la estructura de tu sitio web, al poder contener todos los elementos es fácil crear la forma que va a tener tu sitio usando hojas de estilo.

2. Crear contenido flotante: es la mejor opción si quieres crear un menú, imagen o algún tipo de elemento flotante ya que se ajusta muy bien a la propiedad CSS float, por lo que si ves algún elemento flotante o que se mueve es porque tiene una capa.

3.  Contenedor de más contenedores: es curioso pero puedes poner un div dentro de otro div y así sucesivamente, aunque para ello no hay que exagerar tampoco. Otros contenedores que podemos colocar con p, span y cualquier tipo de elemento HTML.

Y es así como ahora ya sabemos las diferencias entre div y span, espero les haya gustado y si tienen dudas o comentarios pueden comentar debajo del post.