Tag div in HTML: tutto ciò che c’è da sapere sull’uso del container div

Il tag div viene utilizzato per dividere e separare i contenuti in HTML. Poiché il container div non ha un significato semantico proprio, il suo utilizzo è consigliato solo quando non è possibile utilizzare altri elementi.

Registrazione dominio

Più di un semplice nome.

Registra il tuo dominio con IONOS e approfitta di tutte le nostre funzionalità.

E-Mail
SSL Wildcard
Supporto 24/7

Cos’è un container div e per cosa viene utilizzato?

Per avere un’idea di cosa sia il tag div in HTML basta guardare all’origine del termine. Il termine div deriva dalla parola inglese division, cioè “area”, “sezione” o anche “divisione” e “suddivisione”. Un container div serve principalmente come contenitore per altri elementi HTML. Sebbene sia possibile posizionare gruppi e aree, il tag div non ha un proprio significato semantico nell’HTML. Il suo compito principale è quindi quello di creare e delimitare aree che possono poi essere formattate con i CSS. Il container div non ha alcuna influenza sul layout o sul contenuto di un sito web.

Questo significa anche che div non ha più un ruolo così importante nell’HTML. Mentre il container div era usato frequentemente nelle versioni precedenti, il suo uso è stato massicciamente limitato con HTML5 e HTML 5.1. Solo se non è possibile utilizzare nessun altro elemento (ad esempio article, aside, header, main, nav o section), si deve utilizzare il container div per la struttura. Si raccomanda pertanto di cercare soluzioni semanticamente più adatte prima di utilizzare div nell’HTML. Come elemento a livello di blocco, il container div viene inserito prima e dopo un’interruzione di riga.

Come si usa div nell’HTML?

Il tag div viene utilizzato in HTML principalmente per formattare elementi HTML con CSS che appartengono insieme visivamente, per raggruppare diversi blocchi HTML e posizionarli in modo chiaro e per animare HTML, CSS e contenuti con l’aiuto di JavaScript. Nell’esempio seguente potete vedere come viene costruito un container div senza attributi:

<div>
<h2>Elenco di esempio</h2>
<ul>
<li>Primo punto dell’elenco</li>
<li>Secondo punto dell’elenco</li>
<li>Terzo punto dell’elenco</li>
<li>Quarto punto dell’elenco</li>
</ul>
</div>

In linea di principio, quasi tutti i contenuti scorrevoli possono essere inseriti all’interno del container div. In HTML, div non ha alcun effetto sulla presentazione del contenuto, ma si limita a delimitarlo.

Quali attributi supporta il container div?

div supporta solo gli attributi globali dell’HTML. Un’eccezione è rappresentata da align, che non è più consentito per i container div dall’introduzione di HTML5. Gli attributi HTML più comunemente utilizzati per div sono class e id. Di seguito trovate due esempi di container div con attributi:

<div class="Esempio">
<h2>Qui c’è un esempio di titolo</h2>
<p>Qui potete inserire un esempio di testo che verrà delimitato dal container div</p>
</div>

Anche l’attributo id può essere utilizzato facilmente con un container div:

<div id="Esempio">
<ul>
<li><a href="index.html" title="Pagina principale">Pagina principale</a></li>
<li><a href="contact.html" title="Lasciateci un messaggio">Contatti</a></li>
<li><a href="about.html" title="Chi siamo">About</a></li>
</ul>
</div>

Conclusione: div è ormai superato in HTML

Ci sono vari motivi per cui div non ha più un ruolo importante nell’HTML. Non si tratta tanto dei problemi che un container div comporta, quanto del fatto che i tag HTML semantici strutturano i dati decisamente meglio, servendosi ad esempio di dati strutturati, e quindi rendono la manutenzione molto più semplice. Le correzioni all’interno del documento possono essere eseguite molto più rapidamente utilizzando altri oggetti come header, footer, article o section. Se imparate l’HTML o imparate il CSS, è bene conoscere anche div; tuttavia, dovreste usare elementi semanticamente più appropriati.

Consiglio

Sapete già come dovrebbe apparire il vostro sito web? Con le soluzioni web di IONOS, come ad esempio MyWebsite Now, potete costruire da soli la vostra presenza professionale online. Tuttavia, se avete bisogno di aiuto, il nostro team di esperte ed esperti sarà pronto a fornirvi consulenza e supporto.

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.