Los tramos y no son intercambiables en la creación de páginas web. Cada uno tiene diferentes propósitos, y saber cuándo usar cada uno lo ayudará a desarrollar sitios web limpios y fáciles de administrar.
Usando el & amp; amp; nbsp; Div & amp; amp; nbsp; Element
Divs define divisiones lógicas en su página web. A div & amp; # x2014; abreviatura de division & amp; # x2014; es básicamente una caja en la que puede colocar otros elementos HTML que pertenecen juntos. Una división puede tener varios otros elementos, como párrafos, encabezados, listas, enlaces, imágenes, etc. Incluso puede tener otras divisiones dentro de él para proporcionar estructura y organización adicionales.
Video destacado
Para usar el div & amp; amp; nbsp; element, coloque un open & amp; amp; nbsp; & lt; strong / & gt ;
& amp; amp; nbsp; etiqueta antes del área de su página que desea como división separada, y cierre & amp; nbsp; & lt; strong / & gt ;
& amp; amp; nbsp; etiqueta después de esto :
& lt; p / & gt ;
& lt; pre & gt; & lt; br & gt ;
contenido de div & lt; br / & gt ;
& lt; / br & gt; & lt; / pre & gt ;
Si usted y amp; apos; diseñarán esta área con CSS, puede agregar un selector de ID a la etiqueta div de apertura:
O bien, puede agregar un selector de clase:
Luego puede trabajar con estos elementos en CSS o JavaScript.
Las mejores prácticas actuales se inclinan hacia el uso de selectores de clase en lugar de ID, en parte debido a cuán específicos son los selectores de ID. Sin embargo, cualquiera de los dos es aceptable e incluso puede dar un div tanto una ID como un selector de clase.
Divs o Secciones?
El elemento div es diferente del elemento HTML5 & amp; amp; nbsp; sección element & amp; amp; nbsp; porque no le da al contenido adjunto ningún & amp; amp; nbsp; significado semántico. Si usted es & amp; # x2019; no estoy seguro de si el bloque de contenido debe ser un div & amp; amp; nbsp; o una sección , & amp; amp; nbsp; piense sobre el propósito del elemento y el contenido.
- Si necesita el elemento simplemente para agregar estilos a esa área de la página, debe usar el div & amp; amp; nbsp; element.
- Si el contenido tiene un enfoque distinto y podría sostenerse por sí solo, & amp; nbsp; considere usar el elemento de la sección .
En última instancia, ambas secciones divs y se comportan de manera similar, y puede dar cualquiera de ellos atributos y diseñarlos con CSS. Ambos son elementos de nivel de bloque.
Usando Spans
Span & amp; amp; nbsp; es un elemento en línea de forma predeterminada, a diferencia de div y sección elementos. El elemento span se usa típicamente para envolver un contenido específico como el texto para darle un gancho adicional & amp; nbsp; que puede usar para agregar estilos. Sin ningún atributo de estilo, sin embargo, span & amp; amp; nbsp; no tiene ningún efecto sobre el texto.
Otra diferencia entre el span y div elementos es que el div &erio;amperio;nbsp;El elemento incluye un salto de párrafo, mientras que & amp;amperio;nbsp;la span &erio;amperio;nbsp;El elemento solo le dice al navegador que aplique las reglas de estilo CSS asociadas a lo que incluye el & amp;amperio;nbsp; etiquetas:
& lt; pre & gt; & lt; br & gt ;
Texto resaltado & amp; amp; nbsp; y texto no resaltado.
& lt; br / & gt ;
& lt; / br & gt; & lt; / pre & gt ;
Puede agregar
& lt; pre & gt; class = & amp; quot; highlight & amp; quot; & lt; / pre & gt ;
o similar al intervalo & amp; amp; nbsp; elemento para diseñar el texto con CSS.
El span & amp; amp; nbsp; element no tiene atributos requeridos, pero los tres que son los más útiles son los mismos que los del div & amp; amp; nbsp; element:
- estilo
- clase
- ID
Use span & amp; amp; nbsp; cuando desee cambiar el estilo de content & amp; amp; nbsp; 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, & amp; amp; nbsp; podría rodear esa palabra con un elemento de intervalo que diseñaría esa palabra como texto rojo.& amp; amp; nbsp; La palabra sigue siendo parte del elemento h3 , pero se mostrará en rojo.
& amp; # x203A; Informática
