Divs y tramos 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 elemento Div
Divs Defina divisiones lógicas en su página web. A div(Abreviatura de división) es básicamente una casilla en la que puede colocar otras Elementos HTML que pertenecen 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 él para proporcionar estructura y organización adicionales.
Usar el div elemento, coloque un abierto etiqueta antes del área de su página que desea como una división separada, y un cierre
contenido de div
Si va a diseñar esta área con CSS, puede agregar un IDENTIFICACIÓN selector a la etiqueta div de apertura:
O puede agregar un selector de clases:
Luego puede trabajar con estos elementos en CSS o JavaScript.
Las mejores prácticas actuales se inclinan hacia el uso de selectores de clases en lugar de ID, en parte debido a lo específicos que son los selectores de ID. Cualquiera de los dos es aceptable, sin embargo, e incluso puede dar un div tanto un ID como un selector de clase.
Divs o Secciones?
La div elemento es diferente del HTML5sección elemento 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 un sección, piense en 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 elemento.
- Si el contenido tiene un enfoque distinto y podría sostenerse por sí solo, considere usar el sección elemento en su lugar.
En última instancia, ambos divs y secciones se comportan de manera similar, y puede darles atributos a cualquiera de ellos y aplicarles estilo con CSS. Ambos son elementos a nivel de bloque.
Usar tramos
Lapso es un elemento en línea por defecto, a diferencia de div y sección elementos. La lapso El elemento se usa generalmente para envolver una parte específica de contenido, como texto, para darle un gancho adicional que puede usar para agregar estilos. Sin embargo, sin atributos de estilo, lapso no tiene ningún efecto en el texto.
Otra diferencia entre el lapso y div elementos es que el div El elemento incluye un salto de párrafo, mientras que el lapso El elemento solo le dice al navegador que aplique reglas de estilo CSS asociadas a lo que está encerrado en el etiquetas:
Texto resaltado y texto no resaltado.
Podría agregar.
class = "destacar"
o similar a la lapso elemento para diseñar el texto con CSS.
El elemento span no tiene atributos obligatorios, pero los tres que son más útiles son los mismos que los del div elemento:
- estilo
- clase
- IDENTIFICACIÓN
Usar lapso cuando desee cambiar el estilo del contenido sin definir ese contenido como nuevo elemento a nivel de bloque en el documento.
Por ejemplo, si desea que la segunda palabra de un h3 rumbo a ser rojo, puede rodear esa palabra con un lapso elemento que daría estilo a esa palabra como texto rojo. La palabra sigue siendo parte del h3 elemento, pero se mostrará en rojo.