---
title: '<div>: The Content Division element'
slug: Web/HTML/Element/div
tags:
  - Divisione di Contenuto
  - 'HTML: Contenuti di flusso'
  - Layout
  - Web
  - div
translation_of: Web/HTML/Element/div
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">L'elemento <strong>HTML Content Division</strong> (<strong><code>&lt;div&gt;</code></strong>) è un contenitore generico per contenuti di flusso. Non ha alcun effetto sui contenuti fin quando non viene stilizzato attraverso CSS. In quanto contenitore "puro"</span>, l'elemento <code>&lt;div&gt;</code> di suo non rappresenta nulla. E' utilizzato piuttosto per raggruppare contenuti in modo da essere facilmente stilizzato attraverso gli attributi {{htmlattrxref("class")}} o {{htmlattrxref("id")}}, o per contrassegnare una sezione di un documento scritta in una lingua diversa (utilizzando l'attributo {{htmlattrxref("lang")}}), e così via.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorie di contenuti</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>, contenuti palpabili.</td>
  </tr>
  <tr>
   <th scope="row">Contenuti permessi</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.<br>
    O (nella specifica HTML del <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a>): Se il genitore è un elemento {{HTMLElement("dl")}}:uno o più elementi {{HTMLElement("dt")}} seguiti da un o più elementi {{HTMLElement("dd")}}, opzionalmente mischiati ad elementi {{HTMLElement("script")}} e {{HTMLElement("template")}}.</td>
  </tr>
  <tr>
   <th scope="row">Omissione del tag</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Genitori permessi</th>
   <td>Qualsiasi elemento che accetti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">contenuti di flusso</a>.<br>
    O (nella specifica HTML <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a>): l'elemento {{HTMLElement("dl")}}.</td>
  </tr>
  <tr>
   <th scope="row">Ruoli ARIA permessi</th>
   <td>Qualsiasi</td>
  </tr>
  <tr>
   <th scope="row">Interfaccia DOM</th>
   <td>{{domxref("HTMLDivElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributi">Attributi</h2>

<p>Questo elemento include gli <a href="/en-US/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>

<p>L'attributo<code>align</code> è obsoleto; non utilizzarlo. Piuttosto, bisognerebbe utilizzare le proprietà o tecniche CSS quali <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> o <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> per allineare e posizionare gli elementi <code>&lt;div&gt;</code> all'interno della pagina.</p>

<h2 id="Note_sull'utilizzo">Note sull'utilizzo</h2>

<ul>
 <li>L'elemento <code>&lt;div&gt;</code> dovrebbe essere utilizzato esclusivamente quando altri elementi semantici, (quali as {{HTMLElement("article")}} o {{HTMLElement("nav")}}) non sono più appropriati.</li>
</ul>

<h2 id="Esempi">Esempi</h2>

<h3 id="Un_semplice_esempio">Un semplice esempio</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;p&gt;Qualsiasi contenuto, come
  &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. Decidi tu!&lt;/p&gt;
&lt;/div&gt; </pre>

<p>Il risultato apparirà così:</p>

<p>{{EmbedLiveSample("Un_semplice_esempio", 650, 60)}}</p>

<h3 id="Un_esempio_stilizzato">Un esempio stilizzato</h3>

<p>Questo esempio crea un box dotato d'ombra, applicando uno stile al <code>&lt;div&gt;</code> usando CSS. Notare l'utilizzo dell'attributo {{htmlattrxref("class")}} sul<code>&lt;div&gt;</code> per applicare lo stile chiamato <code>"shadowbox"</code> sull'elemento.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="shadowbox"&gt;
  &lt;p&gt;Qui troviamo una nota molto interessante
  in un box dotato di un'amorevole ombra.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: 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);
}</pre>

<h4 id="Risultato">Risultato</h4>

<p>{{EmbedLiveSample("Un_esempio_stilizzato", 650, 120)}}</p>

<h2 id="Specificazioni">Specificazioni</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specificatioe</th>
   <th scope="col">Status</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Nessun cambiamento dall'ultimo snapshot</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Attributo di stile <strong>align </strong>reso obsoleto</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>

<div class="hidden">La tabella di compatibilità in questa pagina è generata da una struttura di dati. Se vuoi contribuire a questi dati per piacere controlla la pagina<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviaci una richiesta di pull.</div>

<p>{{Compat("html.elements.div")}}</p>

<h2 id="Vedi_anche">Vedi anche</h2>

<ul>
 <li>Elementi di sezione semantici: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
 <li>{{HTMLElement("span")}} per la stilizzazione di contenuti di enunciazione.</li>
</ul>