Come già saprai, il tag DIV è utilizzato tantissimo nella scrittura di pagine web in HTML perché consente di differenziare i blocchi di codice e modificarli secondo le proprie esigenze di stile e non solo. In questo articolo presenteremo alcuni esempi che possono essere utili a comprenderne l’utilizzo.
Come già detto, il tag <div> viene utilizzato al meglio per aggiungere uno stile o per contrassegnare la semantica comune a un gruppo di elementi consecutivi. Ecco alcuni esempi di stili o semantiche che puoi aggiungere con l’elemento div.
Primo Esempio: Tag <Div> con attributo Lang
Supponiamo che la lingua predefinita del testo su una pagina Web sia l’italiano, ma una sezione sia in un’altra lingua. Per contrassegnare questa particolare sezione su una pagina web, è sufficiente posizionare gli elementi all’interno di un div con l’aggiunta di un attributo di lingua, impostato su quella desiderata. Di seguito un esempio pratico:
<articolo lang=”it”>
<pag >La lingua predefinita della pagina web è l’italiano. Ma immediatamente dopo c’è una frase in francese, che è contrassegnata dal seguente div.</p>
<div lang=”fr”>
<p> Exemple de phrase.</p>
</div>
</articolo>
Ciò imposterebbe contemporaneamente la lingua dell’intestazione all’interno del div, quindi non è necessario impostare la lingua di ciascun elemento separatamente. Gli elementi al di fuori del div rimarrebbero impostati sulla lingua predefinita. E se vogliamo modificarne lo stile? Ecco un secondo esempio che fa al caso vostro.
Secondo esempio: Tag <div> con attributo di classe
Per cambiare lo stile del div, inizierai come hai fatto sopra, ma invece di aggiungere un attributo di lingua, aggiungerai un ID o un attributo di classe. Utilizzerai quindi il selettore corrispondente per aggiungere il CSS che desideri.
Ecco l’HTML:
<div class=”myDiv”>
<h2>Intestazione</h2>
<p>Questo è del testo in un elemento div.</p>
</div>
<p>Questo è del testo al di fuori dell’elemento div.</p>
Quindi in un foglio CSS o in qualsiasi punto esterno alla pagina potrai utilizzare il selettore di classe .myDiv e definire le proprietà CSS che desideri.