O elemento HTML <div> faz parte do conjunto de elementos da linguagem de marcação utilizadas para delimitar e agrupar outros elementos, como parágrafos, imagens, botões e muito mais. Além disso, é uma das ferramentas utilizadas para a construção do layout de página desde que a linguagem de estilos CSS se tornou compatível com a maioria dos navegadores.

Pessoas que desenvolvem aplicações front-end devem entender como esse elemento funciona, pois ele é muito utilizado e contém particularidades importantes, como a forma de posicionamento na página e a aplicação de estilos. Para demonstrar como o HTML <div> funciona, preparamos este conteúdo que contém os seguintes tópicos:

• O que é e para que serve a tag <div> no HTML?
• HTML <div>: como usar a tag <div>?
• Quais os principais atributos da tag HTML <div>?
• Qual a compatibilidade com os navegadores?

Boa leitura!

O que é e para que serve a tag <div> no HTML?

A tag HTML <div>, que corresponde a abreviatura de Division, é um elemento HTML utilizado para dividir e agrupar os itens que serão exibidos em uma página. Por isso, ele funciona como um container, que pode receber diferentes tipos de conteúdo e organizá-los de várias maneiras.

Para organizar as tags divs em uma página HTML, é preciso utilizar os estilos CSS. São eles que ajudam a definir as características de cada container, como o tamanho, o posicionamento e muitas outras definições para que seja possível realizar a organização desejada dos elementos inseridos na <div>.

Apesar de ser muito utilizada para a construção de layouts, a tag <div> não interfere no SEO — Search Engine Optimization — da página, pois não faz parte do grupo de elementos semânticos do HTML, que são as tags que indicam o que cada parte do conteúdo representa, como os elementos <header>, <section>, entre outras. Portanto, os mecanismos de buscas não utilizam essa tag para classificar o conteúdo do site.

Vale ressaltar que, ao utilizar as tags semânticas para a definição de layout, o elemento <div> não deve ser utilizado com esse mesmo propósito, já que o objetivo será o mesmo e, portanto, causará confusão entre as definições dos espaços na página.

É importante se preocupar com o SEO ao desenvolver uma página HTML, pois ele representa uma estratégia para obter bons posicionamentos nos resultados de busca. Na prática, a forma como utilizamos os elementos e sua hierarquia ajudam na otimização, por exemplo, o uso de cabeçalhos ordenados, de listas para enumerar itens etc.

HTML div: como usar a tag <div>?

Como mencionamos, a tag <div> é utilizada para separar e agrupar conteúdos. Para isso, todos os elementos que pertencem a ela devem ser declarados entre a tag de início <div> e a tag de fechamento </div>. Assim, os estilos aplicados sobre a <div> refletirão nos itens inseridos nela.

Por exemplo, se definirmos que a <div> tem a visibilidade atribuída como “hidden”, que significa escondido, poderemos perceber que, ao carregar a página, todos os elementos inseridos nessa <div> não serão visualizados até que essa condição seja alterada programaticamente.

Para que o elemento <div> cumpra seu papel de separar e agrupar outros elementos, ele deve trabalhar em conjunto com os estilos CSS. Isso porque essas definições são responsáveis por proporcionar características específicas a ele.

Por padrão, a tag <div> contém a característica de inserir uma quebra de linha antes e depois de sua declaração, já que ela tem a função de separar elementos na página. Isso acontece, pois a maioria dos navegadores atribui o estilo “display: block” à tag <div>. Entretanto, é possível alterar o posicionamento por meio da aplicação de estilos.

Quais os principais atributos da tag HTML <div>?

Assim como outros elementos HTML, a tag <div> suporta os atributos e eventos globais da linguagem. Dessa forma, é possível atribuir características por meio de estilos CSS e realizar alterações por meio de código JavaScript. Confira os principais atributos do elemento <div>.

Estilizando o elemento <div>: Class e ID

Antes de falarmos sobre os atributos class e id, é importante entender como a linguagem de estilos CSS faz a distinção entre eles. O atributo class é declarado com um ponto “.” antes da denominação da classe, por exemplo, “.teste” e referenciado no atributo “class” do elemento. Ele pode ser aplicado em qualquer elemento e diversas vezes em uma página.

<div class=”teste”></div>

Já o conteúdo do atributo id só pode ser atribuído em um único elemento na página, pois ele representa a sua identificação, que não pode se repetir. A declaração de id em CSS é feita com a utilização do caractere “#” antes do nome do id. Por exemplo: “#idTeste”.

<div id=”idTeste”></div>

No elemento <div> podemos utilizar essas duas formas de aplicação de estilos. A principal diferença entre elas é em relação a individualização, ou seja, quando queremos que uma <div> tenha características únicas, utilizamos o atributo id. Já quando queremos repetir a aparência em diversas divs, utilizamos o atributo class. Veja um exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tag HTML div</title>
    <style type="text/css">
        #cabecalho{
            background-color: black;
            width: auto;
            color: white;
            height: 120px;
            margin: 20px auto;
            padding-left:20px;
            padding-top:10px;
        }
        .centralizado {
            background-color: rgb(182, 240, 199);
            border: 2px solid #999;
            width: 300px;
            margin: 20px auto;
            padding: 20px;
        }
        #rodape{
            background-color:#008b8b;
            width: auto;
            color:black;
            height: 120px;
            margin: 20px auto;
            padding-left:20px;
            padding-top: 5px;
       }
    </style>     
</head>
<body>
    <div id="cabecalho">
        <h1>Área de cabeçalho</h1>
    </div> 
    <div id="conteudo">
        <div id="primeiroConteudo" class="centralizado">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed eu pellentesque augue. Suspendisse efficitur elementum condimentum. 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis ornare 
                tortor, in elementum velit. Sed vehicula libero in ipsum feugiat, 
                ut pellentesque velit commodo. Sed ultrices id massa a molestie. 
                Duis ornare vitae ante et pellentesque. Sed libero felis, iaculis ut nisl 
                sit amet, dictum laoreet arcu. Curabitur dapibus consequat nibh, ac auctor 
                leo pharetra eget. Duis interdum arcu nulla, id congue nunc finibus sed. 
                Nulla ante tellus, bibendum eget urna et, blandit posuere libero.</p>
        </div> 
        <div id="segundoConteudo" class="centralizado">
            <p>Suspendisse vel nisl tempus, volutpat turpis sed, ornare ligula. 
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
                per inceptos himenaeos. Orci varius natoque penatibus et magnis dis 
                parturient montes, nascetur ridiculus mus. Nam ac purus malesuada quam 
                hendrerit varius. Mauris placerat tempor dolor eu vulputate. 
                Proin nec dictum mauris. Duis quis malesuada dui. Vivamus orci ex, 
                tempus sit amet auctor non, hendrerit at nulla. Vivamus at ante non 
                mauris maximus convallis ut nec velit. Orci varius natoque penatibus 
                et magnis dis parturient montes, nascetur ridiculus mus. Donec enim ex, 
                luctus a facilisis vitae, elementum sit amet sapien.</p>
        </div>        
    </div> 
    <div id="rodape">
        <p>Conteúdo do rodapé.</p>
    </div>
</body>
</html>

Perceba que as divs “cabeçalho” e “rodapé” contém características diferentes. Portanto, utilizamos o atributo id para realizar as atribuições apropriadas. Já as divs com identificações “primeiroConteudo” e “segundoConteudo” foram estilizadas por meio da classe “.centralizado”, pois as características são as mesmas para os dois elementos.

Mudando a cor de fundo do elemento <div>

Atualmente, as páginas são desenvolvidas com a utilização do HTML5, que é a última versão da linguagem de marcação. Nas versões anteriores, a definição da cor de fundo em um elemento <div> ou em outras tags HTML eram feitas com a utilização do atributo bgcolor. Entretanto, esse recurso não está disponível na nova versão e, portanto, é obsoleto.

A definição da cor de fundo é feita por meio do atributo background-color nas definições de estilos CSS. Perceba que, no exemplo anterior, utilizamos esse atributo para aplicar cores diferenciadas nas divs utilizadas no código. O atributo background-color aceita as seguintes atribuições:

• color: em que deve ser informado o nome da cor ou o código correspondente em RGB ou em hexadecimal;
• transparent: sem nenhuma cor atribuída de fundo;
• initial: recebe o valor padrão atribuído ao elemento;
• inherit: herda o valor atribuído ao elemento parente.

Diferença entre <div> e <span>

É comum haver dúvidas em relação a utilização das tags <div> e <span>. Isso porque as duas servem para delimitar um determinado conteúdo e aplicar o estilo CSS atribuídos a elas. A principal diferença entre elas é o atributo display, que por padrão é definido como “block” na tag <div> e “inline” na tag <span>.

O display block significa que existe uma quebra de linha no início e no encerramento da tag. Veja o algoritmo abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tags div e span</title>
    <style type="text/css">
        .divs{
            background-color: darkcyan;
            border: 1px solid #000;
        }
        .span1 {
            background-color: burlywood;
            border: 2px solid red;
        }
        .span2 {
            background-color:chocolate;
            border: 2px solid red; 
        }
    </style>
</head>
<body>
    <h1>Diferença entre as tags div e span</h1>
    <div class="divs">Primeira div</div>
    <div class="divs">Segunda div</div>
    <span class="span1">Primeira span</span>
    <span class="span2">Segunda span</span>
    <div class="divs">Outra div</div>
</body>
</html>

Ao depurar esse código em um navegador, perceba que a primeira <div> será iniciada em uma nova linha, após o encerramento da tag <h2>, assim como a segunda <div>. Já o conteúdo das duas spans ocupa a mesma linha, enquanto a próxima <div> será iniciada na linha seguinte.

Além disso, o elemento <div> ocupa toda a linha caso o seu tamanho não seja especificado, mesmo que seu conteúdo termine antes. Já a tag <span> ocupa somente o espaço necessário para a exibição dos elementos dentro dela.

Como fazer o posicionamento do elemento <div>: CSS position

Por padrão, o elemento <div> tem a largura da página. Entretanto, podemos aplicar qualquer tamanho a ele e, dessa forma, posicioná-lo de diferentes maneiras na página, como fixá-lo no topo, posicionar as divs uma ao lado da outra e muito mais. Isso é feito por meio da propriedade position, que determina como um elemento será posicionado na página e aceita os seguintes atributos:

• relative: em que o posicionamento é baseado nas definições das propriedades top e bottom para o deslocamento horizontal e left e right em relação horizontal. O deslocamento do elemento é feito em relação ao posicionamento em que ocupa na página;
• absolute: em que o posicionamento é definido pelas propriedades top, bottom, left e right e em relação ao topo da página;
• fixed: em que o elemento fica na mesma posição, mesmo com a rolagem da página;
• static: que acompanha a disposição dos elementos da página. As propriedades top, bottom, left e right não produzem efeito;
• sticky: funciona como um adesivo, ou seja, em um primeiro momento o posicionamento é relativo. Entretanto, ao rolar a página, esse atributo faz com que a <div> permaneça no posicionamento indicado pelas outras propriedades auxiliares.

Confira o código abaixo em um navegador e perceba como as divs se comportam na página e ao fazer a rolagem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamento do elemento div</title>
    <style type="text/css">
        .divs{
            width: 200px;
            height: 300px;
        }
        .divAbsolute{
            background-color: darkcyan;
            position:absolute;
            top:80px;
            left:30px;
        }
        .divRelative {
            background-color: burlywood;
            position:relative;
            top:120px;
            left:300px;
        }
        .divFixed {
            background-color:chocolate;
            position: fixed;
            top: 200px;
            right: 200px;
        }
        .divStatic{
            background-color:darkgreen;
            position: static;
            top: 300px;
            left: 300px;
        }
        .divSticky{
            background-color: grey;
            position:sticky;
            top: 0px;
            left: 400px;
        }
        .divEsquerda{
            background-color: blueviolet;
            color:white;
            float:left;
        }
        .divDireita{
            background-color: darkblue;
            color: white;
            float: right;
        }
        .divAlignCenter{
            margin: 0 auto;
            width: 50%;
            height: 300px;
            background-color: darkolivegreen;
         }
         .clear{
             clear:both;
         }
    </style>
</head>
<body>
    <h1>Formas de posicionamento</h1>
    <div class="divs divSticky">Posicionamento sticky</div>
    <div class="divs divRelative">Posicionamento relative</div>
    <div class="divs divFixed">Posicionamento fixed</div>
    <div class="divs divStatic">Posicionamento static</div>
    <div class="divs divAbsolute">Posicionamento absolute</div>
    <div class="divAlignCenter">Posicionamento central</div> 
    <div class="divs divEsquerda">Posicionamento float left - esquerda</div>
    <div class="divs divDireita">Posicionamento float right - direita</div> 
    <p class="clear">Parágrafo com a limpeza da propriedade float</p>
</body>
</html>

Também podemos posicionar a <div> no centro da página de forma automática. Perceba que, no código acima, criamos um elemento que utiliza o estilo “.divAlignCenter”, que define a propriedade margin como “0 auto”. Isso faz com que a HTML center <div> seja posicionada ao centro sem a necessidade de cálculos adicionais.

Outra necessidade comum ao utilizar o elemento <div> é realizar o posicionamento de uma <div> ao lado da outra de forma automática, ou seja, sem a utilização das propriedades top, bottom, left e bottom para auxiliar nessa tarefa. Isso é feito por meio da propriedade CSS float, que significa flutuar.

Na prática, ela faz com que o elemento flutue de acordo com a opção escolhida, que pode ser left ou right, que significa esquerda ou direita. Vale ressaltar que, ao utilizar essa propriedade, é preciso realizar uma espécie de limpeza para que as divs seguintes sejam posicionadas de maneira correta. Para isso, utilizamos a propriedade CSS clear.

No código acima, mostramos como essa propriedade funciona nas duas últimas divs. Perceba que elas estão posicionadas na mesma linha e alinhadas à esquerda e à direita cada uma. A seguir, adicionamos um parágrafo que, se não utilizássemos o estilo “.clear”, apareceria entre as duas divs.

Portanto, a limpeza permite que o parágrafo seja posicionado corretamente logo após o encerramento das duas divs localizadas lado a lado.

Qual a compatibilidade com os navegadores?

Observar a compatibilidade é uma tarefa importante para evitar que a página apresente falhas e não funcione da maneira adequada ao ser acessada em diferentes navegadores. A propriedade position sticky, por exemplo, não é compatível com todos os navegadores, especialmente com os mais antigos. Confira a partir de qual versão, os principais navegadores são compatíveis com o elemento <div>:

• Internet Explorer: 6;
• Edge: 12;
• Firefox: 2;
• Chrome: 4;
• Safari: 3.1;
• Opera: 12.1;
• iOS Safari: 3.2;
• Opera Mini: todas;
• Android Browser: 2.1;
• Opera Mobile: 12.1;
• Chrome for Android: 86;
• Firefox for Android: 82;
• Samsung Internet: 4.

O HTML <div> é um poderoso recurso da linguagem de marcação, pois ele permite agrupar elementos e posicioná-los de diferentes formas por meio da aplicação de estilos CSS, que também conferem características adicionais, como cor de fundo, tamanho e muito mais. Por isso, é uma tag muito utilizada para a criação de layouts e para a organização dos itens da página.

Gostou do nosso conteúdo sobre o elemento HTML <div>? Então, confira este post sobre o que é desenvolvimento web e o que é preciso para ingressar nessa carreira!