Etiqueta HTML <div>

  • Página Anterior <dir>
  • Próxima Página <dl>

Definição e uso

<div> As etiquetas definem a divisão ou parte (seção ou subdivisão, divisão/section) de documentos HTML.

<div> As etiquetas podem dividir documentos em partes independentes e diferentes. Elas podem ser usadas como ferramenta de organização rigorosa e não estão associadas a nenhum formato.

Qualquer tipo de conteúdo pode ser colocado <div> dentro!<div> pode ser usado como contêiner de elementos HTML, e então pode ser configurado com CSS ou operado com JavaScript.

se o tag id ou class for usado para marcar <div>se o tag class ou id permite que você <div> estabelece estilos de tags. A propriedade

Atenção:Por padrão, os navegadores sempre <div> Coloque um caractere de nova linha antes e depois do elemento.

Uso

<div> é um elemento de bloco. Isso significa que seu conteúdo começa automaticamente uma nova linha. Na verdade, o recuo é <div> formato único inerente. Pode-se <div> um class ou id estilo adicional a cada

Não é necessário aplicar <div> às, embora isso também tenha seus próprios benefícios.

Pode-se adicionar o mesmo <div> Aplicação de elementos class ou id Atributos, mas com mais frequência é aplicado apenas um dos dois. A principal diferença é que a class é usada para grupos de elementos (elementos semelhantes, ou pode ser entendida como um tipo de elemento), enquanto o id é usado para identificar elementos únicos individuais.

Veja também:

Tutorial HTML:Elementos de Bloco e Inline em HTML

Tutorial HTML:Layout em HTML

Manual de referência HTML DOM:Objeto Div

Exemplo

A parte do <div> no documento que usa configurações de estilo CSS:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Este é o título dentro do elemento div</h2>
  <p>Este é o texto dentro do elemento div.</p>
</div>
</body>
</html>

Experimente Você Mesmo

Caso de estudo

<body>
 <h1>Novo site</h1>
  <p>Algum texto. Algum texto. Algum texto...</p>
  ...
 <div class="news">
  <h2>Manchete de notícias 1</h2>
  <p>Algum texto. Algum texto. Algum texto...</p>
  ...
</div>
 <div class="news">
  <h2>Manchete de notícias 2</h2>
  <p>Algum texto. Algum texto. Algum texto...</p>
  ...
 </div>
 ...
</body>

Exemplo de explicação

Como você vê, o HTML acima simula a estrutura de um site de notícias. Cada div combina o título e o resumo de cada notícia, o que significa que a div adiciona uma estrutura adicional ao documento. Além disso, pois essas divs pertencem ao mesmo tipo de elemento, podem ser identificadas com class="news", o que não só adiciona o significado apropriado às divs, mas também facilita o uso de estilos para formatar as divs, sendo uma vantagem dupla.

Dica:Para aprender mais sobre o uso de class e id, leia o capítulo 'Marcadores Estruturados' do W3school, na seção 'Div, id e outros ajudantes'.

Atributos Globais

<div> O rótulo também suporta Atributos Globais no HTML.

Atributos de Evento

<div> O rótulo também suporta Atributos de Evento no HTML.

Configurações CSS Padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <div> Elemento:

div {
  display: block;
}

Experimente Você Mesmo

Suporte ao Navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte
  • Página Anterior <dir>
  • Próxima Página <dl>