Como usar os elementos HTML Span e Div
Tags diferentes para propósitos diferentes
Hamza Tarkkol/Getty Images
Dois 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 ajudará você a desenvolver sites limpos e fáceis de gerenciar.
Usando o elemento Div
Dois defina divisões lógicas em sua página da web. UMA div — abreviação de divisão — é basicamente uma caixa na qual você pode colocar outras Elementos HTML que pertencem juntos. Uma divisão pode ter vários outros elementos nela, como parágrafos, títulos, 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 uma abertura tag antes da área de sua página que você deseja como uma divisão separada e um fechamento marque depois:
|_+_|Se você vai estilizar esta área com CSS, você pode adicionar um EU IRIA seletor para a tag div de abertura:
|_+_|
Ou você pode adicionar um seletor de classe:
|_+_|Você pode trabalhar com esses elementos em CSS ou JavaScript.
As práticas recomendadas atuais tendem a usar seletores de classe em vez de IDs, em parte devido à especificidade dos seletores de ID. Qualquer um é aceitável, no entanto, e você pode até dar uma div um ID e um seletor de classe.
Divs ou Seções?
o div elemento é diferente doHTML5 seção elemento porque não dá ao conteúdo incluído nenhum significado semântico. Se você não tiver 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ê precisar 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 se sustentar sozinho, considere usar o seção elemento em vez disso.
Em última análise, ambos dois e Seções se comportam de forma semelhante, e você pode dar a qualquer um deles atributos e estilizá-los com CSS. Ambos são elementos de nível de bloco.
Usando períodos
Período é um elemento embutido por padrão, ao contrário div e seção elementos. o período O elemento normalmente é usado para envolver uma parte específica do conteúdo, como texto, para fornecer um gancho adicional que você pode usar para adicionar estilos. Sem nenhum atributo de estilo, no entanto, período não tem nenhum efeito no texto.
Outra diferença entre os período e div elementos é que o div elemento inclui uma quebra de parágrafo, enquanto o período O elemento apenas informa ao navegador para aplicar regras de estilo CSS associadas ao que está incluído no Tag:
|_+_|Você pode adicionar
|_+_|
ou semelhante ao período elemento para estilizar o texto com CSS.
O elemento span não possui atributos obrigatórios, mas os três que são mais úteis são os mesmos do elemento span. div elemento:
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 que a segunda palavra de um h3 para ser vermelho, você pode cercar essa palavra com um período elemento que estilizaria essa palavra como texto vermelho. A palavra ainda faz parte do h3 elemento, mas será exibido em vermelho.