[CRON] sync translated content

2 files changed, 209 insertions, 0 deletions

diff --git a/files/fr/orphaned/web/guide/html/html5/index.html b/files/fr/orphaned/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..c6c1e46369
--- /dev/null
+++ b/files/fr/orphaned/web/guide/html/html5/index.html
@@ -0,0 +1,168 @@
+---
+title: HTML5
+slug: orphaned/Web/Guide/HTML/HTML5
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/HTML5
+original_slug: Web/Guide/HTML/HTML5
+---
+<p><strong>HTML5</strong> est la dernière évolution des standards qui définissent <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a>. Le terme HTML5 regroupe deux concepts différents :</p>
+
+<p>Il s'agit de la nouvelle version du <em>langage</em> HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. Cet ensemble est parfois appelé <em>HTML5 &amp; Cie</em> et est souvent juste abrégé en <em>HTML5</em>.</p>
+
+<p>Conçue pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait le lien vers de nombreuses ressources sur les technologies HTML5 classées dans différents groupes suivant leur(s) fonction(s).</p>
+
+<ul>
+ <li><em>Sémantique</em> : permet de décrire plus précisément votre contenu.</li>
+ <li><em>Connectivité</em> : permet de communiquer avec le serveur d'une façon nouvelle et innovante.</li>
+ <li><em>Hors-connexion &amp; stockage</em> : permet aux pages web de stocker des données en local, côté client, et de fonctionner plus efficacement hors-connexion.</li>
+ <li><em>Multimédia</em> : rendre la vidéo et l'audio des citoyens de premier plan sur l'Open Web</li>
+ <li><em>Rendu 2D/3D et effets</em> : permet des options de présentation bien plus variées.</li>
+ <li><em>Performance &amp; intégration</em> : offre une puissance bien plus grande et une meilleure utilisation du matériel de l'ordinateur.</li>
+ <li><em>Accès aux périphériques</em> : permet un usage de périphériques d'entrée et de sortie variés.</li>
+ <li><em>Style</em> : permet aux auteurs d'écrire des thèmes plus sophistiqués.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="Sémantique" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sémantique</h2>
+
+<dl>
+ <dt><a href="/fr/HTML/Introduction_à_HTML5" title="fr/HTML/Introduction à HTML5"><strong>Introduction à HTML5</strong></a></dt>
+ <dd>Cet article vous présente la manière d'utiliser HTML5 dans vos conceptions de sites et d'applications web.</dd>
+ <dt><a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et structure des documents avec HTML5</a></dt>
+ <dd>Un aperçu de la nouvelle organisation des documents avec les nouveaux éléments de section en HTML5 : {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} et {{HTMLElement("hgroup")}}.</dd>
+ <dt><a href="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox" title="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox">Utilisation de l'audio et de la video en HTML5</a></dt>
+ <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans vos pages de nouveaux contenus multimédias.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="/en-US/docs/HTML/Forms_in_HTML">Formulaires en HTML5</a></dt>
+ <dd>Un aperçu des améliorations apportées aux formulaires en HTML5 : l'API de validation, de nouveaux attributs, de nouvelles valeurs pour l'attribut {{htmlattrxref("type", "input")}} de {{HTMLElement("input")}} et le nouvel élément {{HTMLElement("output")}}.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/HTML/HTML5/Liste_des_éléments_HTML5" title="fr"><strong>Nouveaux éléments d'HTML5</strong></a></dt>
+ <dd>En plus des éléments de sections, de média et de formulaires, HTML5 ajoute de nombreux nouveaux éléments, comme {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou encore {{HTMLElement("meter")}}.</dd>
+ <dt>Amélioration de {{HTMLElement("iframe")}}</dt>
+ <dd>En utilisant les attributs {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, et {{htmlattrxref("srcdoc", "iframe")}}, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément {{HTMLElement("iframe")}}.</dd>
+ <dt><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt>
+ <dd>Permet d'insérer des formules mathématiques directement dans les pages web.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="/en-US/docs/HTML/HTML5/HTML5_Parser">Parseur conforme à HTML5</a></dt>
+ <dd>Le parseur, qui transforme les octets d'un document HTML en un DOM, a été étendu, et défini maintenant précisément le comportement à utiliser dans les différentes situations, même confronté à du code HTML incorrecte. Ceci lui permet d'être bien plus prévisible et interopérable avec les différents moteurs de navigateur.</dd>
+</dl>
+
+<h2 id="Connectivité" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivité</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a></dt>
+ <dd>Permet de créer une connexion permanente entre la page et le serveur, et de cette façon échanger des données non-HTML.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Évènements envoyés par le serveur</a></dt>
+ <dd>Permet à un serveur d'envoyer des évènements au client, au lieu du comportement habituel selon lequel le serveur ne peut envoyer des données qu'en réponse à une demande effectuée par le client.</dd>
+ <dt><a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC veut dire <em>Real-Time Communication</em> (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.</dd>
+</dl>
+
+<h2 id="Hors-connexion_et_Stockage" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Hors-connexion et Stockage</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Utiliser_Application_Cache" title="/fr/docs/Utiliser_Application_Cache">Ressources hors connexion : l'Application Cache</a></dt>
+ <dd>Firefox gère complètement la spécification des ressources hors connexion de HTML5.</dd>
+ <dt><a href="/fr/docs/Évènements_online_et_offline" title="/fr/docs/Évènements_online_et_offline">Évènement online et offline</a></dt>
+ <dd>Firefox 3 gère les évènements online et offline du WHATWG, qui permettent aux applications web et aux extensions de détecter si une connexion à Internet est active ou non, ainsi que le moment où la connexion et la déconnexion se font.</dd>
+ <dt><a href="/fr/docs/DOM/Storage" title="fr/DOM/Storage">Stockage de session et persistance côté client du WHATWG (ou DOM Storage)</a></dt>
+ <dd>Le stockage de session et la persistance côté client permettent aux applications web de stocker des données structurées du côté du client.</dd>
+ <dt><a href="/fr/docs/IndexedDB" title="/fr/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>Est un standard web pour stocker dans le navigateur des volumes importants de données structurées, et permettant d'effectuer des recherches rapides dans ces données en utilisant des index.</dd>
+ <dt><a href="/fr/docs/Using_files_from_web_applications" title="fr/Utilisation de fichiers depuis des applications web">Utilisation de fichiers depuis des applications web</a></dt>
+ <dd>La gestion de la nouvelle API File d'HTML5 a été ajoutée à Gecko, ce qui permet aux applications web d'accéder à des fichiers locaux sélectionnés par l'utilisateur. Cela comprend la sélection de plusieurs fichiers à l'aide du nouvel attribut {{htmlattrxref("multiple", "input")}} de l'élément HTML <span style="font-family: monospace;">{{HTMLElement("input")}}</span><code> </code>{{htmlattrxref("type", "input")}}<code>="file"</code>.</dd>
+</dl>
+
+<h2 id="Multimédia" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimédia</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox" title="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox">Utilisation de l'audio et de la video en HTML5</a></dt>
+ <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans les pages web de nouveaux contenus multimédia.</dd>
+ <dt><a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC veut dire <em>Real-Time Communication</em> (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Utiliser l'API Camera</a></dt>
+ <dd>Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.</dd>
+ <dt>Track et WebVTT</dt>
+ <dd>L'élément {{HTMLElement("track")}} permet de sous-titrer et de chapitrer. <a href="/en-US/docs/HTML/WebVTT" title="/en-US/docs/HTML/WebVTT">WebVTT</a> est un format pour marquer du texte par rapport à une durée.</dd>
+</dl>
+
+<h2 id="3D_Graphiques_et_Effets" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, Graphiques et Effets</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Tutoriel_canvas" title="/fr/docs/Tutoriel_canvas">Tutoriel Canvas</a></dt>
+ <dd>Découvrez le nouvel élément {{HTMLElement("canvas")}} et apprennez à dessiner des graphiques et autres objets dans Firefox.</dd>
+ <dt><a href="/fr/docs/Dessin_de_texte_avec_canvas" title="fr/Dessin de texte avec canvas">API de texte HTML5 pour les éléments <code>&lt;canvas&gt;</code></a></dt>
+ <dd>Les éléments {{HTMLElement("canvas")}} gèrent également l'API texte d'HTML5.</dd>
+ <dt><a href="/fr/docs/WebGL" title="/fr/docs/WebGL">WebGL</a></dt>
+ <dd>WebGL amène le monde de la 3D au Web, avec une API très proche de OpenGL ES 2.0, et peut-être utilisé dans les éléments {{HTMLElement("canvas")}}.</dd>
+ <dt><a href="/fr/docs/SVG" title="/fr/docs/SVG">SVG</a></dt>
+ <dd>Un format d'image vectoriel basé sur XML qui peut être inclus directement dans du HTML.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Performance_et_Intégration" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance et Intégration</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Permet de déléguer l'interprétation du JavaScript sur des fils en arrière plan, et évite ainsi le ralentissement des évènements d’intéraction.</dd>
+ <dt><code><a href="/fr/docs/XMLHttpRequest" title="/fr/docs/XMLHttpRequest">XMLHttpRequest</a> </code>Niveau 2</dt>
+ <dd>Permet de récupérer de manière asynchrone certaines parties d'une page. Ceci permet d'afficher du contenu dynamique, s'adaptant en fonction du temps et des actions de l'utilisateur. Il s'agit de la technologie derrière l'<a href="/fr/docs/AJAX" title="/fr/docs/AJAX">AJAX</a>.</dd>
+ <dt>Moteurs JavaScript à compilation JIT (juste à temps)</dt>
+ <dd>La nouvelle génération de moteurs JavaScript est bien plus puissante et permet de meilleures performances dans l'interprétation du langage.</dd>
+ <dt><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">API Historique</a></dt>
+ <dd>Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile sur les pages qui chargent du contenu dynamiquement.</dd>
+ <dt><a href="/fr/docs/HTML/Contenu_editable" title="/fr/docs/HTML/Contenu_editable">L'attribut contentEditable : transformer un site web en un wiki !</a></dt>
+ <dd>HTML5 a standardisé l'attribut contentEditable : apprenez-en plus sur cette fonctionnalité.</dd>
+ <dt><a href="/fr/docs/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/Fr/DragDrop/Drag_and_Drop">Glisser et déposer</a></dt>
+ <dd>L'API de glisser et déposer HTML5 (drag and drop) permet de faire glisser des éléments au sein d'une page web. C'est aussi une API plus simple utilisable par les extensions et applications basées sur Mozilla.</dd>
+ <dt><a href="/fr/docs/Gestion_du_focus_en_HTML" title="fr/Gestion du focus en HTML">Gestion du focus en HTML</a></dt>
+ <dd>Les nouveaux attributs HTML5 <code>activeElement</code> et <code>hasFocus</code> sont gérés.</dd>
+ <dt><a href="/fr/docs/Gestionnaires_de_protocoles_web" title="fr/Gestionnaires de protocoles web">Gestionnaires de protocoles web</a></dt>
+ <dd>Il est à présent possible d'enregistrer des applications web en tant que gestionnaires de protocoles à l'aide de la méthode <code>navigator.registerProtocolHandler()</code>.</dd>
+ <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a></dt>
+ <dd>Permet de contrôler le rendu des animations et ainsi d'obtenir une performance optimale.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">API Plein écran</a></dt>
+ <dd>Contrôle l'utilisation de la totalité de l'écran pour afficher une page ou une application web sans l'interface du navigateur</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">API Verrouillage de la souris</a></dt>
+ <dd>Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.</dd>
+ <dt><a href="/fr/docs/Évènements_online_et_offline" title="/fr/docs/Évènements_online_et_offline">Évènement online et offline</a></dt>
+ <dd>Pour construire de bonnes applications web capables de fonctionner hors connexion, vous avez besoin de savoir quand votre application est déconnectée du réseau. Et forcément, vous avez aussi besoin de savoir quand votre application est de nouveau connectée au réseau.</dd>
+</dl>
+
+<h2 id="Accès_aux_périphériques" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accès aux périphériques</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Utiliser l'API Camera</a></dt>
+ <dd>Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/Touch_events" title="/en-US/docs/Web/Guide/Touch_events">Évènements tactiles</a></dt>
+ <dd>Des gestionnaires pour réagir aux évènements créés par un utilisateur qui touche un écran tactile.</dd>
+ <dt><a href="/fr/docs/Using_geolocation" title="/fr/docs/Using_geolocation">Utilisation de la Geolocalisation</a></dt>
+ <dd>Permet au navigateur de situer l'utilisateur en utilisant la géolocalisation.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détection de l'orientation de l'appareil</a></dt>
+ <dd>Permet de savoir si l'appareil sur lequel tourne le navigateur change d'orientation. Cela peut être utilisé comme un périphérique d'entrée (par exemple, un jeu peut réagir selon la position de l'appareil), ou pour adapter la mise en page suivant l'orientation de l'appareil (portrait ou paysage).</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">API Verrouillage de la souris</a></dt>
+ <dd>Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.</dd>
+</dl>
+
+<h2 id="Style" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Style</h2>
+
+<p><a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> a été enrichi pour styler les éléments d'une manière beaucoup plus avancée. Ceci est souvent défini comme le <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, bien que CSS ne soit plus une spécification monolithique et que les différent modules ne soient pas tous au niveau 3 : certains sont au niveau 1,  d'autres au niveau 4, mais tous les niveaux intermédiaires sont couverts.</p>
+
+<dl>
+ <dt>Nouveaux styles d'arrière-plan</dt>
+ <dd>Il est maintenant possible créer une ombre pour une boîte en utilisant {{cssxref("box-shadow")}}, et de définir <a href="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds" title="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds">plusieurs arrière-plans</a>.</dd>
+ <dt>Des bordures plus classes</dt>
+ <dd>Il est maintenant non seulement possible d'utiliser des images pour styler les bordures en utilisant {{cssxref("border-image")}}, mais aussi de faire des bords arrondis grâce à la propriété {{cssxref("border-radius")}}.</dd>
+ <dt>Animer vos styles</dt>
+ <dd>En utilisant les <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Transitions CSS</a> pour animer différents états, ou en utilisant les <a href="/fr/docs/CSS/Animations_CSS" title="/fr/docs/CSS/Animations_CSS">Animations CSS</a> pour animer une partie de la page sans un évènement déclencheur, vous pouvez maintenant gérer les mouvements sur votre page.</dd>
+ <dt>Amélioration de la typographie</dt>
+ <dd>Les auteurs ont un bien meilleur contrôle sur leur typographie. Ils peuvent contrôler {{cssxref("text-overflow")}} et la <a href="/fr/docs/CSS/hyphens" title="/fr/docs/CSS/hyphens">césure automatique</a>. Ils peuvent rajouter une <a href="/fr/docs/CSS/text-shadow" title="/fr/docs/CSS/text-shadow">ombre</a> et des <a href="/fr/docs/CSS/text-decoration" title="/fr/docs/CSS/text-decoration">décorations</a> plus fines. Des polices personnalisées peuvent être utilisées grâce {{cssxref("@font-face")}}.</dd>
+ <dt>Nouvelles options de mise en page</dt>
+ <dd>Pour améliorer la flexibilité de vos designs, deux nouvelles options de mise en page ont été ajoutées : <a href="/fr/docs/CSS/Colonnes_CSS3" title="/fr/docs/CSS/Colonnes_CSS3">Colonnes CSS</a> et <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="/en-US/docs/Web/Guide/CSS/Flexible_boxes">boîtes flexibles CSS</a>.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html
new file mode 100644
index 0000000000..c885937350
--- /dev/null
+++ b/files/fr/orphaned/web/guide/html/html5/introduction_to_html5/index.html
@@ -0,0 +1,41 @@
+---
+title: Introduction à HTML5
+slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+original_slug: Web/Guide/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> est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.</p>
+
+<p>Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : <a href="/fr/HTML/HTML5" title="fr/HTML/HTML5">HTML5</a>. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5"> CanIUse</a> .</p>
+
+<h2 id="Indiquer_que_le_document_contient_du_HTML5_grâce_au_doctype_HTML5">Indiquer que le document contient du HTML5 grâce au doctype HTML5</h2>
+
+<p>La doctype HTML5 est très simple, il s'agit simplement de ceci :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+</pre>
+
+<p>Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.</p>
+
+<p>Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.</p>
+
+<h2 id="Déclarer_l'encodage_de_caractères_avec_&lt;meta_charset>">Déclarer l'encodage de caractères avec <code>&lt;meta charset&gt;</code></h2>
+
+<p>La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :</p>
+
+<pre class="brush:html;">&lt;meta charset="UTF-8"&gt;</pre>
+
+<p>Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.</p>
+
+<p>Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.</p>
+
+<h2 id="Utiliser_le_nouveau_parser_HTML5">Utiliser le nouveau parser HTML5</h2>
+
+<p>Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.</p>
+
+<p>Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.</p>
+
+<p>Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !</p>