Il tag DIV è uno dei tag più importanti del linguaggio HTML in quanto può essere definito come un elemento "neutro" del markup grazie al quale è possibile assolvere diversi compiti tra cui, soprattutto, la definizione di diverse porzioni all’intero di una pagina web.
Il termine DIV nasce come abbreviazione di "divide" (separatore) e, in un certo senso, la funzione di questo tag consiste proprio in questo: creare delle sezioni all’interno di una pagina web al fine di separare diverse aree della pagina come, ad esempio, l’header, il menu ed il footer.
Nel web-design tradizionale (cioè precedente ad HTML5), infatti, le aree della pagina vengono definite mediante dei DIV opportunamente stilizzati mediante l’uso dei CSS. In questo modo, pertanto, il DIV estrinseca la sua funzionalità tipica. Vediamo un esempio di una banale struttura di pagina realizzata mediante l’utilizzo dei DIV:
<!DOCTYPE html>
<html>
...
<body>
<div id="container">
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
</body>
</html>Come detto il tag DIV è "neutro" nel senso che, se non opportunamente stilizzato, non offre alcun risultato visibile all’interno della pagina web se non un semplice ritorno a capo (questo perchè il DIV, tecnicamente, è un elemento di tipo block e produce, cioè, un ritono a capo). Quindi:
<div>Questa è una linea...</div>
<div>Questa è un'altra linea...</div>Ne consegue (tornando al codice del primo esempio) che senza un’opportuna stilizzazione CSS il risultato sarà del tutto insoddisfacente: a differenza di altri tag che posseggono un aspetto caratterizzante (si pensi alle tabelle) il tag DIV è "invisibile" perchè appartiene unicamente alla struttura della pagina.
Scopo dei DIV, quindi, è quello di fungere da semplici contenitori il cui aspetto, dimensione, posizione e funzione dovono essere definiti, di volta in volta, dal designer della pagina web.
Normalmente, quindi, a ciascun div è assegnata una classe o un ID oppure, più raramente, una stilizzazione inline. La conoscenza dei fogli di stile CSS, quindi, è un requisito indispensabile per lavorare con questo potente tag.
Per finire è bene ricordare che il tag DIV, proprio a causa della sua duttilità, è estremamente prezioso e spesso utilizzato in comunione con Javascript per fungere, ad esempio, da placeholder per il caricamento di contenuti dinamici. Vediamo un banalissimo esempio:
<script>
function carica_dati() {
document.getElementById("caricadati").innerHTML = 'Contenuto dinamico';
}
<script>
<div id="caricadati"></div>
<a href="javascript:carica_dati()">clicca qui</a>