In HTML, il tag è il tag più importante ed è utilizzato nella maggior parte dei documenti. Il tag è considerato come il contenitore per altri tag HTML. Pertanto, può essere utilizzato per applicare più tag HTML su una parte desiderata del documento.

Il tag può anche essere utilizzato per dividere una pagina HTML in più sezioni. Questo articolo mira a guidarti come i tag DIV possono essere usati per dividere la pagina. Sono previsti i seguenti risultati:

• Come usiamo i tag DIV per dividere le pagine HTML in sezioni orizzontali?
• Come usiamo i tag DIV per dividere le pagine HTML nelle sezioni verticali?

Come utilizziamo il tag div per dividere la pagina HTML in sezioni orizzontali?

In HTML, un tag funge da sezione per i dati nella pagina HTML. Per dividere una pagina in sezioni, è necessario scrivere i tag HTML richiesti all'interno del tag. Vediamo l'esempio pratico di seguito per comprendere la divisione delle pagine HTML per tag.

Html

Dividi la pagina HTML usando il tag

Sezione 1
Sezione 2
Sezione 3

In questo codice, abbiamo usato tre tag. Questi tag sono associati alle tre classi CSS. Di seguito è fornito il codice CSS utilizzato nel codice HTML sopra:

CSS

div

Testo-align: centro;
Font-size: 30px;
colore bianco;
imbottitura: 10px;
display: flex;
ALIGE-ITMS: CENTRO;
giustificare contento: centro;
Altezza: 150px;
larghezza: 98%;

.uno

Background-color: Limegreen;

.due

Background-color: Orange;

.tre

Background-color: hotpink;

Nella parte CSS, abbiamo preso di mira tutti e tre i tag per formattare il contenuto di tutti i div. Per dare colori diversi a ogni div, tre classi "uno","due", E "tre" sono creati.

Produzione

L'output mostra che una pagina Web è divisa in tre sezioni utilizzando il tag HTML.

Come usiamo il tag DIV per dividere la pagina HTML nelle sezioni verticali?

In HTML, possiamo usare il tag per dividere una pagina web in sezioni verticali. Vediamo l'esempio pratico di seguito per comprendere la divisione verticale di una pagina HTML usando il tag.

Html

Dividi la pagina HTML usando il tag

Sezione 1
Sezione 2
Sezione 3

In questo codice, abbiamo creato tre sezioni usando il tag. Per una migliore presentazione, abbiamo applicato i seguenti CSS sui tag DIV:

CSS

div

Testo-align: centro;
Font-size: 30px;
colore bianco;
imbottitura: 10px;
display: flex;
ALIGE-ITMS: CENTRO;
giustificare contento: centro;
Altezza: 500px;
larghezza: 30%;

.uno

Background-color: Limegreen;
Float: a sinistra;

.due

Background-color: Orange;
Float: a sinistra;

.tre

Background-color: hotpink;
Float: a sinistra;

Nella parte di CSS prendiamo di mira tutti i Div e abbiamo usato proprietà diverse per dare l'altezza, la larghezza, l'imbottitura e la dimensione del carattere di fondo al contenuto di div. Si osserva che le sezioni verticali sono create con l'aiuto di galleggiante Proprietà di CSS e il suo valore è impostato su Sinistra.

Produzione

L'output mostra che una pagina Web è divisa in tre sezioni utilizzando il tag HTML.

Conclusione

In HTML, possiamo dividere un'intera pagina web in sezioni usando TAG insieme al CSS. Per impostazione predefinita, un tag divide una pagina web in sezioni orizzontali. Tuttavia, è possibile utilizzare la proprietà float di CSS per realizzare le sezioni verticali della pagina web. Seguendo questa guida, è possibile applicare il tag per dividere la pagina HTML.