Skip to content

Como usar os elementos HTML Span e Div

20 de abril de 2021

Divs e vãos não são intercambiáveis ​​na construção de páginas da web. Cada um serve a propósitos diferentes e saber quando usar cada um o ajudará a desenvolver sites limpos e fáceis de gerenciar.

Usando o Elemento Div

Divs definir divisões lógicas em sua página da web. UMA div—Short for division — é basicamente uma caixa na qual você pode colocar outros elementos HTML que pertencem um ao outro. Uma divisão pode conter vários outros elementos, como parágrafos, cabeçalhos, listas, links, imagens, etc. Ela pode até ter outras divisões dentro dela para fornecer estrutura e organização adicionais. Para usar o div elemento, coloque um aberto

tag antes da área de sua página que você deseja como uma divisão separada e um fechamento

tag após:

conteúdo de div

Se você for estilizar esta área com CSS, pode adicionar um EU IA seletor para a tag div de abertura:

Ou você pode adicionar um seletor de classe:

Você pode então trabalhar com esses elementos em CSS ou JavaScript. As melhores práticas atuais tendem a usar seletores de classe em vez de IDs, em parte por causa de como os seletores de ID são específicos. Qualquer um é aceitável, no entanto, e você pode até dar um div um ID e um seletor de classe.

Divs ou seções?

O div elemento é diferente do HTML5 seção elemento porque não dá ao conteúdo fechado nenhum significado semântico. Se você não tem certeza se o bloco de conteúdo deve ser um div ou um seção, pense na finalidade do elemento e no conteúdo.

  • Se você precisa do elemento simplesmente para adicionar estilos a essa área da página, você deve usar o div elemento.
  • Se o conteúdo tiver um foco distinto e puder ser independente, considere usar o seção elemento em vez disso.

Em última análise, ambos divs e Seções se comporte de maneira semelhante e você pode atribuir atributos a qualquer um deles e estilizá-los com CSS. Ambos são elementos de nível de bloco.

Usando Spans

Período é um elemento embutido por padrão, ao contrário de div e seção elementos O período O elemento é normalmente usado para envolver uma parte específica do conteúdo, como texto, para dar a ele um gancho adicional que você pode usar para adicionar estilos. Sem quaisquer atributos de estilo, no entanto, período não tem efeito algum no texto. Outra diferença entre o período e div elementos é que o div elemento inclui uma quebra de parágrafo, enquanto o período elemento apenas diz ao navegador para aplicar regras de estilo CSS associadas ao que está contido pelo tags:

Texto realçado e texto não realçado.

Você pode adicionar class = “destaque”

ou semelhante ao período elemento para estilizar o texto com CSS. O elemento span não tem atributos obrigatórios, mas os três mais úteis são os mesmos do div elemento:

  • estilo
  • aula
  • EU IA

Usar período quando você deseja alterar o estilo do conteúdo sem definir esse conteúdo como um novo elemento de nível de bloco no documento. Por exemplo, se você quiser a segunda palavra de um h3 indo para vermelho, você pode cercar essa palavra com um período elemento que definiria o estilo dessa palavra como texto vermelho. A palavra ainda faz parte do h3 elemento, mas será exibido em vermelho.