Il tag div nell'HTML

Il tag div viene usato in HTML per raggruppare vari elementi diversi e assegnare loro le stesse regole CSS, come colore, tipo di carattere, posizione, sfondo e altro.

Div è quindi uno dei vari elementi che si possono inserire nel codice HTML all’interno del corpo di una pagina web. Al suo interno possono essere inseriti titoli, paragrafi, immagini e media. Il suo tag di apertura è <div> mentre quello di chiusura è </div>. E’ come se tutto ciò che si trova dentro questi due tag fossero all’interno di un riquadro visibile o invisibile. Ecco un esempio:

<div>
  <p>Gli animali nel mondo</p>
 <h2>Uccelli</h2>
  <img>...</img> 
</div>

In una pagina web vengono usati vari elementi div che contengono il menù, la sezione di un articolo, eventuali sezioni aggiunte a destra e a sinistra che contengono altre informazioni, banner pubblicitari e sezioni finali.

Personalizzare il tag div

Per modificare la rappresentazione visiva di tutto ciò che è all’interno di div basterà inserire delle regole di stile all’interno della pagina HTML oppure su un foglio di stile.

Se vogliamo modificare direttamente un singolo blocco di elementi allora imposteremo le proprietà direttamente sul tag:

<div style = "border: solid 3px red; text-align: center;" >
  <p>Gli animali nel mondo</p>
 <h2>Uccelli</h2>
  <img>...</img> 
</div>

Altrimenti possiamo inserire la regola nel foglio CSS, inserendo il selettore div:

div {
  border: solid 3px red; 
  text-align: center;
}

In questo modo, però, tutti i blocchi di elementi avranno le stesse regole e personalizzazioni. Non è sicuramente comodo nel caso dobbiamo creare un menù, una sezione dove scriviamo il contenuto principale, una sezione a destra per i collegamenti social e altro. Per questo motivo, è più comodo assegnare degli id e delle classi a ciascun elemento in modo che abbia la sua personalizzazione. Ecco un esempio del codice HTML e del foglio di stile:

<div id="menu">
 <ul>...</ul>
</div>
<div id="articolo">
  <p>Gli animali nel mondo</p>
 <h2>Uccelli</h2>
  <img>...</img> 
</div>

#menu {
  border: solid 3px blue; 
  text-align: center;
}
#articolo {
  border: solid 3px red; 
  text-align: center;
  margin: 40px;
}
h2 {
  color: red;
}

Possiamo personalizzare i singoli elementi dentro il blocco div perché la regola assegnata a ciascuno di loro sovrascriverà quella generale. Per modificare il colore o altre caratteristiche di singole parole si usa il tag span.

Il tag div nell’HTML

Personalizzare il tag div