En esta lección aprenderemos a utilizar correctamente la etiqueta y la etiqueta , 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:
Lo veremos así:
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.
Uso de la Etiqueta <div>
La etiqueta 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.
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 e identificarlos, así que html5 ha solucionado gran parte de estas molestias. Pero es todavía bastante utilizado para agrupar elementos y construir bloques que necesitamos para personalizarlo posteriormente.
Etiqueta <span> en html
La etiqueta 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 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>
Ejemplo de código HTML empleando la etiqueta , 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.
Y veremos:
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:
- div se emplea para agrupar elementos html en un bloque
- span sirve para agrupar dentro de una línea.