Div e Span 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 definem divisões lógicas em sua página da web. Uma div – abreviação para divisão – é 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 elemento div, coloque uma tag <div> de abertura antes da área de sua página que você deseja como uma divisão separada e uma tag de fechamento </div> depois dela:
<div> conteúdo de div </div>
Se você for estilizar essa área com CSS, poderá adicionar um seletor de ID à tag div de abertura:
<div id="myDiv">
Ou você pode adicionar um seletor de classe:
<div class="bigDiv">
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é fornecer a um div um ID e um seletor de classe.
Divs ou seções?
O elemento div é diferente do elemento de seção HTML5 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 uma 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 elemento div.
- Se o conteúdo tiver um foco distinto e puder ser independente, considere usar o elemento de seção.
Em última análise, divs e seções se comportam 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 Span
Span é um elemento embutido por padrão, ao contrário dos elementos div e section. O elemento span é 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, entretanto, a extensão não tem efeito algum no texto.
Outra diferença entre os elementos span e div é que o elemento div inclui uma quebra de parágrafo, enquanto o elemento span apenas diz ao navegador para aplicar regras de estilo CSS associadas ao que está contido pelas tags <span> :
<div id="mydiv"> <p> <span> Texto realçado </span> e texto não realçado. </p> </div>
Você pode adicionar
class="highlight"
ou semelhante ao elemento span 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 elemento div :
- estilo
- aula
- EU IA
Use span quando quiser 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 quiser que a segunda palavra de um título h3 seja vermelha, você pode cercar essa palavra com um elemento span que estilizaria essa palavra como texto vermelho. A palavra ainda faz parte do elemento h3 , mas será exibida em vermelho.
