Etiqueta div y span en HTML

Anterior
Avanzar

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:

Te recomendamos leer:  Etiquetas para texto HTML y formatos HTML
etiqueta div en html
Imagen utilizando la etqueta div en html

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.

Te recomendamos leer:  Atributos en HTML - qué son, para qué sirven y cuáles son

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:

etiqueta span en html
Imagen de párrafo con etiqueta span 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.

lecciones HTML
Anterior
Avanzar
5 1 votar
Calificación
guest
4 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Lahisa
Lahisa
3 meses atrás

Como le doy estilo a un span dentro de un div? es decir tengo:
Phasellus eu velit sed lorem sodales egestas. Ut feugiat. Donec porttitor, magna eu varius luctus, metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. Maecenas dictum, nibh vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus. y le tengo que dar un style al spam.

Barbara
Barbara
2 meses atrás

Hola, supongo que al span deberías ponerle un class para así desde css hacer la diferencia en eso que has remarcado.

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

Aquí dispones del temario completo del curso para aprender HTML desde cero.

Temario HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML