Il tag <DIV> in Html
In questa lezione del corso Html di StemKB ti spiego cos'è e a cosa serve il tag <div> nel linguaggio HTML
<div> </div>
Il tag <div> è utilizzato per creare una sezione della pagina web che puoi stilizzare con CSS.
Il contenuto della sezione è un blocco di testo inserito tra il tag di apertura <div> e il tag di chiusura </div>.
<div> blocco di testo </div>
Puoi usare il tag <div> esclusivamente nella sezione <body> del documento HTML.
Ti faccio un esempio pratico.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Titolo della pagina</title>
- </head>
- <body>
- <div>Questo è il primo blocco di testo.</div>
- <div>Questo è il secondo blocco di testo.</div>
- ...
- </body>
- </html>
In questo documento ci sono due tag <div>
Entrambi i tag <div> si trovano all'interno della sezione <body> e individuano due blocchi di testo.
Perché si chiama div? Il tag <div> è l'abbreviazione di "divisione" perché è usato sostanzialmente per dividere il contenuto della pagina in diverse sezioni logiche.
A cosa serve?
Inizialmente il tag <div> crea una sezione vuota senza alcun contenuto predefinito.
Puoi però usarlo per applicare al blocco di testo uno stile particolare (es. colore del testo, sfondo, allineare e disporre i blocchi sulla pagina, ecc.) tramite l'attributo class che richiama una classe del foglio CSS
<div class='stile1'>Contenuto della sezione</div>
oppure tramite l'attributo id che richiama un identificatore del foglio CSS
<div id='stile1'>Contenuto della sezione</div>
Qual è la differenza tra id e class? Entrambi gli attributi richiamano e applicano uno stile del foglio CSS. Tuttavia, l'attributo id puoi usarlo una sola volta nel documento HTML ossia su un solo elemento della pagina. L'attributo class, invece, lo puoi applicare contemporaneamente anche a più elementi della pagina.
Se vuoi puoi annidare più divisioni in una pagina ossia inserire i tag <div> dentro altri <div>
In questo caso i div più interni, oltre ad avere un proprio stile, ereditano anche gli stili dei div più esterni.
<div class='stile1'>
Contenuto della sezione
<div class='stile2'>Contenuto della sezione più interna</div>
</div>
Il tag <div> ti aiuta anche a organizzare il contenuto della pagina web in sezioni logiche distinte e a gestire il layout della pagina.
Spesso i tag <div> sono usati per creare delle sezioni allineate. Ad esempio, la testata, il menu laterale, la sezione del contenuto principale, il footer, ecc.
Pertanto, con la diffusione dei fogli di stile il tag <div> è diventato uno degli elementi HTML più importanti.
Ecco un esempio di pagina web completa che utilizza i tag <div> e un foglio di stile CSS
- <!DOCTYPE html>
- <html>
- <head>
- <title>titolo della pagina</title>
- <style>
- .stile1 {
- background-color: #f2f2f2;
- padding: 20px;
- border: 1px solid #ccc;
- margin-bottom: 20px;
- }
- </style>
- </head>
- <body>
- <h1>Il mio sito web</h1>
- <div class='stile1'>
- <p>Questo è il primo blocco di testo</p>
- ....
- </div>
- ...
- <div class='stile1'>
- <p>Questo è il secondo blocco di testo</p>
- ...
- </div>
- </body>
- </html>
Nella pagina viene definito uno stile CSS chiamato 'stile1' che definisce il colore di sfondo, un bordo e un margine inferiore.
Lo stile viene poi richiamato da due divisioni <div> della pagina HTML tramite l'attributo class='stile1'.
In questo modo, il tag <div> ti ha permesso di applicare lo stesso stile a due sezioni distinte della pagina.
Qual è la differenza tra div e span
Il tag <div> e il tag <span> sono entrambi elementi del linguaggio HTML utilizzati per creare contenuto vuoto e stilizzabile all'interno di una pagina web, ma ci sono alcune importanti differenze.
- Il tag <div> lo puoi utilizzare per creare un grande contenuto vuoto della pagina. Spesso si tratta di un blocco che contiene testo, immagini, ecc. E' utile per dividere il layout della pagina web in diverse sezioni a cui puoi associare degli stili CSS.
- Il tag <span> lo puoi usare per creare un piccolo contenuto vuoto all'interno di un testo. Ad esempio, una singola parola o frase a cui vuoi applicare un determinato stile CSS senza modificare il resto del testo. Il tag <span> non genera un nuova linea e non ha una larghezza o altezza predefinita.
In sintesi, il tag <div> si usa per i blocchi di testo e le grandi sezioni della pagina mentre il tag <span> per singole parti di un testo.
