initial commit

3 files changed, 422 insertions, 0 deletions

diff --git a/files/it/learn/html/howto/author_fast-loading_html_pages/index.html b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..ff1155be75
--- /dev/null
+++ b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,185 @@
+---
+title: Suggerimenti per l'authoring di pagine HTML in rapido caricamento
+slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+tags:
+  - Avanzate
+  - Guide
+  - HTML
+  - Performance
+  - Web
+  - siti web
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>Questi suggerimenti si basano su conoscenze e sperimentazioni comuni.</p>
+
+<p>Una pagina Web ottimizzata non solo offre un sito più reattivo per i visitatori, ma riduce anche il carico sui server Web e sulla connessione Internet. Questo può essere cruciale per siti ad alto volume che hanno un picco nel traffico a causa di circostanze insolite come le ultime notizie.</p>
+
+<p>Ottimizzare le prestazioni di caricamento della pagina non è solo per i contenuti che verranno visualizzati dai visitatori di dispositivi mobili o dial-up a banda stretta. È altrettanto importante per i contenuti a banda larga e può portare a notevoli miglioramenti anche per i tuoi visitatori con le connessioni più veloci.</p>
+
+<h2 id="Suggerimenti">Suggerimenti</h2>
+
+<h3 id="Riduzione_del_peso_di_una_pagina">Riduzione del peso di una pagina</h3>
+
+<p>Il peso della pagina è di gran lunga il fattore più importante nelle prestazioni del caricamento della pagina.</p>
+
+<p>Riducendo il peso della pagina attraverso l'eliminazione di spazi bianchi e commenti non necessari, comunemente noti come minimizzazione, e spostando script inline e CSS in file esterni, è possibile migliorare le prestazioni di download con il minimo bisogno di altre modifiche nella struttura della pagina.</p>
+
+<p>Strumenti come <a href="http://www.html-tidy.org">HTML Tidy</a> possono automaticamente rimuovere gli spazi bianchi iniziali e le righe vuote aggiuntive da una sorgente HTML valida. Altri strumenti possono "comprimere" JavaScript riformattando l'origine o offuscando l'origine e sostituendo gli identificatori lunghi con versioni più brevi.</p>
+
+<h3 id="Riduci_al_minimo_il_numero_di_file">Riduci al minimo il numero di file</h3>
+
+<p>Riducendo il numero di file referenziati in una pagina web si riduce il numero di connessioni HTTP richieste per scaricare una pagina, riducendo quindi il tempo per l'invio di tali richieste e la ricezione delle loro risposte.</p>
+
+<p>A seconda delle impostazioni della cache di un browser, può inviare una richiesta con l'intestazione <a href="/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> per ogni file di riferimento, chiedendo se il file è stato modificato dall'ultima volta che è stato scaricato. Troppo tempo trascorso a interrogare l'ultima ora modificata dei file di riferimento può ritardare la visualizzazione iniziale della pagina Web, poiché il browser deve controllare l'ora di modifica per ciascuno di questi file, prima di eseguire il rendering della pagina.</p>
+
+<p>Se si utilizzano molto le immagini di sfondo nel CSS, è possibile ridurre la quantità di ricerche HTTP necessarie combinando le immagini in una, nota come immagine sprite. Quindi applichi la stessa immagine ogni volta che ne hai bisogno per uno sfondo e regola le coordinate x / y in modo appropriato. Questa tecnica funziona meglio con elementi che avranno dimensioni limitate e non funzionerà per ogni uso di un'immagine di sfondo. Tuttavia, le minori richieste HTTP e la memorizzazione nella cache di immagini singole possono ridurre il tempo di caricamento della pagina.</p>
+
+<h3 id="Riduci_le_ricerche_di_dominio">Riduci le ricerche di dominio</h3>
+
+<p>Poiché ogni dominio separato costa tempo in una ricerca DNS, il tempo di caricamento della pagina aumenterà insieme al numero di domini separati che appaiono nei link CSS e JavaScript e image src (es).</p>
+
+<p>Questo potrebbe non essere sempre pratico; tuttavia, dovresti sempre fare attenzione a utilizzare solo il numero minimo necessario di domini diversi nelle tue pagine.</p>
+
+<h3 id="Cache_che_riutilizzi_i_contenuti">Cache che riutilizzi i contenuti</h3>
+
+<p>Assicurati che ogni contenuto che può essere memorizzato nella cache, sia memorizzato nella cache e con i tempi di scadenza appropriati.</p>
+
+<p>In particolare, prestare attenzione all'intestazione <code>Last-Modified</code>. Consente un'efficiente memorizzazione nella cache della pagina; tramite questa intestazione, le informazioni vengono trasmesse all'agente utente sul file che desidera caricare, ad esempio quando è stata modificata l'ultima volta. La maggior parte dei server Web aggiunge automaticamente l'intestazione <code>Last-Modified</code> alle pagine statiche (ad esempio .html, .css), in base alla data dell'ultima modifica memorizzata nel file system. Con le pagine dinamiche (ad esempio <code>.php</code>, <code>.aspx</code>), questo, ovviamente, non può essere eseguito e l'intestazione non viene inviata.</p>
+
+<p>Quindi, in particolare per le pagine generate dinamicamente, una piccola ricerca su questo argomento è vantaggiosa. Può essere in qualche modo coinvolto, ma farà risparmiare parecchio nelle richieste di pagine su pagine che normalmente non potrebbero essere memorizzate nella cache.</p>
+
+<p>Maggiori informazioni:</p>
+
+<ol>
+ <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li>
+ <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li>
+ <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li>
+</ol>
+
+<h3 id="Ordina_in_modo_ottimale_i_componenti_della_pagina">Ordina in modo ottimale i componenti della pagina</h3>
+
+<p>Scarica prima il contenuto della pagina, insieme a qualsiasi CSS o JavaScript che potrebbe essere richiesto per la sua visualizzazione iniziale, in modo che l'utente ottenga la risposta apparente più rapida durante il caricamento della pagina. Questo contenuto è tipicamente testo e può quindi trarre vantaggio dalla compressione del testo durante il trasporto, fornendo così una risposta ancora più rapida all'utente.</p>
+
+<p>Qualsiasi funzionalità dinamica che richiede il completamento del caricamento della pagina prima di essere utilizzata, dovrebbe inizialmente essere disabilitata e quindi abilitata solo dopo il caricamento della pagina. Ciò causerà il caricamento del JavaScript dopo il contenuto della pagina, che migliorerà l'aspetto generale del caricamento della pagina.</p>
+
+<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Ridurre il numero di script in linea</h3>
+
+<p>Gli script in linea possono essere costosi per il caricamento della pagina, poiché il parser deve presupporre che uno script inline possa modificare la struttura della pagina mentre è in corso l'analisi. Ridurre l'uso degli script in linea in generale e ridurre l'uso di  <code>document.write()</code> per l'output del contenuto, in particolare, può migliorare il caricamento generale della pagina. Usa i moderni metodi <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> per manipolare il contenuto della pagina per i browser moderni, piuttosto che per gli approcci più vecchi basati su <code>document.write()</code>.</p>
+
+<h3 id="Usa_CSS_moderno_e_marcatura_valida">Usa CSS moderno e marcatura valida</h3>
+
+<p>L'uso del CSS moderno riduce la quantità di markup, può ridurre la necessità di immagini (spaziali), in termini di layout, e può molto spesso sostituire immagini di testo stilizzato - che "costano" molto più del testo equivalente e CSS .</p>
+
+<p>L'utilizzo del markup valido presenta altri vantaggi. Innanzitutto, i browser non avranno bisogno di eseguire correzioni degli errori durante l'analisi dell'HTML (questo a parte il problema filosofico di consentire o meno la variazione del formato nell'input dell'utente, quindi programmaticamente "correggerlo" o normalizzarlo o se, invece, applicare un formato di input rigoroso e senza tolleranza).</p>
+
+<p>Inoltre, il markup valido consente l'uso gratuito di altri strumenti che possono pre-elaborare le tue pagine web. Ad esempio, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> può rimuovere spazi bianchi e tag finali opzionali; tuttavia, rifiuterà di funzionare su una pagina con gravi errori di markup.</p>
+
+<h3 id="Parte_del_contenuto">Parte del contenuto</h3>
+
+<p>Le tabelle per i layout sono un metodo legacy che non dovrebbe essere più utilizzato. Dovrebbero invece essere utilizzati layout che utilizzano <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, or <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">griglie</a>.</p>
+
+<p>Le tabelle sono ancora considerate un markup valido, ma dovrebbero essere utilizzate per la visualizzazione di dati tabulari. Per aiutare il browser a rendere più veloce la tua pagina, dovresti evitare di annidare le tue tabelle.</p>
+
+<p>Piuttosto che tabelle di nidificazione profonda come in:</p>
+
+<pre>&lt;table&gt;
+  &lt;table&gt;
+    &lt;table&gt;
+          ...
+    &lt;/table&gt;
+  &lt;/table&gt;
+&lt;/table&gt;</pre>
+
+<p>usa tabelle o div non annidate come in</p>
+
+<pre>&lt;table&gt;...&lt;/table&gt;
+&lt;table&gt;...&lt;/table&gt;
+&lt;table&gt;...&lt;/table&gt;
+</pre>
+
+<p>Guarda anche: <a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> e specifiche della <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a>.</p>
+
+<h3 id="Minimizza_e_comprime_risorse_SVG">Minimizza e comprime risorse SVG</h3>
+
+<p>SVG prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi. Configura i tuoi server applica la compressione gzip per le risorse SVG.</p>
+
+<h3 id="Minimizza_e_comprimi_le_tue_immagini">Minimizza e comprimi le tue immagini</h3>
+
+<p>Immagini di grandi dimensioni fanno sì che la tua pagina impieghi più tempo per essere caricata. Prendi in considerazione la possibilità di comprimere le tue immagini prima di aggiungerle alla tua pagina. Strumenti online come Compress Jpeg, Tiny PNG e molti altri strumenti sono disponibili online. Puoi utilizzare strumenti offline come Photoshop e altri.</p>
+
+<h3 id="Specify_sizes_for_images_and_tables">Specify sizes for images and tables</h3>
+
+<p>Se il browser è in grado di determinare immediatamente l'altezza e / o la larghezza delle immagini e delle tabelle, sarà in grado di visualizzare una pagina Web senza dover ridisporre il contenuto. Questo non solo accelera la visualizzazione della pagina ma impedisce fastidiose modifiche al layout di una pagina quando la pagina completa il caricamento. Per questo motivo, l'altezza e la larghezza dovrebbero essere specificate per le immagini, quando possibile.</p>
+
+<p>Le tabelle dovrebbero usare il selettore CSS: combinazione di proprietà:</p>
+
+<pre>  table-layout: fixed;
+</pre>
+
+<p>e dovrebbe specificare le larghezze delle colonne usando gli elementi <code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code> e <code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code>.</p>
+
+<h3 id="Scegli_saggiamente_i_tuoi_requisiti_user-agent">Scegli saggiamente i tuoi requisiti user-agent</h3>
+
+<p>Per ottenere i migliori miglioramenti nella progettazione della pagina, assicurarsi che siano richiesti requisiti ragionevoli per l'utente-agente per i progetti. Non richiedere che i tuoi contenuti appaiano pixel perfetti in tutti i browser, specialmente nei browser in versione down.</p>
+
+<p>Idealmente, i requisiti minimi di base dovrebbero essere basati sulla considerazione dei browser moderni che supportano gli standard pertinenti. Questo può includere versioni recenti di Firefox, Internet Explorer, Google Chrome, Opera e Safari.</p>
+
+<p>Si noti, tuttavia, che molti dei suggerimenti elencati in questo articolo sono tecniche di senso comune applicabili a qualsiasi agente utente e possono essere applicate a qualsiasi pagina Web, indipendentemente dai requisiti di supporto del browser.</p>
+
+<h3 id="Utilizzare_async_e_defer_se_possibile">Utilizzare async e defer, se possibile</h3>
+
+<p>Crea gli script JavaScript in modo tale che siano compatibili sia con <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sia con il <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e usa <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> quando possibile, specialmente se hai più tag di script.<br>
+ Con ciò, la pagina può interrompere il rendering mentre JavaScript è ancora in fase di caricamento. Altrimenti, il browser non renderà nulla che si trova dopo i tag di script che non hanno questi attributi.</p>
+
+<p>Nota: sebbene questi attributi siano di grande aiuto per la prima volta in cui viene caricata una pagina, è necessario utilizzarli ma non fare affidamento sul fatto che funzionerà su tutti i browser. Se segui tutte le linee guida per creare un buon codice JavaScript, non è necessario modificare il codice.</p>
+
+<h2 id="Example_page_structure" name="Example_page_structure">Esempio di struttura della pagina</h2>
+
+<p>· <code>HTML</code></p>
+
+<dl>
+ <dd>· <code>HEAD</code></dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>LINK </code>...<br>
+  File CSS richiesti per l'aspetto della pagina. Riduci al minimo il numero di file per le prestazioni mantenendo CSS indipendenti in file separati per la manutenzione.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...File JavaScript per funzioni richieste durante il caricamento della pagina, ma non DHTML che può essere eseguito solo dopo il caricamento della pagina.</dd>
+  <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd>· <code>BODY</code></dd>
+ <dd>· L'utente visualizza il contenuto della pagina in piccoli blocchi (tabelle / div) che possono essere visualizzati senza attendere il download della pagina intera.</dd>
+</dl>
+
+<dl>
+ <dd>
+ <dl>
+  <dd>· <code>SCRIPT </code>...Qualsiasi script che verrà utilizzato per eseguire DHTML. Lo script DHTML in genere può essere eseguito solo dopo che la pagina è stata caricata completamente e tutti gli oggetti necessari sono stati inizializzati. Non è necessario caricare questi script prima del contenuto della pagina. Questo rallenta solo l'aspetto iniziale del caricamento della pagina.</dd>
+  <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd>
+  <dd>Se vengono utilizzate immagini per gli effetti di rollover, è necessario precaricarle qui dopo che il contenuto della pagina è stato scaricato.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Link_correlati">Link correlati</h2>
+
+<ul>
+ <li>Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li>
+ <li>The excellent and very complete <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
+ <li>Tools for analyzing and optimizing performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
+</ul>
diff --git a/files/it/learn/html/howto/index.html b/files/it/learn/html/howto/index.html
new file mode 100644
index 0000000000..5343bdbaad
--- /dev/null
+++ b/files/it/learn/html/howto/index.html
@@ -0,0 +1,155 @@
+---
+title: Use HTML to solve common problems
+slug: Learn/HTML/Howto
+tags:
+  - CodingScripting
+  - HTML
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/HTML/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basic_structure">Basic structure</h3>
+
+<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li>
+</ul>
+
+<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
+
+<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hyperlinks">Hyperlinks</h3>
+
+<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li>
+</ul>
+
+<h3 id="Images_multimedia">Images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li>
+</ul>
+
+<h3 id="Scripting_styling">Scripting &amp; styling</h3>
+
+<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
+</ul>
+
+<h3 id="Embedded_content">Embedded content</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
+
+<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Forms">Forms</h3>
+
+<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
+</ul>
+
+<h3 id="Tabular_information">Tabular information</h3>
+
+<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
+</ul>
+
+<h3 id="Data_representation">Data representation</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
+</ul>
+
+<h3 id="Interactivity">Interactivity</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
+</ul>
+
+<h3 id="Advanced_images_multimedia">Advanced images &amp; multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
+</ul>
+
+<h3 id="Internationalization">Internationalization</h3>
+
+<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
+</ul>
+
+<h3 id="Performance">Performance</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/it/learn/html/howto/uso_attributi_data/index.html b/files/it/learn/html/howto/uso_attributi_data/index.html
new file mode 100644
index 0000000000..f256a42aaf
--- /dev/null
+++ b/files/it/learn/html/howto/uso_attributi_data/index.html
@@ -0,0 +1,82 @@
+---
+title: Uso degli attributi data
+slug: Learn/HTML/Howto/Uso_attributi_data
+tags:
+  - Attributi Di Dati Personalizzati
+  - Esempi
+  - Guide
+  - HTML
+  - HTML5
+  - Web
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code>attributes</a> ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Sintassi_HTML">Sintassi HTML</h2>
+
+<p>La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con <code>data-</code> è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo <code>data</code> per ottenere ciò:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Accesso_mediante_JavaScript">Accesso mediante JavaScript</h2>
+
+<p>Accedere ai valori di questi attributi mediante <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Per ottenere un attributo <code>data</code> attraverso l'oggetto <code>dataset</code>, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo <code>data-</code> (notare che i trattini vengono converti in camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare <code>article.dataset.columns = 5</code> cambierebbe il valore dell'attributo a <code>"5"</code>.</p>
+
+<h2 id="Accesso_mediante_CSS">Accesso mediante CSS</h2>
+
+<p>E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">contenuti generati</a> in CSS con la funzione {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>E' possibile anche utilizzare i <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">selettori d'attributi</a> in CSS  per cambiare lo stile in base ai dati:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>E' possibile vedere tutto ciò all'opera <a href="http://jsbin.com/ujiday/2/edit">in questo esempio JSBin</a>. </p>
+
+<p>Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">questo screencast</a> per vedere un esempio che utilizza contenuti generati e transizioni CSS  (<a href="http://jsbin.com/atawaz/3/edit">esempio JSBin</a>).</p>
+
+<p>I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.</p>
+
+<h2 id="Problemi">Problemi</h2>
+
+<p>Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.</p>
+
+<p>Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti <a href="http://caniuse.com/#feat=dataset">non supportano <code>dataset</code></a>. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. <span id="result_box" lang="it"><span>Inoltre, le</span></span> <a href="http://jsperf.com/data-dataset">prestazioni di lettura degli attributi data</a> <span lang="it"><span>rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse.</span></span> Inoltre, la <a href="http://jsperf.com/data-dataset">performance di lettura degli attributi data</a> comparata alla memorizzazione in un oggetto JavaScript è bassa.</p>
+
+<p>Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.</p>
+
+<p>In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).</p>
+
+<h2 id="Vedi_anche">Vedi anche</h2>
+
+<ul>
+ <li>Questo articolo è stato adattato da <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li>
+ <li>Gli attributi personalizzati sono supportati anche da SVG 2; vedi {{domxref("SVGElement.dataset")}} e {{SVGAttr("data-*")}} per ulteriori informazioni.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li>
+</ul>