path: root/files/it/web/guide/html/html5/index.html

---
title: HTML5
slug: Web/HTML/HTML5
translation_of: Web/Guide/HTML/HTML5
---
<p><span class="seoSummary"><strong>HTML5</strong> è l'ultima evoluzione dello standard che definisce <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span>Il termine rappresenta due concetti differenti:</p>

<ul>
 <li>Una nuova versione del <em>linguaggio</em> HTML, con nuovi elementi, attributi e comportamenti</li>
 <li>Un più ampio insieme di tecnologie che permettono siti web e applicazioni più diversificate e potenti: Questo insieme è chiamato <em>HTML5 &amp; compagni</em> ed è spesso abbreviato in<em> HTML5</em></li>
</ul>

<p>Progettata per essere usabile da tutti gli sviluppatori Open Web, questa pagina di riferimento ha numerosi collegamenti a risorse riguardanti le tecnologie HTML5, classificate in diversi gruppi in base alla loro funzione.</p>

<ul>
 <li><em>Semantica</em>: descrivere con maggiore precisione il contenuto.</li>
 <li><em>Connettività</em>: comunicare con il server in modi nuovi e innovativi.</li>
 <li><em>Offline &amp; Memorizzazione</em>: permettere alle pagine web di immagazzinare dati sul client per operare più efficientemente offline.</li>
 <li><em>Multimedia</em>: rendere audio e video cittadini di prima classe nell'Open Web.</li>
 <li><em>Effetti e Grafica 2D/3D</em>: usare una gamma molto più ampia di opzioni di rappresentazione.</li>
 <li><em>Prestazioni &amp; Integrazione</em>: ottimizzare la velocità di caricamento e ottenere un migliore utilizzo delle risorse hardware.</li>
 <li><em>Accesso ai dispositivi</em>: usare vari dispositivi di input e output.</li>
 <li><em>Stile:</em> consentire agli autori di realizzare temi più sofisticati.</li>
</ul>

<div class="cleared row topicpage-table">
<div class="section">
<h2 id="Semantica" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantica</h2>

<dl>
 <dt><a href="/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title="
Sezioni e Struttura di un Documento HTML5">Sezioni e struttura in HTML5</a></dt>
 <dd>Uno sguardo ai nuovi elementi di sezionamento e contorno in HTML5: {{HTMLElement("section")}} , {{HTMLElement("article")}} , {{HTMLElement("nav")}} , {{HTMLElement("header")}} , {{HTMLElement("footer")}} , {{HTMLElement("aside")}} e {{HTMLElement("hgroup")}}.</dd>
 <dt><a href="/it/docs/HTML/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Integrare audio e video in HTML5</a></dt>
 <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} permettono l'integrazione e la manipolazione di nuovi contenuti multimediali.</dd>
 <dt><a href="/it/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Forms in HTML5</a></dt>
 <dd>Uno sguardo ai miglioramenti dei form in HTML5: le API di convalida dei campi, parecchi nuovi attributi, nuovi valori per l'attributo {{htmlattrxref("type", "input")}} degli {{HTMLElement("input")}}, e il nuovo elemento {{HTMLElement("output")}}.</dd>
 <dt>Nuovi elementi semantici</dt>
 <dd>Accanto a sezioni, multimedia e le novità dei forms, ci sono numerosi nuovi elementi come {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, che accrescono la quantità di <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementi validi di HTML5</a>.</dd>
 <dt>Miglioramenti degli {{HTMLElement("iframe")}}</dt>
 <dd>Utilizzando {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, e gli attributi {{htmlattrxref("srcdoc", "iframe")}}, gli autori possono ora precisare il livello di sicurezza e il rendering desiderato di un elemento {{HTMLElement("iframe")}}.</dd>
 <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
 <dd>Permette di incorporare direttamente formule matematiche.</dd>
 <dt><a href="/it/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introduzione a HTML5</a></dt>
 <dd>Questo articolo introduce al problema di come indicare al browser che stai utilizzando HTML5 nel tuo progetto o applicazione web.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser di HTML5-compatibile</a></dt>
 <dd>Il parser, che converte i byte di un documento HTML nel DOM, è stato esteso ed ora riconosce con precisione il comportamento da adottare in tutti i casi, anche quando incontra HTML non valido. Ciò conduce ad una maggiore prevedibilità e interoperabilità tra i browser compatibili con HTML5.</dd>
</dl>

<h2 id="Connettività" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connettività</h2>

<dl>
 <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
 <dd>Permette di creare una connessione permanente tra la pagina ed il server e di scambiare dati, non HTML, attraverso questo mezzo.</dd>
 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-event inviati</a></dt>
 <dd>Permetta a un server di sottoporre eventi al client, contrariamente al classico paradigma per cui il server invia dati solo in risposta alla richiesta del client.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controllare direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd>
</dl>

<h2 id="Offline_Memorizzazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; Memorizzazione</h2>

<dl>
 <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Risorse Offline: la cache dell'applicazione</a></dt>
 <dd>Firefox supporta a pieno le specifiche offline di HTML5. La maggior parte degli altri browser hanno un qualche livello di supporto per le risorse offline.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online e offline</a></dt>
 <dd>Firefox 3 supporta eventi WHATWG online e offline, che lasciano rilevare alle applicazioni ed estensioni se c'è o no una connessione internet attiva, nonché quando la connessione cambia stato.</dd>
 <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sessione WHATWG lato client e memorizzazione persistente (alias Memorizzazione DOM)</a></dt>
 <dd>La memorizzazione lato client, persistente e di sessione, permette alle applicazioni web di immagazzinare strutture dati lato client.</dd>
 <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>E' uno standard web per la memorizzazione nel browser di significative quantità di dati strutturati e per ricerche indicizzate ad elevate prestazioni su tali dati.</dd>
 <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Utilizzare file da applicazioni web</a></dt>
 <dd>Il supporto per le nuove API per i file in HTML5 è stato aggiunto a Gecko, rendendo possibile l'accesso a file locali selezionati dall'utente. Ciò include il supporto per la selezione multipla di file utilizzando il nuovo attributo <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> con <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> dell'elemento <span style="font-family: monospace;">{{HTMLElement("input")}}</span>. C'è anche <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>

<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>

<dl>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Utilizzare audio e video in HTML5</a></dt>
 <dd>Gli elementi {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporano e permetto la manipolazione di nuovi contenuti multimediali.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Questa tecnologia, in cui RTC sta per Real Time Communication, permette di connettersi ad altre persone e controlla direttamente la videoconferenza nel browser, senza bisogno di plugin o applicazioni esterne.</dd>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzo della API Camera</a></dt>
 <dd>Permette di usare, manipolare e memorizzare un'immagine dalla fotocamera del computer.</dd>
 <dt>Track e WebVTT</dt>
 <dd>L'elemento {{HTMLElement("track")}} consente capitoli e sottotitoli. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> è un formato di traccia testuale.</dd>
</dl>

<h2 id="Grafica_Effetti_3D" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Grafica &amp; Effetti 3D</h2>

<dl>
 <dt><a href="/en-US/docs/Canvas_tutorial" title="Tutorial Canvas">Tutorial sui Canvas</a></dt>
 <dd>Apprendi il nuovo elemento <code>{{HTMLElement("canvas")}}</code> e come disegnare grafica ed altri oggetti in Firefox</dd>
 <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API di testo per gli elementi <code>&lt;canvas&gt;</code>  di HTML5</a></dt>
 <dd>Le API di testo di HTML5 sono ora supportate agli elementi {{HTMLElement("canvas")}}.</dd>
 <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>WebGL porta la grafica 3D sul Web introducendo una API strettamente conforme a OpenGL ES 2.0 utilizzata negli elementi {{HTMLElement("canvas")}} di HTML5.</dd>
 <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
 <dd>Un formato di immagine vettoriale basato su XML che può essere direttamente incorporato nel documento HTML.</dd>
</dl>
</div>

<div class="section">
<h2 id="Prestazioni_integrazione" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Prestazioni &amp; integrazione</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Usare i web workers">Web Workers</a></dt>
 <dd>Permette di delegare l'esecuzione JavaScript a thread in background, impedendo a queste attività di rallentare gli eventi interattivi.</dd>
 <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Livello 2</dt>
 <dd>Permette di ottenere asincronamente qualche parte della pagina e di visualizzarne dinamicamente il contenuto, variandolo nel tempo e in base alle azioni dell'utente. Questa è la tecnologia dietro <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
 <dt>JIT-motori JavaScript compilati</dt>
 <dd>La nuova generazione di motori JavaScript sono molto più potenti, e garantiscono maggiori prestazioni.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
 <dd>Permette la manipolazione della cronologia del browser. Ciò è particolarmente utile per le pagine che caricano nuove informazioni interattivamente.</dd>
 <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'attributo contentEditable: trasforma il tuo sito web in un wiki!</a></dt>
 <dd>HTML5 ha standardizzato l'attributo contentEditable.</dd>
 <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag &amp; drop</a></dt>
 <dd>Le API per il drag &amp; drop in HTML5 supportano il trascinamento e rilascio di voci all'interno del sito e tra siti web. Fornisce anche una API più semplice per l'uso da parte di estensioni e applicazioni basate su Mozilla.</dd>
 <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestione del focus in HTML</a></dt>
 <dd>Sono supportati i nuovi attributiHTML5 <code>activeElement</code> e <code>hasFocus</code>.</dd>
 <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Gestori di protocollo basato sul Web</a></dt>
 <dd>E' ora possibile registrare applicazioni web come gestori di protocollo utilizzando il metodo <code>navigator.registerProtocolHandler()</code>.</dd>
 <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
 <dd>Permette di controllare il rendering delle animazioni per ottenere prestazioni ottimali.</dd>
 <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
 <dd>Controlla l'utilizzo a pieno schermo da parte di pagine web e applicazioni, senza la visualizzazione della UI del browser.</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventi online ed offline</a></dt>
 <dd>Al fine di costruire una buona applicazione web capace di lavorare offline, hai bisogno di sapere quando l'applicazione è offline. Hai anche bisogno di sapere quando l'applicazione torna nello stato online.</dd>
</dl>

<h2 id="Accesso_ai_Dispositivi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accesso ai Dispositivi</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Utilizzare le API Camera</a></dt>
 <dd>Permette di utilizzare, manipolare e immagazzinare immagini dalla fotocamera del computer.</dd>
 <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventi Touch</a></dt>
 <dd>Gestori che reagiscono ad eventi creati dalla pressione sullo schermo da parte dell'utente.</dd>
 <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Utilizzare la geolocalizzazione</a></dt>
 <dd>Permetti al browser di localizzare la posizione dell'utente grazie alla geolocalizzazione.</dd>
 <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Rilevazione orientamento del dispositivo</a></dt>
 <dd>Lascia che il browser sia informato del cambio di orientamento del dispositivo. Può essere utilizzato come metodo di input (per esempio per realizzare giochi che reagiscono alla posizione del dispositivo) o per adattare l'impaginazione all'orientamento dello schermo (potrait o landscape).</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Permette di bloccare il puntatore al contenuto, così giochi e applicazioni simili non perdono il focus quando il puntatore ne oltrepassa il margine.</dd>
</dl>

<h2 id="Stile" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stile</h2>

<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> è stato esteso consentendo elementi di stile più complessi. E' spesso identificato come <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, sebbene CSS non sia comunque una specifica monolitica e i differenti moduli non siano tutti di livello 3: alcuni sono di livello 1, ed altri di livello 4, con tutti i livelli intermedi.</p>

<dl>
 <dt>Nuove caratteristiche di stile per lo sfondo</dt>
 <dd>E' ora possibile aggiungere un'ombra a un box, utilizzando{{cssxref("box-shadow")}} ed impostare <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">sfondi multipli</a>.</dd>
 <dt>Bordi più fantasiosi</dt>
 <dd>Non è solo possibile utilizzare le immagini come stile dei bordi, utilizzando {{cssxref("border-image")}} e le proprietà associate, ma sono supportati i bordi arrotondati per mezzo della proprietà {{cssxref("border-radius")}}.</dd>
 <dt>Anima il tuo stile</dt>
 <dd>Utilizzando le <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Transizioni CSS</a> per animare il passaggio tra stati, o utilizzando le <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animazioni CSS</a> per animare parti della pagina senza un evento scatenante, puoi controllare gli elementi mobili sulla pagina.</dd>
 <dt>Miglioramenti tipografici</dt>
 <dd>Gli autori hanno un miglior controllo per ottenere un migliore aspetto tipografico. Possono controllare il {{cssxref("text-overflow")}} e la <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">sillabazione</a>, ma possono anche applicare <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">un'ombra</a> o controllare più precisamente la <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorazione</a>. Caratteri tipografici personalizzati possono essere scaricati e applicati grazie alla nuova regola {{cssxref("@font-face")}}.</dd>
 <dt>Nuove impaginazioni per la presentazione</dt>
 <dd>Al fine di migliorare la flessibilità di progettazione, sono stati aggiunti due nuovi layout: <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">Impaginazione CSS a colonna multipla</a>, e <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">l'impaginazione CSS a box flessibile</a>.</dd>
</dl>
</div>
</div>

<p> </p>