Como usar os elementos HTML e Div. HTML

Use span e div con CSS para maior estilo e control de deseño.

Moitas persoas que son novas para o deseño web e HTML / CSS usan os elementos e

de forma intercambiable mentres compilan páxinas web. A realidade, con todo, é que cada un destes elementos HTML serve para fins distintos. Aprender a utilizar cada un para o seu propósito pretende axudarlle a desenvolver páxinas web máis limpas que o código é máis fácil de xestionar en xeral.

Usando o elemento

O elemento div define divisións lóxicas na súa páxina web.

É basicamente unha caixa na que pode colocar outros elementos HTML que lógicamente van xuntos. Unha división pode ter varios outros elementos nel, como parágrafos, títulos, listas, ligazóns, imaxes, etc. Pode incluso ter outras divisións dentro dela para proporcionar estrutura e organización adicional ao seu documento HTML.

Para usar o elemento div, coloque unha etiqueta

aberta antes da área da súa páxina que desexa como unha división separada e unha etiqueta próxima despois del:

contidos de div

Se a área da túa páxina necesita máis información adicional que usarás co estilo con CSS máis tarde, podes engadir un selector de ID (por exemplo,

id = "myDiv">), ou un selector de clase (por exemplo, class = "bigDiv">). Os dous atributos poden ser seleccionados usando CSS ou modificados usando JavaScript. As mellores prácticas actuais inclínanse no uso de selectores de clase en lugar de IDs, en parte por mor de como son os selectores de ID específicos. En verdade, con todo, pode empregar calquera e pode mesmo dar unha división tanto a ID como a un selector de clase.

Cando usar

Versus

O elemento div é diferente do elemento da sección HTML5 porque non dá ao contido cerrado ningún significado semántico. Se non está seguro de se o bloque de contido debe ser unha div ou unha sección, pense sobre o propósito do elemento e do contido para axudarlle a decidir que usar:

  • Se precisas o elemento simplemente para engadir estilos a esa área, debes usar o elemento div.
  • Se o contido que se ten contido ten un foco distinto e podería estar por si só, pode querer usar o elemento da sección.

En definitiva, os dous divs e as seccións compórtanse de forma semellante e podes darlle algún dos valores de atributo e estilos con CSS para obter a aparencia do teu sitio que necesites. Ambos son elementos de nivel de bloque.

Usando o elemento

O elemento span é un elemento en liña por defecto. Isto distínguese dos elementos div e sección. O elemento span úsase frecuentemente para envolver un contido específico, normalmente texto, para darlle un "gancho" adicional que se pode usar máis tarde. Usado con CSS, pode cambiar o estilo do texto que inclúe; Non obstante, sen ningún atributo de estilo, o elemento span non ten ningún efecto sobre o texto.

Esta é a principal diferenza entre os elementos span e div. Como se mencionou anteriormente, o elemento div inclúe un descanso de parágrafo, mentres que o elemento span só indica ao navegador que aplique regras de estilo CSS asociadas ao que está encerrado nas etiquetas :


Texto resaltado e texto non resaltado.

Engada a clase = "destacar" ou a outra clase ao elemento span para o estilo do texto con CSS (por exemplo, class = "highlight">).

O elemento span non ten atributos requiridos, pero os tres que son os máis útiles son os mesmos que os do elemento div:

  • estilo
  • clase
  • id

Usa intervalo cando quere cambiar o estilo de contido sen definir ese contido como un novo elemento de nivel de bloque no documento.

Por exemplo, se quere que a segunda palabra dun título h3 sexa vermello, pode roldar esa palabra cun elemento de span que estilo esa palabra como texto vermello. A palabra aínda permanece parte do elemento h3, pero agora tamén aparece en vermello:

Este é o meu título incrible

Editado por Jeremy Girard o 2/2/17