Saltar al contenido

La diferencia explicada en 1000 palabras o menos

febrero 10, 2022
Span vs. Div The Difference Explained in 1000 Words or Less.jpegkeepProtocol

Si recién está comenzando a familiarizarse con HTML, probablemente haya aprendido a usar elementos HTML rudimentarios para crear una página, como

,

y

, y .

Estas etiquetas se pueden encontrar en toda la web. Pero, vaya a cualquier sitio web grande, abra el código fuente y es posible que vea algo desconocido: un montón de anidados

y etiquetas Si no está seguro de para qué sirven estos elementos, le resultará más difícil entender cómo se codifican las páginas web. Y no ayuda que div y span hagan cosas similares.

Aún así, los elementos div y span son muy comunes y probablemente se usan en la mayoría de las páginas que visitas. Entonces, como experto en sitios web en crecimiento, debe saber la diferencia entre ellos si desea comprender la estructura y el contenido de la página. En esta guía, le mostraremos qué hace cada uno y cómo puede aplicarlos a sus páginas correctamente.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Analicemos cada elemento con más detalle para comprender mejor en qué se diferencian.

división

El elemento div (división) es un elemento genérico a nivel de bloque, que se usa con mayor frecuencia para dividir el contenido de la página en bloques. Un elemento de bloque es un elemento de página que comienza una nueva línea y tiene un ancho igual a la página completa o al contenedor principal.

Muy a menudo verá divs utilizados para agrupar párrafos, imágenes, encabezados y enlaces relacionados. Por ejemplo, un artículo de tres párrafos puede encerrarse en un div y un menú de navegación que contiene enlaces puede estar encerrado en otro div. El uso de divs de esta manera hace que sea más fácil identificar diferentes secciones de una página y aplicarles estilos con CSS.

Un ejemplo básico de un elemento div en HTML se ve así:

 
<div id=“paragraphs”>
    <p>This is my first paragraph.</p>
    <p>This is my second paragraph.</p>
    <p>This is my final paragraph.</p>    
</div>

lapso

El elemento span es un elemento en línea genérico, que normalmente se usa para aplicar estilo a una parte del contenido en línea. Un elemento en línea no comienza una nueva línea y solo ocupa tanto espacio en la página como su contenido. Las etiquetas de extensión se utilizan en pequeños segmentos de texto, enlaces, imágenes y otros elementos HTML que aparecen alineados con el contenido circundante.

Un ejemplo básico de un elemento span en HTML se ve así:

 
<p>This is a paragraph with <span id=“special-text”>a little something extra</span> inside it.</p>

Para resumir, una etiqueta div crea un elemento a nivel de bloque mientras que una etiqueta envuelve un elemento en línea. A pesar de sus diferencias, ambos se utilizan para agrupar elementos similares con fines estructurales y/o de estilo.

Ejemplos de intervalo frente a div

Veamos ahora un par de ejemplos de span y div que demuestran sus diferencias y aplicaciones.

Aquí hay una instancia de dos

etiquetas, seguidas de dos etiquetas Apliqué un color de fondo único a cada elemento para mostrar su tamaño; observe cómo los div ocupan todo el ancho de la página, mientras que las etiquetas de extensión solo ocupan el espacio de su contenido. Además, cada div agrega un salto de línea después de su contenido, pero los elementos de intervalo no lo hacen.

ver la pluma lapso vs div 1 de Christina Perricone (@hubspot) sobre CódigoPen.

El siguiente es un ejemplo más representativo de cómo verá que div y span se usan juntos en las páginas web. Aquí, los divs separan fragmentos más grandes de contenido y abarcan segmentos de ajuste dentro de estos divs.

ver la pluma lapso vs div 2 de Christina Perricone (@hubspot) sobre CódigoPen.

Cuándo usar span vs. div

Como se muestra en los ejemplos anteriores, div y span son útiles para diseñar y estructurar páginas web. Es fácil asignar atributos de identificación o clase a estos elementos y orientarlos con reglas CSS. Por lo general, verá etiquetas de intervalo utilizadas para diseñar contenido en línea como una palabra en una línea de texto. Las etiquetas div, por otro lado, deben diseñar secciones más grandes de contenido o actuar como un contenedor para elementos secundarios. Las páginas web más complejas a menudo hacen un uso intensivo de divs, anidándolos entre sí para representar diferentes regiones y subregiones de la página.

Dada la conveniencia de span y div, es tentador usar estas etiquetas cada vez que desee agregar un nuevo elemento de página, por ejemplo, usando un

etiqueta en lugar de una

etiqueta. Sin embargo, en realidad se considera una mejor práctica en el desarrollo web limitar su uso tanto como sea posible.

¿Por qué sería eso? Span y div son elementos «genéricos», lo que significa que ninguno de los elementos transmite significado sobre el contenido que contiene o su propósito. Podrías poner muchas cosas dentro de un

o un etiqueta, pero no está claro en la etiqueta en sí cuál es el propósito del elemento o el contenido dentro.

Lo contrario de un elemento genérico es un elemento semántico, cuyas etiquetas comunican el significado del elemento. La mayoría de los elementos HTML son semánticos:

, ,

a

y son algunos ejemplos comunes. Los elementos semánticos facilitan que los rastreadores de los motores de búsqueda, las tecnologías de asistencia como los lectores de pantalla y los desarrolladores web interpreten su página web, y son mucho más ordenados que un laberinto de palabras sin sentido.

y etiquetas

Cada vez que esté considerando un div o un espacio para separar una parte de su página, primero considere si hay un elemento HTML semántico adecuado que pueda usar. HTML5 introdujo varias alternativas div a nivel de bloque que son útiles para las regiones de página comunes, que incluyen , , y . También hay elementos semánticos en línea para texto como , (énfasis), y (cita).

div y span: Conozca la diferencia

Los divs y spans se encuentran entre los elementos HTML más comunes, y por una buena razón: le permiten estructurar y diseñar sus páginas HTML exactamente según sus especificaciones. Aún así, ambos tienen su propio propósito específico, y comprender las diferencias entre ellos garantiza que los use correctamente y solo cuando sea necesario. En última instancia, esto le ahorrará mucha confusión y código desechado en el futuro.

Nueva llamada a la acción