Documentos Técnicos

O bloco de conteúdo

div

A tag <div> marca um bloco de conteúdo, este bloco podendo ser um simples texto ou uma seção inteira do documento, contendo tabelas, imagens, texto, etc.

O nome da tag vem do fato dela indicar uma divisão dentro da estrutura do documento. O div pode ser utilizado para separar blocos de texto, semelhantes a parágrafos, mas esta tag não produz automaticamente uma margem abaixo do bloco, como faz a tag <p>. Para criar a separação visual de parágrafos, se eles forem marcados com a tag <div>, é necessário estilizá-los com CSS

A tag div existe desde a versão 3 da especificação HTML (1995)1 e foi assim definida:
O elemento DIV é usado com o atributo CLASS para representar diferentes tipos de blocos de conteúdo, por exemplo: capítulo, seção, resumo ou apêndice.2
A tag <div> se tornou comum e passou a ser amplamente utilizada com o uso de sites tableless (sites sem tabelas), há menos de uma década (em 2002, o W3C apresentava uma sugestão para layout em colunas sem tabelas3), pois a estilização feita na tag div pelo atributo class permite organizar o conteúdo em colunas. Isso tornou o layout das páginas internet mais flexível ao mesmo tempo em que o código ficou mais simples do que aquele gerado por tabelas para criar um layout em colunas.

Exemplo de uso:

O código abaixo possui conteúdo distribuído em 2 blocos que podem ser exibidos como colunas, após formatação via CSS:

<div>
<div class="coluna1">
Nunc porta in sapien nec accumsan. In hac habitasse platea dictumst. Vestibulum sed bibendum mi. Nunc aliquam ullamcorper metus. Proin consequat, mi vel ultricies tempor, sapien est eleifend diam, et mattis neque nisl in tortor.
</div>

<div class="coluna2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit eros in laoreet laoreet. Phasellus lacinia nisi in auctor suscipit. Integer blandit, orci a lacinia viverra.
</div>
</div>

O resultado é este:

Nunc porta in sapien nec accumsan. In hac habitasse platea dictumst. Vestibulum sed bibendum mi. Nunc aliquam ullamcorper metus. Proin consequat, mi vel ultricies tempor, sapien est eleifend diam, et mattis neque nisl in tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam suscipit eros in laoreet laoreet. Phasellus lacinia nisi in auctor suscipit. Integer blandit, orci a lacinia viverra.


(1) http://www.w3.org/MarkUp/html3/
(2) http://www.w3.org/MarkUp/html3/divisions.html
(3) http://www.w3.org/2002/03/csslayout-howto