Uso de los elementos HTML Span y Div

Uso de los elementos HTML Span y Div

Uso de los elementos HTML Span y Div

VALORACIÓN DEL ARTÍCULO:
5/5


Muchas personas que son nuevas en el diseño web y HTML/CSS utilizan los elementos y en forma intercambiable a medida que construyen las páginas web. La realidad, sin embargo, es que cada uno de estos elementos HTML tiene propósitos diferentes. Aprender a usar cada uno de ellos para su propósito previsto le ayudará a desarrollar páginas web más limpias cuyo código es más fácil de administrar en general.

Usando el elemento Element

El elemento div define las divisiones lógicas en su página web. Es básicamente una caja en la que se pueden colocar otros elementos HTML que lógicamente van juntos. Una división puede tener varios otros elementos en ella, como párrafos, encabezados, listas, enlaces, imágenes, etc. Incluso puede tener otras divisiones dentro de él para proporcionar estructura y organización adicional a su documento HTML.

Para utilizar el elemento div, coloque una etiqueta open antes del área de su página que desea como una división separada, y una etiqueta close después de ella:

contenido de la div

Si el área de tu página necesita alguna información adicional que usarás para darle estilo con CSS más tarde, puedes añadir un selector de id (por ejemplo,

>

), o un selector de clase (por ejemplo,

>

). Ambos atributos pueden seleccionarse mediante CSS o modificarse mediante JavaScript. Las mejores prácticas actuales se inclinan hacia el uso de selectores de clase en lugar de IDs, en parte debido a lo específicos que son los selectores de IDs. En realidad, sin embargo, puedes usar cualquiera de los dos y hasta puedes darle a una división un ID y un selector de clase.

El elemento div es diferente del elemento de la sección HTML5 porque no le da al contenido adjunto ningún significado semántico. Si no está seguro de si el bloque de contenido debe ser un div o una sección, piense en cuál es el propósito del elemento y el contenido para ayudarle a decidir cuál usar:

  • Si necesita el elemento simplemente para añadir estilos a esa área de la página, debería utilizar el elemento div.
  • Si el contenido que se va a contener tiene un enfoque distinto y podría mantenerse por sí solo, es posible que desee utilizar el elemento de la sección en su lugar.

En última instancia, tanto los divs como las secciones se comportan de forma bastante similar y puedes darle a cualquiera de ellos valores de atributo y estilizarlos con CSS para conseguir el aspecto de tu sitio que necesitas. Ambos son elementos de nivel de bloque.

Usando el elemento

El elemento span es un elemento en línea por defecto. Esto lo diferencia de los elementos div y section. El elemento span se utiliza a menudo para envolver una pieza específica de contenido, normalmente texto, para darle un "gancho" adicional que puede ser estilizado más tarde. Usado con CSS, puede cambiar el estilo del texto que contiene; sin embargo, sin ningún atributo de estilo, el elemento span por sí solo no tiene ningún efecto en el texto.

Esta es la principal diferencia entre los elementos span y div. Como se mencionó anteriormente, el elemento div incluye un salto de párrafo, mientras que el elemento span sólo le dice al navegador que aplique las reglas de estilo CSS asociadas a lo que encierran las etiquetas :

Texto resaltado y texto no resaltado.  

Añada el

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

u otra clase al elemento span para darle estilo al texto con CSS (por ejemplo,

>

El elemento span no tiene atributos requeridos, pero los tres que son más útiles son los mismos que los del elemento div:

  • estilo
  • class
  • id

Utilice span cuando desee cambiar el estilo del contenido sin definirlo como un nuevo elemento de nivel de bloque en el documento.

Por ejemplo, si desea que la segunda palabra de un encabezado h3 sea roja, puede rodear esa palabra con un elemento span que le dé estilo a esa palabra como texto rojo. La palabra sigue formando parte del elemento h3, pero ahora también se muestra en rojo:

Este es mi impresionante titular

TAMBIÉN TE INTERESA

Razones para tener una web, te las explicamos

Razones para tener una página web, te las explicamos

O estás en internet o no estás. Así de fácil se puede resumir la necesidad de tener una página a nivel particular o en un negocio. Desde el punto de vista individual, es suficiente con tener perfiles activos en redes sociales, sin embargo en el caso de una empresa, la que sea, es indispensable contar

materiales-fabricación-aditiva

Más allá de las impresoras 3D: la fabricación aditiva

El elemento clave de la fabricación aditiva siempre ha sido la impresora 3D; la industria se ha construido sobre una base de diferentes tecnologías de impresión, cada una con sus propios puntos fuertes y débiles, capacidades y limitaciones, y aplicaciones más compatibles. En el último informe de IDTechEx ‘3D Printing and Additive Manufacturing 2023-2033: Technology

OPPO-Snapdragon-8-Gen-2

El chip Snapdragon 8 Gen 2 se estrenará en el próximo Find X de OPPO

OPPO ha participado en la Snapdragon Summit 2022 para presentar su colaboración con Qualcomm Technologies en materia en la tecnología Ray Tracing para dispositivos móviles. Las dos empresas, que llevan trabajando conjuntamente desde la primera fase de desarrollo del procesador de nueva generación, harán posible que los usuarios disfruten de la tecnología una ray tracing basada

e-bike-Bike-Ocasion

Black Friday: ¿buen momento para hacernos con una e-bike?

Sin duda, el Black Friday es una oportunidad para comprar muchos productos de tecnología entre los que cabría pensar en una e-bike. Este tipo de bicicletas tienen mucho componente tecnológico y han subido en ventas como la espuma desde principios de la pandemia, allá por marzo de 2020.   En este post nos sumergiremos como

reloj Haylou GST Lite

Haylou GST Lite, un reloj inteligente con un precio y rendimiento imbatibles

De todos los modelos de relojes inteligentes, encontramos uno, el Haylou GST Lite, que sorprende por su alto rendimiento, bajo precio y las muchas funciones que incorpora para nuestro día a día. Comparado con otros dispositivos similares, parece difícil encontrar uno reloj como este desde el punto de vista de su rendimiento y el precio.

problemas-de-conexion-reuniones-virtuales

Los problemas más habituales de las reuniones virtuales

Es un hecho que una de las consecuencias más palpables tras la pandemia en entornos laborales ha sido un aumento de las reuniones virtuales por parte de miembros de un equipo de trabajo. Inicialmente para muchos, este paso hacia la pantalla supuso muchos problemas en cuanto a experiencia o la adopción de tecnologías en su