Guida HTML interattiva: Div

Q: Come metto due div uno accanto all'altro?

Racchiudili in un div genitore e dai al genitore display: flex. I figli si mettono in fila. Aggiungi gap per lo spazio tra loro e flex: 1 sui figli per dividere la larghezza in parti uguali.

Q: Devo usare div o section?

Usa , , , , o quando il contenuto ha quel ruolo, perché lettori di schermo e motori di ricerca li capiscono. Usa quando ti serve solo un riquadro per lo stile o l'impaginazione.

Cosa fa il tag div

<div> (abbreviazione di division, divisione) è un contenitore generico. Raggruppa gli elementi così puoi dare stile, posizionarli o gestirli con uno script come un'unica unità. Da solo non ha alcun aspetto: niente margine, niente bordo, nessun font speciale. È un elemento a blocco, quindi inizia su una nuova riga e si allarga su tutta la larghezza disponibile.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Togli la riga border dallo stile e i div diventano invisibili: è l'aspetto predefinito di un div. Tutto quello che fa visivamente viene dal CSS.

div class e id

Un div di solito ha una class, cioè il nome a cui punta il tuo CSS. I div che condividono una classe condividono lo stile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card dà stile a entrambi i riquadri, .card.highlight aggiunge un contorno blu al div che ha tutte e due le classi. Usa id quando devi puntare a un div preciso, per esempio come destinazione di un link (href="#pro"). La pagina sugli attributi confronta class e id nel dettaglio.

Div affiancati

Dato che i div sono blocchi, si impilano in verticale. Per metterli in fila, trasforma il loro genitore in un contenitore flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex su .row allinea i figli, gap li distanzia e i valori di flex si dividono la larghezza (qui 1 : 2 : 1). Questo schema con genitore e figli è l'uso più comune dei div nei siti reali. Per centrare un div, vedi come centrare un div.

Div annidati

I div possono contenere altri div a qualsiasi profondità. Ogni livello è un riquadro dentro un riquadro, e lo vedi dando a ogni div un bordo e un po' di padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Tieni l'annidamento il più basso che il layout permette. Ogni contenitore in più è un altro riquadro a cui pensare quando un margine o una larghezza non fanno quello che ti aspetti.

div o un tag semantico?

Un div non dice niente sul suo contenuto. L'HTML ha tag che raggruppano allo stesso modo e dicono anche cos'è il gruppo:

Invece di	Usa	Per
`<div class="header">`	`<header>`	Introduzione o barra superiore di una pagina o sezione
`<div class="nav">`	`<nav>`	Un blocco di link di navigazione
`<div class="main">`	`<main>`	Il contenuto principale, una volta per pagina
`<div class="post">`	`<article>`	Un elemento autonomo: post, commento, scheda prodotto
`<div class="footer">`	`<footer>`	Piè di pagina di una pagina o sezione

Questi tag hanno esattamente l'aspetto di un div finché non gli dai stile, ma i lettori di schermo li annunciano e permettono di saltare dall'uno all'altro, e i motori di ricerca ne leggono la struttura. Usa un div per i riquadri che esistono solo per l'impaginazione o lo stile, come il contenitore .row qui sopra. La pagina sull'HTML semantico li spiega tutti.

Un div non è un pulsante

Un div con un gestore di clic sembra cliccabile a chi usa il mouse, ma chi usa la tastiera non ci arriva con Tab né può premerlo con Invio, e un lettore di schermo non lo annuncia come pulsante:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Usa <button> per le azioni e <a href> per la navigazione. Entrambi ricevono il focus e funzionano con la tastiera senza fare niente.

Errori comuni

Un div dentro un <p>. Il paragrafo si chiude prima del div. Fai del div l'elemento esterno, oppure usa <span> dentro il paragrafo.
Zuppa di div. Una pagina fatta solo di div non ha struttura per i lettori di schermo. Sostituisci i div con <header>, <nav>, <main> e <footer> dove vanno bene.
Div cliccabili. Usa un <button> o un link.
Aspettarsi che un div sia largo quanto il suo testo. Un div occupa tutta la larghezza. Usa display: inline-block, width: fit-content o uno <span> se vuoi che si restringa.
Riusare un id su più div. Usa una classe per tutto ciò che si ripete.

Domande frequenti

Cos'è un div in HTML?

<div> è un contenitore generico. Raggruppa altri elementi così puoi dare stile o posizionarli insieme, e non ha un significato proprio: i browser lo mostrano come un blocco che inizia su una nuova riga e occupa tutta la larghezza disponibile.

Cosa significa div class?

<div class="card"> è un div con un attributo class. La classe è un nome che il CSS usa per dargli stile (.card { ... }) e JavaScript usa per trovarlo. Molti div possono condividere una classe, e un div può averne più di una: class="card featured".

Come metto due div uno accanto all'altro?

Racchiudili in un div genitore e dai al genitore display: flex. I figli si mettono in fila. Aggiungi gap per lo spazio tra loro e flex: 1 sui figli per dividere la larghezza in parti uguali.

Devo usare div o section?

Usa <section>, <header>, <nav>, <main>, <article> o <footer> quando il contenuto ha quel ruolo, perché lettori di schermo e motori di ricerca li capiscono. Usa <div> quando ti serve solo un riquadro per lo stile o l'impaginazione.

Posso mettere un div dentro un tag p?

No. Un paragrafo può contenere solo contenuto inline. Il browser chiude il <p> appena vede <div>, e questo rompe i tuoi stili. Usa il div come elemento esterno o uno <span> dentro il paragrafo.

Concetti correlati