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:

Te recomendamos leer:  Atributos en HTML - qué son, para qué sirven y cuáles son
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:  Etiquetas para texto HTML y formatos HTML

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
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
1 año 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.

Alex
Alex
Reply to  Lahisa
1 año atrás

Hola Lahisa 🙂
Entiendo tu pregunta, pero el ejemplo específico que indicas no está claro…
Para apuntar un elemento dentro de otro con CSS, puedes hacer uso de los selectores, puedes revisarlas aquí: https://desarrolladoresweb.org/css/selectores-css-reglas-y-sintaxis/
Te recomiendo el tutorial de CSS.
Saludos.

Barbara
Barbara
1 año atrás

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

Alex
Alex
Reply to  Barbara
1 año atrás

Así es, para apuntar con CSS, puedes usar un CLASS y establecer el estilo que deseas para dichos span…

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

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

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

A continuación sigue aprendiendo con el curso de HTML5 para completar el curso.

Curso de HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5
4.- Estructura de una pagina HTML5
5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5