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- curto para divisão - é basicamente uma caixa na qual você pode colocar outras Elementos HTML que pertencem juntos. Uma divisão pode conter vários outros elementos, como parágrafos, cabeçalhos, listas, links, imagens, etc. Ele pode até ter outras divisões dentro dele 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
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 seletor de ID e de classe.Divs ou seções?
O div elemento é diferente do HTML5seçã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 Tag:
Texto em destaque e texto não destacado.
Você pode adicionar.
classe = "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 defini-lo 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.