Tag HTML Div | spiegato

Il Diving si riferisce alla divisione o alla sezione in un documento HTML. È un contenitore vuoto che può contenere vari elementi HTML. Lo scopo del div è di aggiungere stili CSS specifici agli elementi utilizzati nel rispettivo tag DIV. Il tag DIV appartiene alla categoria Block HTML di elementi e quindi inizia una nuova linea ogni volta che viene iniziata.

Un div può contenere diverse altre divisioni e ogni div contiene varie proprietà di styling. Lo scopo principale di un div è quello di creare un gruppo di tipi simili di elementi in modo che possano essere facilmente disegnati. A causa della sua funzionalità estesa, viene definito il tag chiave durante lo sviluppo di una pagina Web utilizzando HTML. In questo articolo, abbiamo dimostrato il funzionamento del tag DIV e alcuni esempi sono illustrati per mostrare l'uso del tag DIV.

Come funziona il tag HTML Div

Il tag DIV comprende tag di avvio e chiusura e la seguente sintassi viene utilizzata per creare un div in HTML.

Qualunque cosa scritta tra questi tag adotterà i valori impostati per questo div. Per una comprensione di base, viene creato un div utilizzando il seguente codice.

Una div viene creata sulla pagina web

questo è div

Il codice è descritto come segue:

- Il titolo della pagina sarà "Div Tag"

- Lo sfondo del corpo è impostato su "verde mare chiaro"

- Viene creato un div e il suo colore di sfondo è impostato su "giallo"

- Un paragrafo viene creato nel tag DIV

L'immagine del codice è fornita di seguito:

L'output della pagina Web è mostrato di seguito:

Le seguenti osservazioni possono essere fatte dall'output sopra:

- Il tag Div crea una nuova riga

- occupa l'intera larghezza (se il limite non è impostato) della pagina

Come utilizzare il tag HTML Div

Il funzionamento di base del tag DIV è spiegato nella sezione sopra. Tuttavia, questa sezione spiega l'uso del tag HTML Div in vari scenari. Come affermato in precedenza, più elementi sono contenuti in un div per modellare tutti questi elementi in modo simile. Poiché lo stile è possibile con CSS, si consiglia di utilizzare una classe CSS in linea o esterna.

Esempio 1: utilizzando un tag HTML Div con più classi CSS

Un tag DIV può essere utilizzato con più classi CSS. Per praticare questa funzionalità, viene utilizzato il seguente codice HTML:

Il div usando due classi CSS

Benvenuti in Linuxhint

Una valle di tecnologia

Il codice è descritto di seguito:

- Vengono create due classi CSS denominate "colore" e "misc".

- La classe di colore definisce "colore di sfondo" e "colore dei caratteri", mentre la classe misc contiene la "larghezza", "imbottitura" e "stile del carattere"

- Un div viene creato con un attributo di classe e usato il nome di entrambe le classi in esso

- Tre elementi HTML

,

e sono usati nel div

Nota: Quando si utilizza più nomi di classi in un attributo di classe del tag DIV, è necessario aggiungere uno spazio tra i nomi delle classi per differenziare entrambe le classi.

L'immagine del codice è fornita di seguito:

L'output del codice HTML su una pagina Web è mostrato di seguito:

Esempio 2: utilizzando più tag DIV

L'uso di più Div è la parte confusa del tag HTML Div. Il seguente codice HTML si riferisce all'utilizzo di più Div con vari

Primo Div

Benvenuti in Linuxhint

Secondo div

principale fornitore di contenuti

Il codice è descritto come:

- hanno creato due classi CSS chiamate "First" e "Second"

- La "prima" classe definisce "colore di sfondo", "colore del carattere", larghezza, "galleggiante"

- La "seconda" classe ha proprietà come "colore di sfondo", "larghezza", "float"

- Un div viene inizializzato con un attributo di classe e "primo" come valore dell'attributo

- Un altro div viene creato con "secondo" come valore dell'attributo di classe

L'immagine del codice è mostrata di seguito:

L'output di Web-Page è mostrato di seguito:

Conclusione

Il tag DIV in HTML si riferisce alla creazione di un contenitore che consente di creare un gruppo di elementi HTML che possono essere disegnati allo stesso modo. Questo articolo ha dimostrato il meccanismo di lavoro del tag DIV. Inoltre, sono affermati diversi esempi che mostrano come un tag HTML Div può essere utilizzato in vari scenari.