<div>: The Content Division element

L'elemento HTML Content Division (<div>) è un contenitore generico per contenuti di flusso. Non ha alcun effetto sui contenuti fin quando non viene stilizzato attraverso CSS. In quanto contenitore "puro", l'elemento <div> di suo non rappresenta nulla. E' utilizzato piuttosto per raggruppare contenuti in modo da essere facilmente stilizzato attraverso gli attributi classid, o per contrassegnare una sezione di un documento scritta in una lingua diversa (utilizzando l'attributo lang), e così via.

Categorie di contenuti Contenuti di flusso, contenuti palpabili.
Contenuti permessi Contenuti di flusso.
O (nella specifica HTML del WHATWG): Se il genitore è un elemento <dl> (en-US):uno o più elementi <dt> (en-US) seguiti da un o più elementi <dd> (en-US), opzionalmente mischiati ad elementi <script> (en-US) e <template> (en-US).
Omissione del tag Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.
Genitori permessi Qualsiasi elemento che accetti contenuti di flusso.
O (nella specifica HTML WHATWG): l'elemento <dl> (en-US).
Ruoli ARIA permessi Qualsiasi
Interfaccia DOM HTMLDivElement (en-US)

Attributi

Questo elemento include gli attributi globali.

L'attributoalign è obsoleto; non utilizzarlo. Piuttosto, bisognerebbe utilizzare le proprietà o tecniche CSS quali CSS GridCSS Flexbox per allineare e posizionare gli elementi <div> all'interno della pagina.

Note sull'utilizzo

  • L'elemento <div> dovrebbe essere utilizzato esclusivamente quando altri elementi semantici, (quali as <article><nav>) non sono più appropriati.

Esempi

Un semplice esempio

<div>
  <p>Qualsiasi contenuto, come
  &lt;p&gt;, &lt;table&gt;. Decidi tu!</p>
</div> 

Il risultato apparirà così:

Un esempio stilizzato

Questo esempio crea un box dotato d'ombra, applicando uno stile al <div> usando CSS. Notare l'utilizzo dell'attributo class sul<div> per applicare lo stile chiamato "shadowbox" sull'elemento.

HTML

<div class="shadowbox">
  <p>Qui troviamo una nota molto interessante
  in un box dotato di un'amorevole ombra.</p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Risultato

Specificazioni

Specificatioe Status Commento
HTML Living Standard
The definition of '<div>' in that specification.
Living Standard Nessun cambiamento dall'ultimo snapshot
HTML5
The definition of '<div>' in that specification.
Recommendation Attributo di stile align reso obsoleto
HTML 4.01 Specification
The definition of '<div>' in that specification.
Recommendation

Compatibilità dei browser

BCD tables only load in the browser

Vedi anche