back to top

il tag DIV di HTML

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>

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico è una collezione di pagine web...
Pubblicità