Há uns poucos dias alguém comentava no meu artigo div vs span que gostava de conhecer um pouco melhor os elementos div e span. Eis uma primeira vista de olhos a esses dois elementos, claro está que para um melhor esclarecimento devemos recorrer às fontes do w3c.
div
Definição
As div são uma maneira genérica de agrupar áreas de conteúdo
Exemplo
O elemento div pode ser usado para criar o arranjo da página Web. O exemplo serve de apresentação à natureza de agrupamento do elemento div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<title>Casa da Mata</title>
<style type="text/css">
navigacao {width: 200px; float: left;}
conteudo {margin-left: 205px;}
rodape {clear: both;}
</style>
</head>
<body>
<div id="cabecalho">
... [aqui deve ficar o anúncio e ou o logótipo] ...
</div>
<div id="navigacao">
... [aqui deve ficar o menu principal] ...
</div>
<div id="conteudo">
... [o conteúdo principal da página fica aqui] ...
</div>
<div id="rodape">
... [informação legal fica aqui] ...
</div>
</body>
</html>
Boas práticas
O elemento div não contém significado semântico. É uma maneira genérica de agrupar áreas de conteúdo. Assim mesmo sendo permitido, pela especificação do XHTML, conter texto e elementos em linha considera-se melhor prática envolver texto e elementos em linha em elementos bloco com significado tais como p, ol, ul, dl, de h1 a h6, blockquote, etc. O exemplo seguinte mostra um enlace e texto e imagens dentro de um elemento div:
<div class="bala semanal">
<a href= "/multimedia/interior/conteudo=408746">
<img src="/armazem/ng1017428.jpg" class="chamada" alt="A semana em fotos">
<br />
<img src="/Comum/Imagens/2007/icone_fotog.gif" alt="" class="Icone">
<p class="destaque medio">Fotogaleria</p>
<br />
...
</a>
</div>
Note-se o uso de um atributo class na div com dois nomes.
span
Definição
O elemento span propicia uma maneira genérica de adicionar estrutura ao conteúdo. Trata-se de um elemento em linha
Exemplo
O elemento span pode ser usado com o uma maneira de aplicar formatação CSS ao conteúdo. No exemplo seguinte o elemento span no cabeçalho irá ter um fundo a ciano e o elemento span no parágrafo irá ter um fundo cinza.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<title>A Casa da Mata</title>
<style type="text/css">
h1 span {background-color: cyan}
p span {background-color: gray}
</style>
</head>
<body>
<h1>A <span>Casa da Mata</span> - É um descanso do guerreiro</h1>
<p>A <span>Casa da Mata</span> foi construída como estalagem há 22 anos.</p>
</body>
</html>
Atributos
Atributos comuns
- class
- Este atributo atribui um nome ou um conjunto de nomes de classe a um elemento. Pode atribuir-se o mesmo nome de classe ou conjunto de nomes de classe a vários elementos. Quando se atribuir um conjunto de nomes os nomes devem ser separados por caracteres de espaço em branco. Normalmente usam-se nomes de classe para aplicação de regras de formatação CSS a um elemento.
- id
- Este atributo atribui uma ID a um elemento. Esta ID deve ser única no documento. Esta ID pode ser usada em guiões aplicados do lado do cliente (tais como os escritos em JavaScript) para seleccionar elementos ou para aplicar regras de formatação CSS ou para criar relações entre elementos.
- text
- Este atributo propicía informação auxiliar. Alguns navegadores irão apresentar esta informação em janelas de ponto. As tecnologias de assistência podem disponibilizar esta informação aos utilizadores como informação adicional sobre o elemento.
Atributos de internacionalização
- xml:lang
- Este atributo específica o idioma base dos valores do atributos de um elemento e do seu conteúdo textual.
- dir
- Este atributo específica a direcção base do texto. Este atributo pode tomar os seguintes valores:
- ltr: da Esquerda para a direita
- rtl: da Direita para a esquerda
Pode conter
- Elementos em linha
- Texto
Mensagens
Sem comentários:
Enviar um comentário