No HTML, a tag é a tag mais importante e é utilizada na maioria dos documentos. A tag é considerada como o contêiner para outras tags HTML. Portanto, pode ser usado para aplicar várias tags HTML em uma parte desejada do documento.

A tag também pode ser usada para dividir uma página HTML em várias seções. Esta redação visa guiá-lo como as tags div podem ser usadas para dividir a página. Os seguintes resultados são esperados:

• Como usamos tags div para dividir as páginas HTML em seções horizontais?
• Como usamos tags div para dividir as páginas HTML em seções verticais?

Como usamos a tag div para dividir a página HTML em seções horizontais?

No HTML, uma tag atua como uma seção para os dados na página HTML. Para dividir uma página em seções, você precisa escrever as tags HTML necessárias dentro da tag. Vamos ver o exemplo prático abaixo para entender a divisão de páginas HTML por tag.

Html

Dividindo a página HTML usando a tag

Seção 1
Seção 2
Seção 3

Neste código, usamos três tags. Essas tags estão associadas às três classes CSS. O código CSS usado no código HTML acima é fornecido abaixo:

CSS

div

Alinhamento de texto: centro;
tamanho da fonte: 30px;
cor branca;
preenchimento: 10px;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Altura: 150px;
largura: 98%;

.um

Background-Color: Limegreen;

.dois

cor de fundo: laranja;

.três

Background-Color: Hotpink;

Na parte CSS, direcionamos as três tags para formatar o conteúdo de todos os divs. Para dar cores diferentes para cada div, três classes “um","dois", e "três" são criados.

Saída

A saída mostra que uma página da web está dividida em três seções usando tag html.

Como usamos a tag div para dividir a página HTML em seções verticais?

No HTML, podemos usar a tag para dividir uma página da web em seções verticais. Vamos ver o exemplo prático abaixo para entender a divisão vertical de uma página HTML usando a tag.

Html

Dividindo a página HTML usando a tag

Seção 1
Seção 2
Seção 3

Neste código, criamos três seções usando a tag. Para uma melhor apresentação, aplicamos o seguinte CSS nas tags DIV:

CSS

div

Alinhamento de texto: centro;
tamanho da fonte: 30px;
cor branca;
preenchimento: 10px;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Altura: 500px;
largura: 30%;

.um

Background-Color: Limegreen;
flutuar: esquerda;

.dois

cor de fundo: laranja;
flutuar: esquerda;

.três

Background-Color: Hotpink;
flutuar: esquerda;

Na parte do CSS, visamos todos os divs e usamos propriedades diferentes para dar o tamanho da fonte de altura, largura, preenchimento e fundo do conteúdo da DIV. Observa -se que as seções verticais são criadas com a ajuda de flutuador propriedade do CSS e seu valor está definido como esquerda.

Saída

A saída mostra que uma página da web está dividida em três seções usando tag html.

Conclusão

No HTML, podemos dividir uma página inteira em seções usando tag junto com o CSS. Por padrão, uma tag divide uma página da web em seções horizontais. No entanto, você pode usar a propriedade Float do CSS para fazer as seções verticais da página da web. Seguindo este guia, você pode aplicar a tag para dividir a página HTML.