1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
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>
|
