diff options
Diffstat (limited to 'files/it/web/html/element/div/index.html')
| -rw-r--r-- | files/it/web/html/element/div/index.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/files/it/web/html/element/div/index.html b/files/it/web/html/element/div/index.html new file mode 100644 index 0000000000..991fe0575c --- /dev/null +++ b/files/it/web/html/element/div/index.html @@ -0,0 +1,137 @@ +--- +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><div></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><div></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><div></code> all'interno della pagina.</p> + +<h2 id="Note_sull'utilizzo">Note sull'utilizzo</h2> + +<ul> + <li>L'elemento <code><div></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"><div> + <p>Qualsiasi contenuto, come + &lt;p&gt;, &lt;table&gt;. Decidi tu!</p> +</div> </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><div></code> usando CSS. Notare l'utilizzo dell'attributo {{htmlattrxref("class")}} sul<code><div></code> per applicare lo stile chiamato <code>"shadowbox"</code> sull'elemento.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Qui troviamo una nota molto interessante + in un box dotato di un'amorevole ombra.</p> +</div></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', '<div>')}}</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', '<div>')}}</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', '<div>')}}</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> |