Basic  »  Articoli  »  HTML per iniziare 

Div è uno tra i tag più utilizzati nella creazione di pagine Web, soprattutto nella creazione di layout, fornisce a tutti gli effetti un vero e proprio elemento strutturale della pagina.

Una delle principali funzioni di un div (sta per divide) è proprio quello di suddividere gli spazi in zone, permettendoci di progettare il nostro sito in modo semplice e dettagliato.

Facciamo subito un esempio: immaginando di dover costruire un sito pensiamo a come esso debba essere strutturato, tipicamente abbiamo

• un conteitore (container)
• una parte alta (header)
• un corpo centrale (middle)
• un menu (navigation)
• una parte bassa (footer)
• spesso anche un pannello laterale (sidebar)

Tutte queste porzioni possono essere rappresentate, nel nostro layout, grazie ad altrettanti div ai quali assegnaremo dei nomi grazie all'attributo id.

<div id="container">

    <div id="header">
	
	    <div id="navigation"></div><!--#navigation-->
		
	</div><!--#header-->

        <div id="main"></div><!--#main-->

        <div id="sidebar"></div><!--#sidebar-->
	
	<div id="footer"></div><!--#footer-->

</div><!--#container-->

È buona norma, quando chiudiamo il div, scrivere un piccolo commento, che ci aiuti a riconoscere l'elemento anche quando il codice diventa più complesso.

Nel caso esposto l'alberatura dei tag prevede che il menu sia nell'header, ma possiamo scegliere soluzioni diverse a seconda delle nostre esigenze. Ciò che è importante è che possiamo avere un riferimento quando inseriamo nuovi elementi all'interno della pagina, in questo modo ogni cosa sarà più semplice mettere ogni cosa al suo posto.

Questa scelta in genere si compie già a livello di wireframe, ovvero nel momento in cui abbiamo disegnato la struttura del nostro sito. Ecco il layout che avremmo potuto aver in mente prima di arrivare a scrivere il nostro markup:

Figura 1. Il wireframe

Questo uso del Div viene parzialmente a mancare con l'avvento di HTML5. Ora possiamo già sostituirlo con alcuni elementi di layout come header, section, aside e footer, questi elementi sono contenitori "semantici", prevedono che i contenuti siano aggregati al loro interno con un certo significato (per approfondire si veda la guida).

Div rimane comunque fondamentale nel markup per selezionare quelle aree che non hanno il valore semantico introdotto dai nuovi tag e le funzioni sono varie: selettore cui agganciare un CSS a placeholder per inserire elementi dinamici con Javascript (o con framework come jQuery).

Altri articoli

Altre guide

Altre newsletter