Tag < div > - Criando divisões lógicas e Estruturais em seu site com HTML e CSS

Neste tutorial de nossa Apostila de CSS, iremos falar de uma tag que embora seja nativa do HTML, é vastamente usada no CSS, e é sem dúvida uma das tags e elementos mais importantes usados para a criação de sites.

Obtenha seu certificado e comece já a trabalhar como Webmaster

Porque usar <div>

Antes de entrarmos em detalhes sobre o que é a tag div, para que serve, quando usar etc, primeiro vamos explicar alguns problemas e limitações que estamos tendo com o uso dos seletores do tipo CLASS e ID da maneira que estávamos usando até o momento em nosso curso de CSS.

Vínhamos usando esses seletores em tags já existentes do HTML, como <p>, <title>, <img> e <title>.
Como o seletor CLASS do CSS vimos que é possível agrupar diversas tags com o mesmo nome e aplicar um mesmo estilo em todas elas, em apenas um código de estilo, sem a necessidade de repetir o estilo em cada tag.

Embora isso nos tenha dado um poder maior, visto que podemos estilizar nossas páginas de uma maneira mais simples, ainda há uma série de limitações.
Por exemplo, vamos supor que você queira estilizar o cabeçalho, header, de seu site, que tem uma imagem como logotipo, o nome de seu site e um slogan.

Então você vai e bota o atributo class="cabecalho" em cada tag do cabeçalho, para terem o mesmo estilo. Ok, vai dar certo. Mas e se for estilizar um menu lateral, o conteúdo ou outra parte de seu site que tenha dezenas de tags, vai colocar o seletor CLASS ou ID em cada uma delas?

Aliás, e se não tiver tag pra estilizar?
Pode ser que você queira estilizar só um trecho do seu conteúdo, que nem em parágrafos estão (você apenas usou <br /> para quebra de linha).
Por exemplo, os códigos de CSS e HTML de nosso site tem cores e formatação diferente, como estilizar eles? Aplicar estilo em cada linha?

É aí que entram as DIVs.

<div> - O que é  para que serve

O nome div vem de divisão, e esta tag vai lhe dar o simples poder de dividir qualquer trecho de seu código. Isso mesmo, você pode criar um bloco, uma divisão, e dentro deste bloco ter uma imagem, links, textos e o que mais você quiser.

E qual a vantagem disso? Você vai poder aplicar o CSS nesse bloco, e tudo que estiver dentro da div, seja imagem, texto, link ou o que mais for, vai receber aquelas regras de estilo.
Se você fizer isso usando CLASS, por exemplo, vai ter que colocar esse seletor em cada tag.

É bem comum dizer que a tag <div> é um container para armazenar diversos elementos.
As divs são IMPORTANTÍSSIMAS para estruturar, criar uma ordem lógica e organizar um site.

Você cria uma div para o cabeçalho, outra para o conteúdo, outra div para os menus e uma última para o rodapé, então usa o CSS para estilizar cada uma dessas divs separadamente.
Você também poderá criar outras divisões dentro destas divs.

Por exemplo, na <div> do conteúdo, você terá uma região com o título e talvez alguma imagem, que você queria chamar de "cabecalho-conteudo", pois é o cabeçalho do conteúdo.
Em seguido o conteúdo textual, que você chama de "conteudo" e no final do seu artigo você quer colocar uma região com as referências bibliográficas "ref".
Ou seja, você definiu uma região no site, depois outras sub-regiões.




Como usar a tag <div> em HTML e CSS

A sintaxe da tag div é:
<div>
 Todo, qualquer e quantos
 elementos do HTML você queira
 colocar aqui.
</div>

Obviamente, para identificar as mais variadas divs que podemos usar para estruturar nosso site, devemos usar os seletores ID ou CLASS.

Mas para ver, na prática, como se usa uma div vamos criar um site com 3 divs: header, content e foot.
Ou seja, nosso site vai ter cabeçalho, conteúdo e rodapé.
O código HTML é:
<!DOCTYPE html>
 
<html> 
<head>
	<title> Como usar DIV </title>
	<meta name="description" content="Aprenda a usar a tag div em HTML & CSS">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>

<body>
	<div id="header">
	</div>

	<div id="content">
	</div>

	<div id="foot">
	    <p>HTML Progressivo - Todos os direitos Reservados</p>
	</div>

</body>

</html>

Vamos agora criar nossa folha de estilos CSS.
Nosso cabeçalho vai ocupar 80% da tela (width: 80%), terá altura de 200px (height: 200px), fundo branco e alinhado no centro.

Já nossa região de conteúdo também terá a mesma largura, 800px de altura, cor de fundo azul e alinhado no centro também.

E por fim, nosso rodapé também será alinhado no centro, terá 50 pixels de altura e 80% de largura da tela do seu browser, e terá uma borda vermelha de 3 pixel de largura, com um simples texto, como foi mostrado no código HTML, que será automaticamente alinhado no centro.

Nosso arquivo CSS, estilo.css, fica:
#header {
	width: 80%;
	height: 200px;
	margin: 0 auto;
	background:#000;
}

#content {
	width: 80%;
	height: 800px;
	margin: 0 auto;
	background: blue;
}

#foot {
	width: 80%;
	height: 50px;
	margin: 0 auto;
        text-align: center;
border: 3px solid red; }

Note como o CSS delimitou bem as regiões das divs.
(Não vamos reproduzir o efeito aqui, crie seu documento HTML, sua folha de estilo CSS e rode)

Se quiser colocar um logotipo no seu site, coloque dentro da div de cabeçalho.
O título? Lá também. E não precisa se preocupar com a posição, esses elementos vão sempre ficar no container, na <div> do cabeçalho, pois foi lá dentro que você colocou esses elementos.

O mesmo vale para textos, imagens, links e o que mais você queria colocar no conteúdo.
Basta colocar entre as tag <div> e </div> do content, que tudo ficará lá dentro, bonitinho, organizado, sem tomar espaço do cabeçalho, rodapé e ocupando no máximo 80% de largura e 800px de altura, pois  sua folha de estilo impôs essa regra.

No decorrer de nosso Curso de CSS, iremos aprender a organizar os elementos, chamados objetos, dentro da uma <div>, alinhar, mudar a fonte, cores, tamanhos, efeitos e um mundo de coisas.
As divs estarão bem presentes mesmo durante toda nossa apostila.

2 comentários:

rodrigo disse...

otimo tutorial obrigado.agora tenho uma noção de como divisão é feita claramente.

Anônimo disse...

Como faço para colocar uma imagem dentro da div class header?
e posicioná-la a esquerda do cabeçalho?