Etiqueta div y span en HTML

En esta lección aprenderemos a utilizar correctamente la etiqueta <div> y la etiqueta <span>, veremos cómo se utiliza y sus diferencias, además, veremos ejemplos concretos sobre los usos correctos de estos elementos HTML.

Características y diferencias de etiquetas <div> y <span> en HTML

La principal deferencia entre las etiquetas <div> y <span> es que en el primer caso se define como un elemento en bloque y en la segunda como un elemento en linea. A continuación veamos con ejemplos de código HTML como se comportan.

Etiqueta <div> en html

Para qué sirve la etiqueta div, la etiqueta <div> viene de división, prácticamente funciona y sirve de contenedor de bloque, es decir puede contener uno o varios elementos HTML dentro de ella, es bastante utilizada para agrupar varios elementos que luego serán apuntados con CSS con la finalidad de dar un estilo adecuado a dicho grupo, o también puede servir para organizar mejor nuestra página web.

Ejemplos de etiqueta div en HTML

A continuación veamos un ejemplo concreto, se trata de tres bloques construidos con la etiqueta <div>, claramente diferenciados por el color de fondo de cada bloque:

<div id="rojo" style="background-color: red;">
  
<h1> Titulo en contenedor rojo</h1><br>
  
<div id="azul" style="background-color: blue;">
<p> Este es un párrafo dentro de un contenedor div con fondo rojo y que a su vez esta dentro de otro contenedor div con fondo azul</p>
</div>
  
  <br><br>

</div><br>

<div id="verde" style="background-color: green;">
<h2> Subtitulo en contenedor verde</h2>
<img src="gatito.jpg" width="250px" height="180px"/>
<p> Este es otro parrado que esta dentro de un contenedor  div con fondo verde</p></div>

Resultado:

Resultado del ejemplo div:

Como se observa, el bloque <div id="rojo"> posee un color de fondo rojo, además este bloque rojo contiene un título h1 y otro bloque <div id="azul"> color de fondo azul, después de ella se presenta otro bloque <div id="verde"> cuyo color de fondo es verde, este bloque contiene un subtítulo h2 seguido de una imagen y un párrafo al final.

Etiqueta div para qué sirve en HTML

La etiqueta <div> sirve de contenedor de bloque, puede contener varios elementos HTML, incluso otros elementos div a la vez. Cabe señalar que antaño se solía utilizar para organizar las secciones de una página web tales como la cabecera, la navegación o menú, el cuerpo de página, los pies de página, barras laterales, etc. Se le solía poner un atributo id o class con su respectivo nombre como: cabecera, cuerpo, footer, etc. para luego darle estilo con CSS.

Sin embargo desde que apareció HTML5 es mejor emplear las nuevas etiquetas html5 como: <header>, <article>, <footer>, etc. para organizar la estructura de una página y eso lo aprenderemos en su respectiva lección en el curso de html5.

Necesito que me entiendas, Html5 es una versión de HTML que ha incorporado nuevos elementos con los que se pueden definir directamente bloques que anteriormente teníamos que construirlos con la etiqueta <div> e identificarlos, así que html5 ha solucionado gran parte de estas molestias. Pero <div> es todavía bastante utilizado para agrupar elementos y construir bloques que necesitamos para personalizarlo posteriormente.

Etiqueta <span> en html

La etiqueta <spam> también funciona como un contenedor pero en este caso será un contenedor en línea. Por ejemplo para destacar una palabra o expresión dentro de un párrafo utilizaremos la etiqueta <span> para encerrar esa palabra o expresión y luego ponerle un estilo mediante un atributo. O también podemos ponerle un identificador, ya sea id o class para luego apuntarlo y maquetarlo con CSS.

Ejemplo de etiqueta span html

Ejemplo de código HTML empleando la etiqueta <span>, en este caso utilizaremos span para resaltar una fracción de texto dentro de un párrafo, de tal manera que el color de letra será de rojo y el fondo de color amarillo.

<p> Este es un párrafo en el que insertaremos un elemento span a continuación para diferenciarlo <span style="background: yellow; color: red;">Texto especial dentro de etiqueta span con fondo amarillo y color rojo</span> ese texto especial sigue dentro del párrafo y en linea, forma parte del párrafo, pero podemos especificar alguna característica </p>

Resultado del código HTML:

Como podemos observar el texto dentro de la etiqueta span ha sido resaltada en color rojo y fondo amarillo.

En resumen, la diferencia entre el div y span es que div se emplea para agrupar elementos html en un bloque en cambio span sirve para agrupar dentro de una línea.

[popup_anything id=»4350″]