Skip to main content

Usando Span y Div elementos HTML con CSS en diseño web

Things Mr. Welch is No Longer Allowed to do in a RPG #1-2450 Reading Compilation (Abril 2025)

Things Mr. Welch is No Longer Allowed to do in a RPG #1-2450 Reading Compilation (Abril 2025)
Anonim

Muchas personas que son nuevas en diseño web y HTML / CSS usan el y

Elementos de forma intercambiable a medida que construyen páginas web. La realidad, sin embargo, es que cada uno de estos elementos HTML tiene propósitos diferentes. Aprender a usar cada uno para su propósito previsto lo ayudará a desarrollar páginas web más limpias, cuyo código es más fácil de administrar en general.

Utilizando la
Elemento

El elemento div define divisiones lógicas en su página web. Básicamente es un cuadro en el que puede colocar otros elementos HTML que lógicamente van juntos. Una división puede tener muchos otros elementos, como párrafos, encabezados, listas, enlaces, imágenes, etc. Incluso puede tener otras divisiones dentro de ella para proporcionar estructura y organización adicionales a su documento HTML.

Para usar el elemento div, coloca un abierto

etiqueta antes del área de su página que desee como una división separada, y un cierre
etiqueta después de que:

contenidos de div

Si el área de su página necesita información adicional que usará para aplicar estilo con CSS más adelante, puede agregar un selector de identificación (por ejemplo,

id = "myDiv">

), o un selector de clase (por ejemplo,

class = "bigDiv">

). Ambos de estos atributos se pueden seleccionar mediante CSS o modificar con JavaScript. Las mejores prácticas actuales se inclinan hacia el uso de selectores de clase en lugar de ID, en parte debido a cómo son los selectores de ID específicos. En verdad, sin embargo, puede usar cualquiera de los dos e incluso puede dar a una división tanto una identificación como un selector de clase. Cuándo usar
Versus

El elemento div es diferente del elemento de 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 cuál es el propósito del elemento y el contenido para ayudarlo a decidir cuál usar:

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

En última instancia, tanto los divs como las secciones se comportan de manera bastante similar y puede asignarles valores de atributos a cualquiera de ellos y personalizarlos con CSS para obtener el aspecto de su sitio que necesita. Ambos son elementos de nivel de bloque.

Utilizando la 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 usa a menudo para envolver una pieza específica de contenido, normalmente texto, para darle un "gancho" adicional que se puede diseñar más adelante. Usado con CSS, puede cambiar el estilo del texto que encierra; sin embargo, sin ningún atributo de estilo, el elemento span 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 solo le dice al navegador que aplique las reglas de estilo CSS asociadas a lo que está incluido en el etiquetas:

Texto resaltado y texto sin resaltar.

Añade el

clase = "resaltar"

u otra clase al elemento span para estilizar el texto con CSS (por ejemplo,

clase = "resaltar">

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

  • estilo
  • clase
  • carné de identidad

Use span cuando desee cambiar el estilo del contenido sin definir ese contenido 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 de intervalo que pueda darle un estilo a esa palabra como texto rojo. La palabra sigue siendo parte del elemento h3, pero ahora también se muestra en rojo:

Este es mi impresionante titular