Si recién está comenzando a dominar HTML, probablemente haya aprendido a usar elementos básicos de HTML para crear una página, como
,
y , y
Puede encontrar estas etiquetas en toda la web. Pero vaya a cualquier sitio grande, abra el código fuente y es posible que vea algo desconocido: una pila anidada
Aun así, div y span son muy comunes y es probable que se usen en la mayoría de las páginas que visitas. Entonces, como experto en sitios web en crecimiento, debe saber la diferencia si desea comprender la estructura y el contenido de un sitio web. En esta guía, le mostraremos qué hace cada uno de ellos y cómo puede aplicarlos correctamente a sus páginas.
lapso vs división en HTML
Span y div son elementos HTML generales que agrupan partes relacionadas de una página web. Sin embargo, tienen funciones diferentes. El elemento div se usa para organizar y diseñar elementos de página a nivel de bloque, mientras que el elemento span se usa para organizar y diseñar en línea.
Analicemos cada elemento con más detalle para comprender mejor en qué se diferencian.
división
El elemento div (división) es un elemento de bloque general que se usa más comúnmente para dividir el contenido de una página en bloques. Un elemento de bloque es un elemento de página que comienza una nueva fila y tiene un ancho igual a la página completa o su contenedor principal.
Muy a menudo, verá elementos div utilizados para agrupar párrafos, imágenes, encabezados y enlaces relacionados. Por ejemplo, un artículo de tres párrafos podría estar contenido en un div, y un menú de navegación que contenga enlaces podría estar contenido en otro div. El uso de divs de esta manera hace que sea más fácil identificar diferentes secciones de su página y estilizarlas con CSS.
Un ejemplo básico de un elemento div 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>
Rango
Un intervalo es un elemento en línea genérico que normalmente se usa para diseñar partes 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 lapso HTML se ve así:
<p>This is a paragraph with <span id=“special-text”>a little something extra</span> inside it.</p>
En resumen, la etiqueta div crea un elemento de bloque mientras que la etiqueta rodea el elemento incorporado. A pesar de sus diferencias, ambos se utilizan para agrupar elementos similares con fines estructurales y/o de estilo.
lapso vs Ejemplos de div
Ahora veamos algunos ejemplos de span y div que muestran sus diferencias y usos.
Aquí hay un ejemplo de dos
ver la pluma lapso vs división 1 de Christina Perricone (@hubspot) en CódigoPen.
A continuación, se muestra un ejemplo más representativo de cómo verá que los divs y los spans se usan juntos en las páginas web. Aquí, los elementos div separan fragmentos más grandes de contenido y abarcan segmentos envolventes dentro de esos divs.
ver la pluma lapso vs división 2 de Christina Perricone (@hubspot) en CódigoPen.
Cuándo usar lapso vs. división
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 mediante reglas CSS. Por lo general, verá etiquetas de intervalo que se utilizan para diseñar el contenido de una 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 extensivo de elementos div, 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, con
¿Por qué sería? Span y div son elementos «genéricos», lo que significa que ninguno de los elementos transmite el significado del contenido que contiene, ni el propósito. Puedes poner muchas cosas dentro.
Lo opuesto a un elemento genérico es un elemento semántico cuyas etiquetas transmiten el significado del elemento. La mayoría de los elementos HTML son semánticos:
, ,
abajo y Siempre que piense en dividir un div o un intervalo para separar una parte de una página, primero considere si hay un elemento HTML semántico adecuado que pueda usar. HTML5 introdujo varios divs alternativos a nivel de bloque que son útiles para regiones de página comunes, incluyendo
div y span: conoce la diferencia
Los elementos div y span son uno de los elementos HTML más populares, y por una buena razón: le permiten estructurar y diseñar páginas HTML exactamente según sus especificaciones. Aun así, ambos tienen su propio propósito específico, y comprender las diferencias entre ellos asegura que los use correctamente y solo cuando sea necesario. En última instancia, le ahorrará mucha confusión y eliminación de código.
Siempre que piense en dividir un div o un intervalo para separar una parte de una página, primero considere si hay un elemento HTML semántico adecuado que pueda usar. HTML5 introdujo varios divs alternativos a nivel de bloque que son útiles para regiones de página comunes, incluyendo
div y span: conoce la diferencia
Los elementos div y span son uno de los elementos HTML más populares, y por una buena razón: le permiten estructurar y diseñar páginas HTML exactamente según sus especificaciones. Aun así, ambos tienen su propio propósito específico, y comprender las diferencias entre ellos asegura que los use correctamente y solo cuando sea necesario. En última instancia, le ahorrará mucha confusión y eliminación de código.
