Divs e Spans entenda realmente quais suas funções

21 de julho de 2008

Um elemento que pode ajudar a adicionar estrutura a um documento é um elemento DIV. Muitas pessoas acreditam equivocadamente que um elemento DIV não tem nenhum significado semântico. Mas, na verdade, DIV significa divisão e fornece uma maneira de dividir um documento em áreas significativas. Assim, envolvendo a área principal do conteúdo em um DIV e atribuindo a ele um ID de conteudoPrincipal, você está agregando estrutura e significado ao seu DIV.
Para manter o mínimo possível de marcação desnecessária, você só deve usar o elemento DIV se não houver nenhum elemento existente que faça o trabalho.
Por exemplo se você estiver utilizando uma lista para sua navegação principal, não será necessário envolve-la em um div.

<div id="PrincipalMenu">

<ul>

<li>Home</li>

<li>Quem Somos</li>

<li>Contato</li>

</ul>

</div>


Você pode remover o div e, em vez disso, simplesmente aplicar o ID à lista.

<u id="PrincipalMenu"l>

<li>Home</li>

<li>Quem Somos</li>

<li>Contato</li>

</ul>


O uso de muitos divs é freqüentemente descrito como divititc e. em geral um sinal de que seu código está mal estruturado e muito complicado. Algumas pessoas iniciantes em CSS tentaram modificar suas antigas estruturas de tabela utilizando divs. Mas isso é simplesmente trocas um conjunto de tags irrelevantes por outro. Em vez disso, divs devem ser utilizados para agrupar itens relacionados com base nos seus significados ou funções em vez de na sua aparência ou layout.
Embora possam ser utilizados para agrupar elementos no nível de bloco, spans podem para agrupar ou identificar elementos inline.

<h2>CSS Padrões</h2>

<p>Esta postagem foi feita <span class="data">21/07/2008</span> por <span class="autor">Marcelo R de Souza</span></p>


Geralmente não é tão comum ser necessário agrupar ou identificar elementos inline, portanto spans são vistos com menos freqüência que divs.. Você verá spans usados em efeitos como substituição de uma imagem, que os utiliza como ganchos extras para acrescentar estilos.
Embora o objetivo seja manter seu código o mais limpo e significativo possível, às vezes não poderá evitar a adição de um div ou span não semântico extra para exibir a página da maneira desejada.


Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email

0 comentários:

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa