files/it/web/html/element/main/index.html


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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

---
title: <main>
slug: Web/HTML/Element/main
tags:
  - Elemento
  - HTML
  - Reference
  - Referenza
  - Web
  - main
translation_of: Web/HTML/Element/main
---
<h2 id="Sommario">Sommario</h2>

<p>L'<strong>elemento HTML <code>&lt;main&gt;</code></strong> rappresenta il contenuto principale del {{HTMLElement("body")}} di un documento o di un'applicazione. L'area principale consiste di un contenuto che è direttamente in relazione con, o si estende su, il tema centrale di un documento o la funzionalità centrale di un'applicazione. Tale contenuto dovrebbe essere unico all'interno del documento, ad esclusione di qualsiasi contenuto che si ripete attraverso una serie di documenti quali potrebbero essere le barre laterali, link di navigazione, informazioni di copyright, loghi e moduli di ricerca (a meno che, ovviamente, la funzione principale del documento sia lo stesso modulo di ricerca).</p>

<div class="note">
<p><strong>Nota:</strong> <strong>Non deve</strong> esserci più di un elemento <code>&lt;main&gt;</code> all'interno di un documento, e <strong>non deve</strong> essere un discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</p>
</div>

<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Categorie di contenuto</a></dfn><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</li>
 <li><dfn>Contenuto permesso</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li>
 <li><dfn>Omissione di tag</dfn> Nessuna; entrambi i tag di inizio e fine sono obbligatori.</li>
 <li><dfn>Elementi genitori permessi</dfn>Ogni elemento che accetta <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>, ma non può essere un discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</li>
 <li><dfn>Interfaccia DOM</dfn> {{domxref("HTMLElement")}}</li>
</ul>

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

<p><span style="line-height: 21px;">Questo elemento include solo gli </span><a href="/en-US/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">attributi globali</a><span style="line-height: 21px;">.</span></p>

<h2 id="Esempio">Esempio</h2>

<pre class="brush: html">&lt;!-- altro contenuto --&gt;

<span class="highlight">&lt;main&gt;</span>
  &lt;h1&gt;Mele&lt;/h1&gt;
  &lt;p&gt;La mela è il frutto pomoforme dell'albero di mele.&lt;/p&gt;

  &lt;article&gt;
    &lt;h2&gt;Red Delicious&lt;/h2&gt;
    &lt;p&gt;Queste mele rosso brillante sono le più comuni che si possono trovare in molti
    supermercati.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

  &lt;article&gt;
    &lt;h2&gt;Granny Smith&lt;/h2&gt;
    &lt;p&gt;Queste succose mele verdi sono un'ottimo ripieno per le torte
    di mela.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

<span class="highlight">&lt;/main&gt;</span>

&lt;!-- altro contenuto --&gt;</pre>

<h2 id="Specifications" name="Specifications">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Rimossa la restrizione che prevedeva il non utilizzo di <code>&lt;main&gt;</code> come discendente di un elemento {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, o {{HTMLElement("nav")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Nessun cambiamento da {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Definizione iniziale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità con i browser</h2>

<p>In quanto nuova funzione proposta per HTML, l'elemento <code>&lt;main&gt;</code> non è ancora ampiamente supportato. Si è quindi fortemente incoraggiati ad aggiungere il ruolo ARIA <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">"main"</span><span style="line-height: 1.5;"> ad ogni elemento </span><code style="font-style: normal; line-height: 1.5;">&lt;main&gt;</code><span style="line-height: 1.5;"> inserito:</span></p>

<pre class="brush: html">&lt;main role="main"&gt;
  ...
&lt;/main&gt;
</pre>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Supporto di base</td>
   <td>Chrome 26</td>
   <td>{{ CompatGeckoDesktop("21.0") }}</td>
   <td>{{CompatNo()}}</td>
   <td>Opera 16</td>
   <td>Safari 7</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Supporto di base</td>
   <td>{{CompatNo()}}</td>
   <td>{{ CompatGeckoMobile("21.0") }}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>Elementi strutturali di base: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
 <li>Elementi di sezione: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, or {{HTMLElement("nav")}}</li>
</ul>

<p> </p>