Tag HTML <div>
Scopri come usare il tag <div> per raggruppare elementi HTML e stilizzarli con CSS, applicare class, id, style e altri attributi. Esempi pratici.
Il tag <div> è un contenitore usato per definire una divisione o una sezione. È un elemento block-level che non influisce intrinsecamente sul contenuto, ma viene principalmente usato per raggruppare elementi HTML da stilizzare con CSS o da manipolare tramite script.
Poiché <div> è un elemento block-level, ogni div inizia su una nuova riga e si estende per occupare tutta la larghezza disponibile. Non porta alcun significato semantico proprio — è una scatola generica. Usa <div> per raggruppare contenuto block-level; per raggruppare o stilizzare contenuto inline (alcune parole all'interno di una frase), usa invece il suo equivalente inline, il tag <span>.
Posizionamento dei Blocchi Definiti dal Tag <div>
Poiché <div> è un elemento block-level, viene inserito un a capo prima e dopo di esso.
È possibile inserire qualsiasi elemento HTML all'interno di un tag <div>, compreso un altro <div>.
Gli elementi block-level come <div> non possono essere annidati all'interno di tag <p>, poiché il paragrafo verrà interrotto nel punto in cui viene inserito il tag <div>.
Per applicare stili all'interno di un paragrafo, usa il tag <span>, che si utilizza con gli elementi inline.
Sintassi
Il tag <div> è composto da una coppia di tag. Il contenuto è scritto tra il tag di apertura (<div>) e quello di chiusura (</div>).
Esempio del tag HTML <div>:
Esempio del tag HTML <div>
<!DOCTYPE html>
<html>
<head>
<title>The <div> Tag</title>
</head>
<body>
<h1> The <div> Tag </h1>
<div style="background-color:#8ebf42">
<p>We use the <div> tag to group two paragraphs for applying a background to the text, and to add color to this
<span style="color:#1c87c9">word</span> we place it within <span> tag.</p>
<p> Pay attention, that the <div> tag is a block-level element, so a line break is placed before and after
it.</p>
</div>
</body>
</html><div> vs. Elementi Semantici
Un <div> è lo strumento giusto quando hai bisogno solo di una scatola generica a cui agganciare stili o script. Ma quando la scatola rappresenta una regione significativa della pagina — navigazione, intestazione, articolo — è preferibile usare il corrispondente elemento semantico HTML5. I tag semantici descrivono cosa rappresenta il contenuto, aiutando motori di ricerca, screen reader e altri sviluppatori a comprendere il markup.
Confronta la stessa struttura scritta in due modi:
<!-- Before: generic divs, no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- After: semantic elements, self-describing -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Entrambi vengono visualizzati in modo identico per impostazione predefinita, ma la seconda versione è molto più accessibile e manutenibile.
Attenzione alla "div soup". Racchiudere tutto in elementi <div> annidati — <div class="nav">, <div class="header"> e così via — produce markup difficile da leggere e non offre nulla su cui le tecnologie assistive possano lavorare. Prima di aggiungere un <div>, chiedi se <nav>, <header>, <main>, <article>, <section> o <footer> si adatta meglio.
<div> vs. <span>
I tag <div> e <span> sono entrambi contenitori generici e privi di significato — la differenza sta nel tipo di box che creano:
<div>è block-level. Inizia su una nuova riga, occupa tutta la larghezza disponibile e viene usato per raggruppare sezioni più ampie di contenuto (paragrafi, liste, altri div).<span>è inline. Scorre all'interno di una riga di testo e viene usato per stilizzare o selezionare un piccolo frammento di contenuto, come una parola o una frase.
<p>The word <span style="color:#1c87c9">highlighted</span> sits inside the text flow.</p>
<div style="background-color:#8ebf42">
<p>This whole block is grouped and given a background.</p>
</div>Come regola generale: usa <div> per raggruppare contenuto block-level e <span> per racchiudere contenuto inline.
Quando costruiamo layout, lavoriamo con più blocchi definiti dal tag <div>. Il posizionamento di questi blocchi è al centro del layout: collocare gli elementi nelle posizioni relative corrette su tutte le dimensioni dello schermo è uno dei compiti più importanti.
A seconda del contenuto e degli obiettivi della pagina, possiamo usare tecniche diverse (o loro combinazioni) per determinare la posizione di ciascun blocco. Per i layout moderni, i due strumenti a cui dovresti ricorrere per primi sono CSS Grid (per layout bidimensionali a righe e colonne) e Flexbox (per righe o colonne monodimensionali). Le tecniche più vecchie elencate di seguito — float, margini negativi e posizionamento assoluto — funzionano ancora ma raramente sono la scelta migliore oggi.
CSS Grid
CSS Grid è il modo moderno e standard per costruire layout bidimensionali, ovvero layout che dispongono i blocchi <div> in righe e colonne contemporaneamente. Si definisce una griglia sul contenitore con display: grid e si descrivono le sue tracce; i blocchi figlio si distribuiscono poi nelle celle.
Esempio del tag HTML <div> con CSS Grid:
Esempio del tag HTML <div> con CSS Grid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
padding: 10px;
background-color: #1faadb;
}
.grid-container > div {
height: 60px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Questo singolo grid-template-columns: 1fr 1fr 1fr crea tre colonne uguali e i sei blocchi <div> si dispongono automaticamente su due righe.
Flexbox
Quando è necessario disporre gli elementi lungo un solo asse — una riga o una colonna — Flexbox è lo strumento giusto. Nei siti moderni i layout basati su float vengono sostituiti con Flexbox e Grid. L'idea principale di Flexbox è che con esso è possibile controllare l'allineamento, la direzione, l'ordine e le dimensioni degli elementi all'interno del contenitore.
Esempio di Flexbox con il tag HTML <div>:
Esempio del tag HTML <div> con Flexbox
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center; /* Use another value to see the result */
width: 100%;
height: 200px;
background-color: #1faadb;
}
.flex-container > div {
width: 25%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Proprietà CSS float
La proprietà CSS float, o "float", consente agli elementi di apparire uno accanto all'altro o separati, permettendo di creare diversi tipi di layout, tra cui pagine multi-colonna, barre laterali, griglie, ecc.
Esempio del tag HTML <div> con la proprietà CSS float:
Esempio del tag HTML <div> con la proprietà CSS float
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
overflow: auto;
border: 3px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkblue;
}
.blue {
float: right;
width: 45%;
background-color: #1faadb;
}
.green {
float: left;
width: 35%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Risultato
Margini Negativi (tecnica legacy)
I margini negativi possono essere applicati sia agli elementi statici che a quelli con float per avvicinare i blocchi o farli sovrapporre.
Esempio di margini negativi:
Esempio del tag HTML <div> con margini negativi
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -10%;
background-color: #1faadb;
}
.green {
width: 20%;
margin: -35% auto auto 70%;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<a href="#">This is some hyperlink inside div tag.</a>
</div>
<div class="blue">
<p>This is some paragraph inside div tag.</p>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>Posizionamento relative+absolute
Se vuoi posizionare un div rispetto a un elemento specifico, puoi usare una combinazione di position: relative e position: absolute.
Esempio di posizionamento relative+absolute del tag HTML <div>:
Esempio del tag HTML <div> con la proprietà CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 400px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 10px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #1faadb;
}
.green {
top: 10px;
left: 15px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>position: relative non influisce sul posizionamento degli elementi nel flusso normale a meno che non vengano aggiunti degli offset.
Attributi
Il tag <div> non ha attributi propri. In pratica si affida agli attributi globali — più spesso id, class, style, data-* e aria-* — per essere stilizzato, gestito tramite script o reso accessibile. Supporta anche gli attributi evento.
| Attributo | Valore | Descrizione |
|---|---|---|
| align | left right center justify | Deprecato. Veniva usato per allineare il contenuto all'interno di un tag <div>. Non è supportato in HTML5 — usa invece la proprietà CSS text-align. |