HTML Div: O elemento de divisão do HTML

Div HTML

O HTML Div é um dos elementos mais conhecidos do HTML. Até o lançamento do HTML5, era muito utilizado para dividir todas sessões e todos os blocos do documento. Porém, com a atualização da versão 5 do HTML, começou a dividir o espaço com as demais tags semânticas. Ainda assim, é um elemento muito importante e muito utilizado. Neste artigo vamos explicar sobre o HTML Div, como funciona, como utilizar e muito mais.

Portanto, você encontrará os seguintes tópicos nesse artigo:

Para que serve uma Div no HTML

O elemento HTML Div define uma divisão ou seção em um documento HTML. O elemento div é frequentemente usado como um contêiner para outros elementos, o que facilita na estilização de blocos. Também é muito útil para inclusão de interações com Scripts (JavaScript). Portanto, ele é definido com um contêiner genérico para conteúdo de fluxo.

Diante disso, o HTML Div é muito utilizado quando precisamos agrupar elementos sem a necessidade do uso de um elemento Semântico do HTML5. Isso acontece pois o elemento Div não possui um valor semântico. Portanto, não representa nada para o navegador e para os mecanismos de buscas.

Como é muito utilizado para agrupar elementos, acaba sendo um facilitador para organizar informações dentro de um Layout. Dessa forma, é possível formatar e manipular os elementos, inclusive a própria div, através do CSS de uma forma organizada. Geralmente é acompanha de atributos de ID e Classe, para poder facilitar essa organização e formatação.

Como utilizar o HTML Div: A tag <div>

Agora que já conhecemos a definição do elemento de divisão do HTML, vamos aprender como utiliza-la.

A sintaxe do elemento HTML Div é através da tag de abertura <div> e de fechamento </div>. Por padrão, a div gera uma line-break (quebra de linha) automática ao ser utilizada. Isso ocorre pois possuí como display padrão um elemento de bloco, ou seja display block. Portanto, para utilizar a div, basta estar colocando os elementos que quisermos dentro da tag <div></div> como na sintaxe abaixo:

Dessa forma, vamos utilizar algumas divisões para poder separar os parágrafos no nosso exemplo abaixo:

Claro que podemos incluir qualquer outros elementos HTML, ou seja, outras tags, dentro de uma div HTML.

Atributos da Div HTML

O Elemento HTML Div costuma ter entre seus principais atributos:

  • id – Define uma ID;
  • class – Define uma classe;
  • title – Define um título;
  • height – Define uma altura;
  • width – Define uma largura;

Porém, com exceção do ID, da class e do title, todos os demais atributos já são considerados depreciados. Portanto, dessa forma, podemos estar definindo a altura, largura e a cor de fundo através do próprio estilo CSS, assim como diversas outras características.

O HTML Div também suporta receber todos os atributos globais, assim como também os atributos eventuais.

Alterando a cor de Fundo/Background da HTML Div

Antes da versão 5 do HTML era possível utilizar o atributo bgcolor para poder escolher uma cor de background para nossa div. Porém, a partir da versão 5, o HTML passou a não ter mais suporte a este atributo.

Portanto, para poder alterar a cor de fundo de uma div, devemos estilizar através do CSS. Para pode modificar a cor de fundo, basta estar utilizando a propriedade background ou background-color do CSS. Podemos estar utilizando o estilo inline, através do atributo style=”…”, através do CSS dentro das tags <style> ou ainda através de um folha de estilo externa.

Para utilizar a propriedade do background ou background-color, basta declarar um valor da cor. Pode ser utilizado um código hexadecimal de cores, o nome da cor, ou ainda declarar as cores através do código rgb, rgba ou hsl. Portando, vejamos então as diversas formas abaixo de estar declarando uma cor de fundo:

Independente de qual código acima for utilizado, o resultado será o mesmo, uma div contendo um fundo na cor vermelha.

Vejamos então outro exemplo, agora utilizando a tag <style> para declarar o CSS. Vamos estilizar todas as divs com uma altura de 50px e largura de 100px. Posteriormente, iremos definir uma cor para cada classe, de maneiras diferentes (nome da cor, código hexadecimal, valor RGB). Por fim, vamos incluir no nosso documento 3 elementos HTML Div, cada um com uma classe:

Com o exemplo acima, o resultado será conforme a imagem abaixo:

Utilizando cores de fundo em divs

Você pode estar utilizando uma tabela de cores HTML para poder experimentar mais a respeito.

ID e Classe

Conforme explicado anteriormente, o HTML Div comporta receber os atributos ID e Class. Ou seja, é possível estar atribuindo à uma div um ID único ou uma ou mais classes. Isso nos permite estar formatando um ou mais elementos de forma mais especifica e facilitada.

Um ID é uma configuração única, ou seja, só podemos utilizar um ID em apenas um único Elemento. Já uma classe é uma configuração que pode ser utilizada em mais de um elemento. Portanto, vejamos o exemplo abaixo:

Observe que nosso documento HTML foi dividido com 3 divs pais, cada uma contendo um ID única (cabecalho, corpo e rodape). Dentro da nossa div com a id corpo, recebemos duas divisões para nosso conteúdo. Observe que essas divisões receberam uma mesma classe: sessao_conteudo. Portanto, podemos estar estilizando as divs através de suas ids, e ainda podemos estar estilizando todas as divs que contém a mesma classe de uma só vez. Para IDs, referenciamos no CSS através do “#”, por exemplo: #cabecalho. Já para classes, reconhecemos através de um “.”, ou seja, conforme este exemplo: “.sessao_conteudo“.

Vejamos então o seguinte exemplo de estilo CSS para o documento apresentado no exemplo anterior:

Observe então o resultado conforme a imagem abaixo:

Div HTML exemplo 01

Observe que cada ID recebeu um estilo diferente. Observe também que ambas as divs que contém a classe .sessao_conteudo receberam o mesmo estilo.

A diferença entre Div e Span

Uma dúvida muito comum entre quem está aprendendo o HTML é a diferença entre as tags <div> e <span>. Ambas as tags representam elementos sem valor semântico e que podem conter outros elementos. Porém, geralmente um <span> costuma conter um texto dentro dele. Ainda assim, a principal diferença entre elas é que enquanto a <div> tem como padrão o display block, a tag <span> tem como padrão o display inline-block.

Vejamos então o código abaixo, utilizando apenas um texto tanto nas divs quanto no span:

Dessa forma, observa o resultado conforme a imagem abaixo:

Exemplo de spans e divs

Observe que os span não receberam uma quebra de linha, ficaram um do lado do outro. Já a HTML div automaticamente realiza uma quebra de linha.

Para efeitos visuais vamos agora utilizar o seguinte exemplo, incluindo um estilo CSS:

Com o exemplo acima, nosso resultado será conforme na imagem abaixo:

Exemplo visual entre Div HTML e Span

Dessa forma, fica mais evidente a diferença prática entre um elemento HTML Div e um elemento Span.

Posicionamento de HTML Div

Através das propriedades do CSS podemos estar utilizando diversas posições. Vamos explicar aqui algumas delas. Para poder alterar a posição de um elemento HTML através do CSS, podemos estar modificando a propriedade de posição, assim como utilizando técnicas como margem e flutuação, dentre outras. Dessa forma, vamos entender as propriedades position, margin e float do CSS.

CSS Postition

A propriedade position permite definirmos o tipo de posição utilizada para nosso elemento. Com isso, podemos definir uma uma posição relativa, uma posição absoluta, ou ainda uma posição fixa. Também há a posição estática e a posição pegajosa. Vamos estudar as posições relativa, absoluta e fixa:

Posição Relativa

Como sugere o nome, especifica uma posição relativa do elemento em relação a o elemento pai ou ao elemento anterior. Esta posição pode ser definida com as propriedades top, bottom, left e right. Vejamos então o exemplo abaixo:

Observe que aplicamos a todas as divs filhas uma classe contendo uma posição relativa. Observe também que a terceira div, através da classe .top50, incluímos um top de 50px. Como se trata de uma posição relativa, a div.top50 receberá uma distancia de 50px de topo em relação a div anterior. Dessa forma, teremos um resultado conforme o exemplo da imagem abaixo:

HTML Div com posição relativa

Position Absolute

A posição absoluta representa uma posição que levará em consideração a distância em relação a div pai relativa. Portanto, elá terá uma posição independente dos demais elementos, podendo até mesmo ficar por cima ou por baixo dos demais elementos. Esta posição pode ser definida com as propriedades top, bottom, left e right. Vejamos então o exemplo abaixo:

Dessa forma, o resultado do exemplo acima será conforme na imagem abaixo:

HTML Div com posição absoluta

Observe que utilizamos uma posição absoluta ao bloco vermelho. Como o elemento pai (div#elemento_pai) possui uma posição relativa, a div com posição absoluta levará em consideração apenas a posição do elemento pai. Como definimo uma valor de distância do topo e distância da esquerda de 50px, chegamos ao exemplo acima. Se não tivéssemos atribuído as propriedades top e left, a mesma ficaria por cima do bloco azul.

Position Fixed

A posição fixa é muito parecida com a posição absoluta. Porém, ela se mantém fixa, ou seja, independente da posição da barra de rolagem (scroll), este elemento se encontrará na mesma posição da tela. Esta posição pode ser definida com as propriedades top, bottom, left e right.

Portanto, vejamos o exemplo abaixo:

Observe então nas imagens abaixo a mesma página, porém com posição da barra de rolagem diferentes. Mesmo assim, a div#fixo se mantém na mesma posição em relação a tela:

Posição Fixed

CSS Margin

Através de uma margem, podemos estar manipulando a posição de um elemento HTML. Com isso podemos estar posicionando um elemento HTML Div através da margin. Existem 4 margin: margin-top, margin-right, margin-bottom, margin-left. Ou seja, margem superior, margem à direita, margem inferior e margem à esquerda. Também podemos utilizar a propriedade margin, contendo 1, 2 ou 4 valores. Caso utilize apenas 1 valor, esse valor será aplicado a todas as margens. Caso utilize dois valores, como por exemplo margin:10px 5px, o primeiro valor será para as margens superiores e inferiores, já o segundo valor será para as margens direita e esquerda. Por fim, utilizando 4 valores, o primeiro representa a margem superior, o segundo margem a direita, o terceiro a margem inferior e a quarta a margem a esquerda.

Desta forma, vejamos então o exemplo abaixo:

Dessa forma, nosso elemento div.div_1 fica com uma margem inferior de 20px, portanto o resultado será como na imagem abaixo:

HTML DIV com margem

Podemos ainda utilizar a margem para centralizar uma HTML div. Para isso, basta definir que uma margem a direita e a esquerda fiquem no modo automático. Dessa forma, a margem será definida igualmente para ambos os lados e, portanto, o elemento ficará centralizado. Vejamos o exemplo abaixo:

Dessa forma, teremos o resultado abaixo:

Margin auto

Observe que o elemento ficou centralizado. Poderíamos também ter utilizado a propriedade de margem dessa forma: margin: 0 auto;.

Este recurso é muito utilizado para a criação de contêiner com um limite de largura que deve se manter sempre centralizado a página. Portanto, é importante entender como funciona esta técnica, pois, muito provavelmente, você precisará utiliza-la ou verá em diversas folhas de estilo.

CSS Float

Existe uma propriedade muito útil do CSS chamado de float, ou flutuação. Desta forma é possível manter um elemento flutuado. Por exemplo, quando queremos manter duas divs em uma mesma linha, podemos estar flutuando elas. Ou ainda quando queremos manter um texto e uma div flutuando ao lado desse texto. Podemos utilizar o float:left; para flutuar o elemento à esquerda ou ainda o float:right; para flutuar o elemento à direita. Para limpar uma flutuação podemos usar o float:none;. Porém, a flutuação é uma propriedade um pouco imprecisa, portanto, recomenda-se utilizar aliado a propriedades de margem ou padding. Para que não ocorra erros de renderização, também é importante, sempre que utilizar uma flutuação, estar limpando a mesma com a propriedade clear. Vejamos então o seguinte exemplo:

Observe então, que no exemplo acima, utilizamos uma div pai, com a classe .container, para poder conter os elementos dentro de até 400px. Posteriomente, incluímos duas divs, cada um contendo uma classe com flutuação para um dos lados. Por fim, utilizamos uma div com o estilo “clear:both” para poder limpar o efeito da flutuação. Vejamos então o resultado abaixo:

Utiizando flutuação nas divs

Caso não utilizássemos a propriedade clear ao final dos elementos flutuados, observe que o elemento pai, que contém uma altura automática sumiria, portanto, geraria uma falha no layout:

Exemplo de flutuação sem o clear

Vamos agora ver uma forma de utilizar uma div flutuando ao lado de um texto:

Dessa forma, obtemos o resultado do exemplo conforme a imagem abaixo:

HTML Div flutuante com texto

Portanto, podemos estar utilizando o float para diversas situações, principalmente em casos envolvendo texto e HTML Div. Isso nos permite criar diversos elementos dentro do layout de nossas páginas Web.

Porém, apesar dos conhecimento sobre flutuação serem muito importantes, já são considerados ultrapassados para o desenvolvimento completo de Layouts. Portanto, recomendamos utilizar a flutuação apenas em casos realmente necessário e não como elemento principal de layout.

Conclusão sobre HTML Div

Com este artigo, você já obtém um domínio completo sobre o elemento HTML div. Aconselhamos ainda, que para um melhor aproveitamento, você estudem a respeito dos diversos tipos de display, como por exemplo o flexbox e o grid.

Portanto, conhecer as característica, atributos e propriedades envolvendo HTML div nos permite criar uma página HTML bem mais complexa. Porém, é necessário estar atento a quando utilizar uma divisão com HTML div, pois com o HTML5, é importante manter um código semântico, e podemos criar divisões com outros elementos que carregam esse valor.

Em nosso blog, você pode estar encontrado mais artigos sobre HTML, CSS e diversos outros assuntos da área de desenvolvimento e TI. Portanto, recomendamos praticar bem todos os exemplos desse artigo, além de aproveitar para aprofundar seus estudos com outros artigos. Com isso, você poderá criar páginas HTML profissionais e, portanto, criar seus próprios websites.

Você pode estar contratando um plano de Hospedagem  para poder colocar suas páginas online!!! A HomeHost oferece diversos planos para você, escolha o que melhor lhe atender e comece agora a colocar seu projeto na Web!

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat