diff options
Diffstat (limited to 'files/it/web/guide/html')
| -rw-r--r-- | files/it/web/guide/html/content_categories/index.html (renamed from files/it/web/guide/html/categorie_di_contenuto/index.html) | 3 | ||||
| -rw-r--r-- | files/it/web/guide/html/html5/index.html | 168 | ||||
| -rw-r--r-- | files/it/web/guide/html/html5/introduction_to_html5/index.html | 23 | ||||
| -rw-r--r-- | files/it/web/guide/html/using_html_sections_and_outlines/index.html | 321 |
4 files changed, 514 insertions, 1 deletions
diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/content_categories/index.html index 94eae32320..4081ebbe76 100644 --- a/files/it/web/guide/html/categorie_di_contenuto/index.html +++ b/files/it/web/guide/html/content_categories/index.html @@ -1,7 +1,8 @@ --- title: Categorie di contenuto -slug: Web/Guide/HTML/Categorie_di_contenuto +slug: Web/Guide/HTML/Content_categories translation_of: Web/Guide/HTML/Content_categories +original_slug: Web/Guide/HTML/Categorie_di_contenuto --- <p>Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. <span id="result_box" lang="it"><span class="hps">Queste regole sono</span> <span class="hps">raggruppate in</span> <span class="hps">modelli di contenuto</span> <span class="hps">comuni a</span> <span class="hps">diversi elementi</span><span>.</span></span> Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.</p> diff --git a/files/it/web/guide/html/html5/index.html b/files/it/web/guide/html/html5/index.html new file mode 100644 index 0000000000..6be662d4c2 --- /dev/null +++ b/files/it/web/guide/html/html5/index.html @@ -0,0 +1,168 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +original_slug: Web/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 & 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 & 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 & 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 & 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 & 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><canvas></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 & 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 & drop</a></dt> + <dd>Le API per il drag & 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> diff --git a/files/it/web/guide/html/html5/introduction_to_html5/index.html b/files/it/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..646636bee8 --- /dev/null +++ b/files/it/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,23 @@ +--- +title: Introduzione a HTML5 +slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +original_slug: Web/HTML/HTML5/Introduction_to_HTML5 +--- +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> è la quinta revisione e l'ultima versione dello standard HTML. Propone nuove funzionalità che forniscono il supporto dei rich media, la creazione di applicazioni web in grado di interagire con l'utente, con i suoi dati locali e i servers, in maniera più facile ed efficiente di prima.</p> +<p>Poiché HTML5 è ancora in fase di sviluppo, inevitabilmente ci saranno altre modifiche alle specifiche. Pertanto al momento non tutte le funzioni sono supportate da tutti i browser. Tuttavia Gecko, e per estensione Firefox, supporta HTML5 in maniera ottimale, e gli sviluppatori continuano a lavorare per supportare ancora più funzionalità. Gecko ha iniziato a supportare alcune funzionalità di HTML5 dalla versione 1.8.1. È possibile trovare un elenco di tutte le funzionalità HTML5 che Gecko supporta attualmente nella <a href="/it/HTML/HTML5" title="it/HTML/HTML5">pagina principale di HTML5</a>. Per informazioni dettagliate sul supporto degli altri browser delle funzionalità HTML5, fare riferimento al sito web <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> +<h2 id="Dichiarare_che_un_documento_contiene_mark-up_HTML5_con_il_doctype_HTML">Dichiarare che un documento contiene mark-up HTML5 con il doctype HTML</h2> +<p>Il doctype per HTML5 è semplicissimo. Per specificare che il vostro contenuto HTML utilizza HTML5, basta dichiarare:</p> +<pre class="brush:html;"><!DOCTYPE html> +</pre> +<p>Così facendo persino i browser che attualmente non supportano HTML5 entreranno in modalità standard, cioè interpreteranno il codice HTML in modo compatibile con HTML5, ignorando le nuove funzionalità di HTML5 se non le supportano.</p> +<p>È molto più semplice rispetto ai precedenti doctype, oltre che più breve, quindi più facile da ricordare e riduce anche la quantità di byte scaricati dall'utente.</p> +<h2 id="Dichiarare_il_set_di_caratteri_con_<meta_charset>">Dichiarare il set di caratteri con <code><meta charset></code></h2> +<p>Indicare il set di caratteri che verrà utilizzato è solitamente la prima cosa da fare in un documento HTML. La specifica precedente richiedeva un elemento {{HTMLElement("meta")}} molto complesso. Ora è facilissimo:</p> +<pre class="brush:html;"><meta charset="UTF-8"></pre> +<p>Ricordati di inserire questo tag subito dopo l'apertura del {{HTMLElement("head") }}, perché alcuni browser riavviano il parsing di un documento HTML se il set di caratteri dichiarato è diverso da quello che avevano previsto. Inoltre consigliamo sempre di usare il set UTF-8, ove possibile, perché semplifica la gestione dei caratteri nei documenti utilizzando diversi script.</p> +<p>Nota bene: HTML5 limita il set di caratteri validi a quelli compatibili con ASCII e che usano almeno 8 bit. Ciò è stato deciso per motivi di sicurezza e per prevenire alcuni tipi di attacchi.</p> +<h2 id="Usare_il_nuovo_parser_HTML5">Usare il nuovo parser HTML5</h2> +<p>La regola di parsing di HTML5, che analizza il significato del mark-up, è stata definita con maggiore precisione in HTML5. Fino all'introduzione di HTML5, le uniche regole riguardavano il mark-up <em>valido</em>, quindi il comportamento del parser in caso di errori (e la maggior parte dei siti web ne ha almeno uno) era indefinito. In sostanza, tutti i browser si comportavano in modo diverso. Ora, di fronte a errori nel mark-up, tutti i browser conformi devono comportarsi esattamente nello stesso modo.</p> +<p>Questo obbligo aiuta non poco gli sviluppatori. Anche se tutti i browser moderni ora applicano queste regole di analisi HTML5, alcuni utenti navigano ancora con browser non compatibili con HTML5. Tenete a mente che è ancora altamente raccomandato stendere mark-up valido, in modo che il codice sia facile da leggere e mantenere nel tempo, e diminuisca notevolmente la probabilità di incompatibilità con i vari browser più datati.</p> +<p>Non preoccuparti — non devi cambiare nulla del tuo sito Web — gli sviluppatori dei browser hanno già fatto tutto per te!</p> diff --git a/files/it/web/guide/html/using_html_sections_and_outlines/index.html b/files/it/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..5864929a2c --- /dev/null +++ b/files/it/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,321 @@ +--- +title: Sezioni e Struttura di un Documento HTML5 +slug: Web/Guide/HTML/Using_HTML_sections_and_outlines +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +original_slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +--- +<p>La specifica HTML5 rende disponibili numerosi nuovi elementi agli sviluppatori, permettendo ad essi di descrivere la struttura di un documento web tramite una semantica standard. Questa pagina descrive i nuovi elementi e spiega come usarli per definire la struttura di qualsiasi documento.</p> +<h2 id="Struttura_di_un_Documento_in_HTML_4">Struttura di un Documento in HTML 4</h2> +<p>La struttura di un documento, cioè la struttura semantica di ciò che si trova tra <code><body></code> e <code></body></code>, è fondamentale nella presentazione della pagina all'utente. HTML 4 usa le nozioni di sezione e sotto-sezione di un documento per descrivere la sua struttura. Una sezione è definita da un Elemento HTML di Divisione ( {{HTMLElement("div")}} ) con un Elemento HTML di Intestazione ( {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}} ) al suo interno, che ne definisce il titolo. La relazione tra gli Elementi HTML di Divisione e gli Elementi HTML di Intestazione genera la struttura del documento.</p> +<p>Dunque il seguente mark-up:</p> +<div style="overflow: hidden;"> + <pre class="brush:xml"><div class="section" id="elefanti-delle-foreste" > +<h1>Elefanti delle foreste</h1> +<p>In questa sezione, parliamo dei poco noti elefanti delle foreste. +...la sezione continua... +<div class="subsection" id="elefanti-habitat" > +<h2>Habitat</h2> +<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. +...la sotto-sezione continua... +</div> +</div> +</pre> +</div> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat +</pre> +<p>L'elemento {{HTMLElement("div")}} non è strettamente necessario per definire una nuova sezione. La mera presenza di un Elemento HTML di Intestazione è abbastanza per indicare una nuova sezione. Perciò:</p> +<pre class="brush:xml"><h1>Elefanti delle foreste</h1> +<p>In questa sezione, parliamo dei poco noti elefanti delle foreste. +...la sezione continua... +<h2>Habitat</h2> +<p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. +...la sotto-sezione continua... +<h2>Dieta</h2> +<h1>Gerbilli della Mongolia</h1> +</pre> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat + 1.2 Dieta +2. Gerbilli della Mongolia +</pre> +<h2 id="Problemi_Risolti_da_HTML5">Problemi Risolti da HTML5</h2> +<p>La definizione della struttura di un documento di HTML 4 è molto approssimativa e causa numerosi problemi:</p> +<ol> + <li>L'uso di un {{HTMLElement("div")}} per definire sezioni semantiche, senza la definizione di valori specifici nell'attributo <strong>class</strong>, rende impossibile per un algoritmo automatico definire la struttura ("Questo {{HTMLElement("div")}} è parte della struttura della pagina, definisce una sezione o una sotto-sezione?" o "è solo un {{HTMLElement("div")}} inserito ai fini di presentazione, usato per scopi estetici?"). In altri termini, la specifica HTML4 è poco precisa riguardo a cosa è una sezione e come definire il suo scopo. La generazione automatica di una struttura è importante, in modo particolare per le <a class="external" href="http://it.wikipedia.org/wiki/Tecnologie_assistive" title="http://it.wikipedia.org/wiki/Tecnologie_assistive">tecnologie assistive</a>, che sono in grado di adattare la presentazione delle informazioni alla struttura del documento. HTML5 rimuove l'elemento {{HTMLElement("div")}} dall'algoritmo che genera la struttura, introducendo l'elemento {{HTMLElement("section")}}, cioè un Elemento HTML di Sezione.</li> + <li>Unire più documenti è difficile: inserire un sotto-documento in un documento principale richiede di cambiare il "grado" delle intestazioni in modo che la struttura venga mantenuta. Questo problema viene risolto in HTML5, grazie ai nuovi elementi di sezionamento ( {{HTMLElement("article")}} , {{HTMLElement("section")}} , {{HTMLElement("nav")}} e {{HTMLElement("aside")}} ) che sono sempre sotto-sezioni della sezione che li contiene, indipendentemente dalle sezioni create dagli Elementi HTML di Intestazione.</li> + <li>Poiché ogni Elemento HTML di Intestazione cambia la struttura, non è possibile assegnare un sotto-titolo o un titolo secondario (es., <code><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></code> genera la struttura <code>1. Justine 1.1 Les Malheurs de la Vertu</code>). HTML5 introduce l'elemento {{HTMLElement("hgroup")}} che "nasconde" tutti gli elementi di intestazione tranne quello di grado più elevato (es., <code><hgroup><h1>Justine</h1><h2>Les Malheurs de la Vertu</h2></hgroup></code> genera la struttura <code>1. Justine</code>).</li> + <li>Nel HTML4, ogni sezione è parte della struttura del documento. Ma spesso i documenti non sono così lineari. Un documento può avere sezioni speciali contenenti informazioni che non fanno parte del flusso principale, anche se correlati ad esso, come una pubblicità o un approfondimento. HTML5 introduce l'elemento {{HTMLElement("aside")}} permettendo a questo tipo di sezioni di rimanere estranee al flusso principale.</li> + <li>Ancora, nel HTML4, dato che ogni sezione è parte della struttura del documento, non c'è modo di avere sezioni relative non al documento ma a tutto il sito, come il logo, i menu, una tabella dei contenuti, o le informazioni legali e sul copyright. A tal fine, HTML5 introduce tre elementi per altrettante sezioni specifiche: {{HTMLElement("nav")}} per i gruppi di links, come le tabelle dei contenuti, {{HTMLElement("footer")}} e {{HTMLElement("header")}} per le informazioni correlate al sito.</li> +</ol> +<p>Più in generale HTML5 aggiunge precisione alle funzionalità di sezionamento ed intestazione, permettendo una struttura del documento prevedibile e utilizzata dai browser per migliorare l'esperienza utente.</p> +<h2 id="L'Algoritmo_della_Struttura_di_HTML5">L'Algoritmo della Struttura di HTML5</h2> +<h3 id="Definire_Sezioni_nel_HTML5">Definire Sezioni nel HTML5</h3> +<p>Tutto il contenuto dell'elemento {{HTMLElement("body")}} appartiene ad una sezione. Le sezioni HTML5 possono essere nidificate. Accanto alla sezione principale, definita dall'elemento {{HTMLElement("body")}}, i confini delle sezioni vengono definiti esplicitamente o implicitamente. Le sezioni esplicite sono contenute negli elementi {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, e {{HTMLElement("nav")}}.</p> +<div class="note"> + <strong>Nota: </strong>Ogni sezione può avere la propria gerarchia di intestazioni. Quindi anche un elemento nidificato può avere un'intestazione {{HTMLElement("h1")}}. Vedi <a href="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5" title="/it/docs/Sections_and_Outlines_of_an_HTML5_document#Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</a>.</div> +<p>Esempio:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <section> + <h1>Introduzione</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section> + <section> + <h1>Habitat</h1> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + </section> + <aside> + <p>pubblicità + </aside> +</section> +<footer> + <p>(c) 2010 Esempi S.P.A. +</footer></pre> +<p>Questo frammento di HTML definisce due sezioni di primo livello:</p> +<pre><span style="color: red;"><section> + <h1>Elefanti delle foreste</h1> + <section> + <h1>Introduzione</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section> + <section> + <h1>Habitat</h1> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + </section> + <aside> + <p>pubblicità + </aside> +</section></span> + +<span style="color: green;"><footer> + <p>(c) 2010 Esempi S.P.A. +</footer></span></pre> +<p>La prima sezione ha tre sotto-sezioni:</p> +<pre><section> + <h1>Elefanti delle foreste</h1> + + <span style="color: red;"><section> + <h1>Introduzione</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section></span> + + <span style="color: green;"><section> + <h1>Habitat</h1> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + </section></span> + + <span style="color: blue;"><aside> + <p>pubblicità + </aside></span> +</section> + +<footer> + <p>(c) 2010 Esempi S.P.A. +</footer></pre> +<p>Il che genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Introduzione + 1.2 Habitat + 1.3 Sezione (aside) +</pre> +<h3 id="Definire_le_Intestazioni_in_HTML5">Definire le Intestazioni in HTML5</h3> +<p>L'Elemento HTML di Sezione definisce la struttura del documento, ma c'è bisogno anche delle intestazioni. La regola di base è semplice: il primo Elemento HTML di Intestazione (uno tra {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} ) definisce l'intestazione della sezione corrente.</p> +<p>Gli elementi di intestazione hanno un <em>grado</em> dato dal numero nell'elemento, dove {{HTMLElement("h1")}} è il grado <em>più alto</em>, e {{HTMLElement("h6")}} quello <em>più basso</em>. Il grado relativo ha importanza solo all'interno di una sezione; è la struttura delle sezioni a determinare lo schema definitivo, non il grado di ciascuna intestazione. Per esempio, questo codice:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <section> + <h2>Habitat</h2> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + ...la sotto-sezione continua... + </section> +</section> +<section> + <h3>Gerbilli della Mongolia</h3> + <p>In questa sezione, parliamo dei famosi gerbilli della Mongolia. + ...la sezione continua... +</section></pre> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat +2. Gerbilli della Mongolia</pre> +<p>Notare come il grado delle intestazioni (nell'esempio {{HTMLElement("h1")}} per la prima sezione di primo livello, {{HTMLElement("h2")}} per la sotto-sezione e {{HTMLElement("h3")}} per la seconda sezione di primo livello) non conta. (Qualsiasi grado può essere utilizzato come intestazione di una sezione esplicitamente definita, anche se questa pratica non è consigliata.)</p> +<h3 id="Sezionamento_implicito">Sezionamento implicito</h3> +<p>Poiché gli elementi HTML5 di sezionamento non sono obbligatori per definire una struttura, c'è un modo per definire sezioni senza di essi, per mantenere la compatibilità con la rete esistente dominata da HTML4. Questa tecnica è chiamata <em>sezionamento implicito</em>.</p> +<p>Gli Elementi HTML di Intestazione da ( {{HTMLElement("h1")}} a {{HTMLElement("h6")}} ) definiscono una nuova sezione implicita quando non sono la prima voce del loro contenitore, che è sempre una sezione esplicita. Il modo in cui questa sezione implicita viene posizionata nella struttura è definito dal suo grado relativo all'intestazione precedente nella sezione che le contiene. Se il grado è inferiore rispetto all'intestazione precedente, viene aperta una sotto-sezione implicita. Questo codice:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <h3 class="implicit subsection">Habitat</h3> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + ...la sotto-sezione continua... +</section></pre> +<p>genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Habitat <em>(implicitly defined by the h3 element)</em> +</pre> +<p>Se l'intestazione ha lo stesso grado di quella precedente, la sezione corrente viene chiusa (<strong>anche se esplicita</strong>!) e se ne apre una nuova, implicita, dello stesso livello:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <h1 class="implicit section">Gerbilli della Mongolia</h1> + <p>Gerbilli della Mongolia are cute little mammals. + ...la sezione continua... +</section></pre> +<p>genera la seguente struttura: </p> +<pre>1. Elefanti delle foreste +2. Gerbilli della Mongolia <em>(implicitamente definita dall'elemento h1, che allo stesso tempo ha chiuso la sezione precedente)</em> +</pre> +<p>Se ha grado superiore all'intestazione precedente, chiude la sezione corrente e ne apre una nuova, implicita, di livello superiore:</p> +<pre class="brush:xml"><body> + <h1>Mammiferi</h1> + <h2>Balene</h2> + <p>In questa sezione, parliamo delle balene nuotatrici. + ...la sezione continua... + <section> + <h3>Elefanti delle foreste</h3> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + ...la sezione continua... + <h3>Gerbilli della Mongolia</h3> + <p>Hordes of gerbils have spread their range far beyond Mongolia. + ...la sotto-sezione continua... + <h2>Rettili</h2> + <p>I rettili sono animali dal sangue freddo. + ...la sotto-sezione continua... + </section> +</body></pre> +<p>genera la seguente struttura:</p> +<pre>1. Mammiferi + 1.1 Balene <em>(definita implicitamente dall'elemento h2)</em> + 1.2 Elefanti delle foreste <em>(definita esplicitamente dall'elemento section)</em> + 1.3 Gerbilli della Mongolia <em>(definita implicitamente dall'elemento h3, che allo stesso tempo chiude la sezione precedente)</em> + 1.4 Rettili <em>(definita implicitamente dall'elemento h2, che allo stesso tempo chiude la sezione precedente)</em> +</pre> +<p>Questa non è la struttura che ci si potrebbe aspettare dopo un rapido sguardo alle intestazioni. Per rendere il vostro markup comprensibile all'uomo, è una buona pratica usare sezioni esplicite, e far combaciare il grado dell'intestazione con il livello di nidificazione previsto. Tuttavia, ciò non è richiesto dalla specifica HTML5. Se si riscontra che i browser rendono la struttura del vostro documento in modi inaspettati, verificare se alcune sezioni vengono chiuse implicitamente dagli elementi di intestazione.</p> +<p>Un'eccezione alla regola empirica che il grado dell'intestazione deve corrispondere al livello di nidificazione della sezione avviene per le sezioni che vengono riutilizzate in più documenti. Per esempio, una sezione potrebbe essere memorizzata in un sistema di gestione dei contenuti ed inserita nel documento in fase di runtime. In questo caso, una buona pratica è partire sempre da un elemento {{HTMLElement("h1")}} per la prima intestazione della sezione. Il livello di nidificazione della sezione riutilizzabile sarà determinato dalla struttura del documento in cui appare. I tag di sezione esplicita sono comunque utili in questi casi.</p> +<h3 id="Sovrascrivere_il_Sezionamento_Implicito">Sovrascrivere il Sezionamento Implicito</h3> +<p>A volte, una sezione ha bisogno di avere più intestazioni. Alcuni casi comuni sono:</p> +<ul> + <li>una sezione su un libro o un film, che ha un titolo secondario: + <pre class="brush:xml"><section> + <h1>Justine</h1> + <h2>Les Malheurs de la vertu</h2> +</section></pre> + <p>genera la seguente struttura:</p> + <pre>1. Justine + 1.1 Les Malheurs de la vertu +</pre> + </li> + <li>un elenco di tag: + <pre class="brush:xml"><section> + <h1>Strutture e Schemi di un documento</h1> + <h2>HTML, HTML5, Sezioni, Schemi</h2> +</section></pre> + <p>genera la seguente struttura:</p> + <pre>1. Strutture e schemi di un documento + 1.1 HTML, HTML5, Sezioni, Schemi</pre> + </li> +</ul> +<p>A causa del sezionamento implicito, questo non è possibile senza l'aiuto dell'Elemento HTML di Raggruppamento delle Intestazioni ( {{HTMLElement("hgroup")}} ) introdotto da HTML5. Esso "nasconde" tutte le intestazioni dalla struttura, eccetto la prima, consentendo di evitare il sezionamento implicito. Grazie a questo elemento l'esempio del libro secondario:</p> +<pre class="brush:xml"><section> + <hgroup> + <h1>Justine</h1> + <h2>Les Malheurs de la vertu</h2> + </hgroup> + ... Contenuti ... +</section> +</pre> +<p>genera la seguente struttura:</p> +<pre>1. Justine</pre> +<h3 id="Sezioni_root"><a name="sezioni_root">Sezioni "root"</a></h3> +<p>Una sezione "root" (radice) è un elemento HTML che può avere una propria struttura, ma le sezioni ed intestazioni interne ad esso non interferiscono con la struttura del suo contenitore. Oltre al {{HTMLElement("body")}} che è la sezione "root" logica di un documento, le sezioni root sono spesso elementi che aggiungono contenuto esterno alla pagina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} e {{HTMLElement("td")}}.</p> +<p>Esempio:</p> +<pre class="brush:xml"><section> + <h1>Elefanti delle foreste</h1> + <section> + <h2>Introduzione</h2> + <p>In questa sezione, parliamo dei poco noti elefanti delle foreste. + </section> + <section> + <h2>Habitat</h2> + <p>Gli elefanti delle foreste non vivono su gli alberi, ma tra di essi. + Vediamo cosa dicono gli scienziati in "<cite>Gli elefanti delle foreste nel Borneo</cite>": + <blockquote> + <h1>Borneo + <p>L'elemento foresta vive nel Borneo... + </blockquote> + </section> +</section> +</pre> +<p>Questo esempio genera la seguente struttura:</p> +<pre>1. Elefanti delle foreste + 1.1 Introduzione + 1.2 Habitat</pre> +<p>La struttura principale non contiene la struttura interna dell'elemento {{HTMLElement("blockquote")}}, che, trattandosi di una citazione esterna, è un elemento di sezione "root", perciò la sua struttura interna viene isolata.</p> +<h3 id="Sezioni_oltre_la_struttura">Sezioni oltre la struttura</h3> +<p>HTML5 introduce quattro nuovi elementi che permettono di definire sezioni che non fanno parte della struttura principale del documento:</p> +<ol> + <li>L'Elemento HTML di Sezione Aside ( {{HTMLElement("aside")}} ) definisce una sezione che, anche se correlata all'elemento principale, non appartiene al flusso principale, come un box di approfondimento o una pubblicità. Ha la sua propria struttura, ma non appartiene a quella principale.</li> + <li>L'Elemento HTML di Sezione Navigazione ( {{HTMLElement("nav")}} ) definisce una sezione che contiene i link di navigazione. In un documento possono essere presenti molti elementi di navigazione, ad esempio: uno con i link interni alla pagina, come le tabelle dei contenuti, e un altro con i link di navigazione del sito. Questi links non fanno parte del flusso o della struttura principale e generalmente il loro rendering viene eseguito per ultimo dagli screen readers e da tecnologie assistive simili.</li> + <li>L'Elemento HTML di Sezione Header ( {{HTMLElement("header")}} ) definisce la testata di una pagina, che generalmente contiene il logo e il nome del sito, occasionalmente una barra di navigazione. A dispetto del nome, non viene necessariamente posizionato all'inizio del documento.</li> + <li>L'Elemento HTML di Sezione Footer ( {{HTMLElement("footer")}} ) definisce il piè di pagina, che generalmente contiene il copyright, le informazioni legali ed a volte altri links. A dispetto del nome, non viene necessariamente posizionato alla fine del documento.</li> +</ol> +<h2 id="Indirizzi_e_data_di_pubblicazione_negli_elementi_di_sezionamento">Indirizzi e data di pubblicazione negli elementi di sezionamento</h2> +<p>L'autore di un documento spesso vuole pubblicare alcune informazioni personali, come nome e indirizzo dell'autore. HTML4 lo permetteva tramite l'elemento {{HTMLElement("address")}}, che è stato esteso in HTML5.</p> +<p>Un documento può essere fatto di diverse sezioni scritte da diversi autori. Una sezione curata da un autore diverso rispetto alla sezione principale può essere definita da un elemento {{HTMLElement("article")}}. Di conseguenza, l'elemento {{HTMLElement("address")}} è ora riferito al più vicino tra gli elementi {{HTMLElement("body")}} e {{HTMLElement("article")}} che lo contengono.</p> +<p>In modo simile, il nuovo elemento {{HTMLElement("time")}}, con il suo set di attributi {{htmlattrxref("pubdate", "time")}}, rappresenta la data di pubblicazione di tutto il documento, rispettivamente all'articolo, legato al più vicino contenitore {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> +<h2 id="Usare_Elementi_HTML5_nei_Browser_Non-HTML5">Usare Elementi HTML5 nei Browser Non-HTML5</h2> +<p>Sezioni ed intestazioni dovrebbero funzionare nella maggior parte dei browser non-HTML5-compatibili. Anche se non supportati, non necessitano di una interfaccia DOM specifica ma solo di uno stile CSS dedicato, perché agli elementi sconosciuti viene assegnato <code>display:inline</code> di default:</p> +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> +<p>Naturalmente lo sviluppatore può assegnargli uno stile differente, ma tenendo a mente che nei browser non compatibili con HTML5 il rendering di default è diverso da quel che ci si potrebbe aspettare. Notare che l'elemento {{HTMLElement("time")}} non è stato incluso di proposito, perché in questo caso il rendering di default dei browser non-HTML5-compatibili corrisponde a quello previsto.</p> +<p>Questo metodo però ha delle limitazioni, perché alcuni browser non permettono di applicare stili CSS agli elementi non supportati. È il caso di Internet Explorer (versione 8 e precedenti), che necessita di uno script per abilitare il rendering di tali elementi:</p> +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header"); + document.createElement("footer"); + document.createElement("section"); + document.createElement("aside"); + + document.createElement("nav"); + document.createElement("article"); + document.createElement("hgroup"); + document.createElement("time"); + </script> +<![endif]--></pre> +<p>Questo significa che, in caso di Internet Explorer (8 e precedenti), javascript deve essere abilitato affinché gli elementi HTML vengano visualizzati correttamente. Altrimenti essi non verranno visualizzati (o verranno visualizzati senza stili applicati NdT), il che potrebbe rivelarsi problematico, dato che si tratta di elementi che definiscono la struttura dell'intera pagina. Ecco perché un elemento {{HTMLElement("noscript")}} dovrebbe essere aggiunto per questi casi specifici, come nell'esempio di seguito:</p> +<pre class="brush:xml"><noscript> + <strong>Attenzione !</strong> + Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript. + Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina. +</noscript></pre> +<p>Ciò ci porta al seguente codice per permettere il supporto delle sezioni e delle intestazioni HTML5 nei browser non-HTML5, anche nel caso di Internet Explorer (8 e precedenti), con un fallback adeguato nel caso in il browser non permetta l'esecuzione di javascript:</p> +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header"); + document.createElement("footer"); + document.createElement("section"); + document.createElement("aside"); + document.createElement("nav"); + document.createElement("article"); + document.createElement("hgroup"); + document.createElement("time"); + </script> + <noscript> + <strong>Attenzione !</strong> + Dato che il tuo browser non supporta HTML5, alcuni elementi vengono simulati usando JScript. + Sfortunatamente il tuo browser ha disattivato lo scripting. Per favore abilita JScript per visualizzare la pagina. +</noscript> +<![endif]--></pre> +<h2 id="Conclusioni">Conclusioni</h2> +<p>Le nuove sezioni e intestazioni introdotte in HTML5 danno agli sviluppatori la capacità di descrivere la struttura di un documento web in maniera standard. Portano un grande vantaggio per le persone che hanno browser supportanti HTML5 e che hanno bisogno della struttura per comprendere la pagina, per esempio le le persone che necessitano l'aiuto di una tecnologia assistiva. I nuovi elementi semantici sono semplici da usare e, con pochi aggiustamenti, funzionano anche nei browser non-HTML5. Pertanto possono essere utilizzati senza restrizioni.</p> +<div> + {{HTML5ArticleTOC()}}</div> |