Rodolphe Rimelé

HTML 5Une référence pour le développeur web

3e édition

3e éditi

onR.

Rim

elé

HTML

5 - U

ne ré

féren

ce po

ur le

déve

loppe

ur we

b

39 E

Studio Eyrolles © Éditions Eyrolles

Cod

e éd

iteur

: G

1436

5IS

BN

: 97

8-2-

212-

1436

5-2

HTML 5 intègre dans sa conception l’architecture à trois piliers qu’est HTML pour la structure, CSS 3 pour l’apparence et JavaScript pour l’interactivité, avec de nombreuses nouvelles API pour concevoir des applications web. L’intégrateur ou le développeur web pourra ainsi découvrir et exploiter les standards du Web, pour proposer au sein de sites performants et accessibles des contenus multimédias (animations, audio et vidéo), mais également interactifs (nouveaux formulaires, glisser-déposer, etc.).

Concevoir des sites riches, performants et accessibles avec HTML 5Ce livre fait la lumière sur les spécifications ardues d’HTML 5, dont il explore l’ensemble des nouveautés et des balises, y compris celles ayant existé et évolué depuis les précédentes versions. Après avoir rappelé l’histoire mouvementée de sa conception au W3C et au WhatWG, l’auteur explique au fil des chapitres comment concevoir des sites et applications web performants et accessibles, en y incorporant des éléments médias (audio, vidéo), en créant des zones de dessin interactives et des animations avec Canvas et en exploitant les microformats pour un balisage sémantique qui améliorera l’échange de données et le référencement.Il détaille pas à pas les interfaces de programmation pour la gestion des fichiers (File API), la géolocalisation, la prise en charge du glisser-déposer(Drag & Drop), et explique comment stocker des données locales dans le navigateur (Web Storage), communiquer en temps réel ou procéder à des échanges interdocuments (Web Sockets, Server-Sent Events et Web Messaging). Il aborde enfin les techniques permettant d’exécuter du JavaScript en multithread (Web Workers) et la réalisation d’applications hors ligne, les bases de données côté navigateur (Indexed Database etWeb SQL Database), ainsi que la manipulation avancée de l’historique (History API).Très illustrée, riche en conseils et bonnes pratiques, la troisième édition de cet ouvrage intègre toutes les dernières évolutions d’HTML 5 – depuis que sa première version a vu le jour – et les nouveautés concrètement implémentées par les navigateurs web. L’approche pragmatique permet de l’utiliser comme référence pour élaborer et modifier des pages web, mais aussi comme guide pour concevoir une application web.

À qui cet ouvrage s’adresse-t-il ? • Aux développeurs web, intégrateurs qui souhaitent mettre en œuvre les nouvelles API d’HTML 5 et moderniser leurs bonnes pratiques de

développement web.• Aux designers web qui souhaitent découvrir toutes les possibilités que leur offre HTML 5.• À tous ceux qui souhaitent acquérir une méthodologie cohérente du développement web, combinant qualité et accessibilité.

Au sommaire Une brève histoire du Web et de ses standards • HTML en seconde langue • Navigateurs et outils de conception • Éléments et attributs HTML 5 • Les formulaires (Web Forms) • Les microformats (microdata) • Audio et vidéo • Dessin avec Canvas • Géolocalisation • Interactions avec les fichiers (File API) • Gestion du glisser-déposer (Drag & Drop) • Événements envoyés par le serveur (Server-Sent Events) • Échange d’informations entre documents (Web Messaging) • Communication en temps réel (Web Sockets) • Stockage des données locales (Web Storage) • Bases de données (Indexed Database et Web SQL Database) • Historique de navigation (History API) • JavaScript en (multi)tâche de fond et hors ligne : les Web Workers et Service Workers • JavaScript, le DOM et l’API Selectors • Annexes. Fonctionnalités modifiées et obsolètes • Feuilles de styles CSS • Accessibilité et ARIA

Ingénieur spécialisé dans les réseaux et applications, Rodolphe Rimeléest le cofondateur d’Alsacréations.fr, avec Raphaël Goetter. Il combine de nombreux talents, en alliant une expertise des différents langages du Web (HTML/CSS et JavaScript) et des compétences en programmation back-end ou en administration de systèmes et serveurs. Il est l’auteur des mémentos HTML 5 et MySQL 5 aux éditions Eyrolles et de nombreux tutoriels relatifs aux langages du Web.

Préface de Raphaël Goetter

Une référence pour le développeur web

Rodolphe Rimelé

HTML 5Une référence pour le développeur web

3e édition

3e éditi

onR.

Rim

elé

HTML

5 - U

ne ré

féren

ce po

ur le

déve

loppe

ur we

b

HTML 5 intègre dans sa conception l’architecture à trois piliers qu’est HTML pour la structure, CSS 3 pour l’apparence et JavaScript pour l’interactivité, avec de nombreuses nouvelles API pour concevoir des applications web. L’intégrateur ou le développeur web pourra ainsi découvrir et exploiter les standards du Web, pour proposer au sein de sites performants et accessibles des contenus multimédias (animations, audio et vidéo), mais également interactifs (nouveaux formulaires, glisser-déposer, etc.).

Concevoir des sites riches, performants et accessibles avec HTML 5Ce livre fait la lumière sur les spécifications ardues d’HTML 5, dont il explore l’ensemble des nouveautés et des balises, y compris celles ayant existé et évolué depuis les précédentes versions. Après avoir rappelé l’histoire mouvementée de sa conception au W3C et au WhatWG, l’auteur explique au fil des chapitres comment concevoir des sites et applications web performants et accessibles, en y incorporant des éléments médias (audio, vidéo), en créant des zones de dessin interactives et des animations avec Canvas et en exploitant les microformats pour un balisage sémantique qui améliorera l’échange de données et le référencement.Il détaille pas à pas les interfaces de programmation pour la gestion des fichiers (File API), la géolocalisation, la prise en charge du glisser-déposer(Drag & Drop), et explique comment stocker des données locales dans le navigateur (Web Storage), communiquer en temps réel ou procéder à des échanges interdocuments (Web Sockets, Server-Sent Events et Web Messaging). Il aborde enfin les techniques permettant d’exécuter du JavaScript en multithread (Web Workers) et la réalisation d’applications hors ligne, les bases de données côté navigateur (Indexed Database etWeb SQL Database), ainsi que la manipulation avancée de l’historique (History API).Très illustrée, riche en conseils et bonnes pratiques, la troisième édition de cet ouvrage intègre toutes les dernières évolutions d’HTML 5 – depuis que sa première version a vu le jour – et les nouveautés concrètement implémentées par les navigateurs web. L’approche pragmatique permet de l’utiliser comme référence pour élaborer et modifier des pages web, mais aussi comme guide pour concevoir une application web.

À qui cet ouvrage s’adresse-t-il ? • Aux développeurs web, intégrateurs qui souhaitent mettre en œuvre les nouvelles API d’HTML 5 et moderniser leurs bonnes pratiques de

développement web.• Aux designers web qui souhaitent découvrir toutes les possibilités que leur offre HTML 5.• À tous ceux qui souhaitent acquérir une méthodologie cohérente du développement web, combinant qualité et accessibilité.

Au sommaire Une brève histoire du Web et de ses standards • HTML en seconde langue • Navigateurs et outils de conception • Éléments et attributs HTML 5 • Les formulaires (Web Forms) • Les microformats (microdata) • Audio et vidéo • Dessin avec Canvas • Géolocalisation • Interactions avec les fichiers (File API) • Gestion du glisser-déposer (Drag & Drop) • Événements envoyés par le serveur (Server-Sent Events) • Échange d’informations entre documents (Web Messaging) • Communication en temps réel (Web Sockets) • Stockage des données locales (Web Storage) • Bases de données (Indexed Database et Web SQL Database) • Historique de navigation (History API) • JavaScript en (multi)tâche de fond et hors ligne : les Web Workers et Service Workers • JavaScript, le DOM et l’API Selectors • Annexes. Fonctionnalités modifiées et obsolètes • Feuilles de styles CSS • Accessibilité et ARIA

Ingénieur spécialisé dans les réseaux et applications, Rodolphe Rimeléest le cofondateur d’Alsacréations.fr, avec Raphaël Goetter. Il combine de nombreux talents, en alliant une expertise des différents langages du Web (HTML/CSS et JavaScript) et des compétences en programmation back-end ou en administration de systèmes et serveurs. Il est l’auteur des mémentos HTML 5 et MySQL 5 aux éditions Eyrolles et de nombreux tutoriels relatifs aux langages du Web.

Préface de Raphaël Goetter

Une référence pour le développeur web

HTML 5 Une référence pour le développeur web

HTML5_.book Page I Friday, October 13, 2017 12:04 AM

DANS LA MÊME COLLECTION

M. BIDAULT. – Programmation Excel avec VBA.N°67401, 2017, 480 pages.

K. NOVAK. – Débuter avec LINUX.N°13793, 2017, 522 pages.

P. MARTIN, J. PAULI, C.PIERRE DE GEYER. – PHP 7 avancé.N°14357, 2016, 732 pages.

L. BLOCH, C. WOLFHUGEL, A. KOKOS, G. BILLOIS, A. SOULLIÉ, T. DEBIZE. – Sécurité informatique.N°11849, 5e édition, 2016, 648 pages.

R. GOETTER. – CSS 3 Flexbox.N°14363, 2016, 152 pages.

W. MCKINNEY. – Analyse de données en Python.N°14109, 2015, 488 pages.

E. BIERNAT, M. LUTZ. – Data science : fondamentaux et études de cas.N°14243, 2015, 312 pages.

B. PHILIBERT. – Bootstrap 3 : le framework 100 % web design.N°14132, 2015, 318 pages.

C. CAMIN. – Développer avec Symfony2.N°14131, 2015, 474 pages.

SUR LE MÊME THÈME

M. NEBRA. – Réalisez votre site web avec HTML 5 et CSS 3.N°67467, 2e édition, 2017, 348 pages.

F. DRAILLARD. – Premiers pas en CSS 3 et HTML 5.N°67430, 7e édition, 2017, 514 pages.

H. GIRAUDEL, R. GOETTER. – CSS 3 : Pratique du design web.N°14023, 2015, 372 pages.

S. POLLET-VILLARD. – Créer un seul site pour toutes les plates-formes.N°13986, 2014, 144 pages.

K. DELOUMEAU-PRIGENT. – CSS maintenables avec Sass et Compass. N°13640, 2e édition, 2014, 252 pages.

Retrouvez nos bundles (livres papier + e-book) et livres numériques surhttp://izibook.eyrolles.com

HTML5_.book Page II Friday, October 13, 2017 12:04 AM

HTML 5 Une référence pour le développeur web

3e édition

Rodolphe RimeléPréface de Raphaël Goetter

_Copyright_p3-4_.fm Page III Sunday, October 15, 2017 1:36 PM

En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage,sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre Français d’exploitation du droit de copie,20, rue des Grands Augustins, 75006 Paris.

© Groupe Eyrolles, 2018, ISBN : 978-2-212-14365-2

ÉDITIONS EYROLLES61, bd Saint-Germain75240 Paris Cedex 05

www.editions-eyrolles.com

HTML5_.book Page IV Friday, October 13, 2017 12:04 AM

apitre

Nous connaissons tous HTML plus ou moins intimement. Lorsque nous naviguons surInternet ou que nous écrivons nos pages web, il reste fidèlement à nos côtés, malgré lespéripéties et déboires qu’il a subis. C’est qu’il en a connu des aventures ! Les derniersarrivés tels qu’Adobe Flash ou Microsoft Silverlight pensaient l’avoir enterré, en vain...On le retrouvait parfois sous les doux sobriquets de « DHTML » ou de « Web 2.0 ».Créé à l’origine pour tisser des liens et véhiculer du contenu de manière universelle, il sevoyait dénaturé dans ses fonctions primaires, comme l’ont montré ses tableaux de miseen page, aujourd’hui diabolisés. À dire vrai et en y regardant de près, HTML a toujoursété là, endossant loyalement son rôle d’ossature indispensable du Web.

À ses débuts, sa mission se limitait à structurer des contenus basiques, essentielle-ment textuels et scientifiques, ordonnés de façon rigoureusement linéaire et assez peuexcitante, il faut l’avouer. Puis, au fur et à mesure de l’évolution des usages des inter-nautes, HTML se diversifie, se renforce et s’adapte – parfois avec un peu de retardsur les besoins, et malgré les batailles que se livrent les navigateurs.

La quatrième mouture de HTML, finalisée en 1998 – la préhistoire du Web, peut-ondire –, paraît bien désuète aujourd’hui, une vingtaine d’années plus tard. Il s’agit pour-tant de la plus récente version finalisée ayant reçu l’adoubement officiel du W3C. Cegigantesque retard accumulé durant ces dix dernières années tend enfin à se combler,petit à petit, grâce au développement et à l’implantation de la version 5 du langage,tant attendue. Aux bons et loyaux services de HTML 4, se substituent de riches uni-vers adaptés aux besoins et usages d’un Web moderne, varié, rapide et mobile.

Nouvelles balises, nouvelles technologies, formulaires avancés, outils multimédias,adaptation aux supports nomades et applications performantes : autant de nouveauxmondes offerts par ce nouvel opus en voie d’adoption. Même si HTML 5, sorte denouveau « Web 2.0 », est censé annoncer le Web de l’avenir, dans la pratique, sesfonctionnalités répondent tout simplement aux attentes des internautes. L’usager

Préface

HTML5_.book Page V Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2005VI

peut enfin profiter de la lecture audio ou vidéo sans plug-in additionnel, trouver unhôtel ou un emploi proches grâce à la géolocalisation (qui pose certes quelques ques-tions de privauté), bénéficier du support hors-ligne lorsque sa connexion estdéfaillante ou qu’il se déplace, profiter de fonctions de glisser-déposer, de stockageintelligent ou des web-workers, ces travailleurs de l’ombre qui permettent d’accélérerles performances en parallélisant le traitement des ressources.

Pensez que la version précédente était finalisée depuis plus de dix ans ! La patiencede nous autres, concepteurs web, avait atteint ses limites ; elle se voit enfin récom-pensée. Tous les grands sites intègrent déjà une multitude d’applications stables deHTML 5, mais les grands bénéficiaires en sont bien sûr les sites web pour périphéri-ques mobiles, qui peuvent déjà exploiter nativement des fonctionnalités telles quel’adaptation automatique des designs aux différentes tailles d’écran.

HTML a bien mûri. La version 5.0, officiellement finalisée depuis 2014, se présentecomme une ressource exaltante qui exploitera véritablement les possibilités technolo-giques contemporaines. Cela inclut la puissance des connexions internet, les périphé-riques mobiles (smartphones et tablettes) ainsi que le multimédia. Il était temps. Etil est l’heure à présent de révolutionner nos habitudes d’internautes et de concepteursde sites web.

Cette révolution n’est d’ailleurs pas sans rappeler celle opérée dans mon domaine deprédilection, celui des feuilles de styles CSS, autre univers en refonte depuis la ver-sion CSS 3. En tant que designer web et pour avoir rédigé quelques ouvrages sur lesfeuilles de styles CSS, je peux comprendre et partager l’enthousiasme de Rodolphe,ainsi que celui de la communauté de développeurs en pleine ébullition.

Si la symbiose entre HTML et CSS semblait parfaite sur le papier – l’un s’attachantà structurer l’information (balises, sémantique), l’autre à lui donner forme (esthé-tique, positionnements) –, je ne vous apprendrai pas que les deux ont longtemps étémal imbriqués : l’on côtoyait fréquemment les styles de mise en forme au cœur deséléments et balises HTML, bien que ce ne fût pas leur place attitrée et que cela nuisîtà l’accessibilité et à la compatibilité des documents produits.

À l’ère de HTML 5 et CSS 3, le couple accède à une nouvelle dimension et de nou-veaux pouvoirs. Les interactions entre les deux langages n’ont jamais été aussipuissantes : séparation fond-forme renforcée grâce à une pluralité de nouvellesbalises sémantiques (<header>, <footer>, <article>, <section>, etc.), gestion desmédias et périphériques mobiles, prise en charge démultipliée des formulaires (via lanotion de formulaire valide, invalide, incomplet), etc.

Cette imbrication va au-delà d’une simple association de langages, une véritable philo-sophie de conception s’en dégage : par « HTML 5 », on entend désormais « HTML 5

HTML5_.book Page VI Friday, October 13, 2017 12:04 AM

© Groupe Eyrolles, 2005 VII

Préface

combiné à CSS 3 et JavaScript ». C’est une avancée considérable pour le Web, quicomble enfin de façon extraordinaire les attentes des designers et intégrateurs CSS.

Même le dernier retardataire, Microsoft, suit le mouvement avec entrain voire zèle –fait d’autant plus notable qu’il n’était pas coutumier du fait. Edge, seccesseurd’Internet Explorer, a depuis lors réalisé d’immenses progrès en termes de compati-bilité, de performances et de respects des standards W3C.

Le mouvement est en marche, la révolution ne fait que commencer...

Mais revenons à ce livre. HTML 5 se compose en pratique des langages HTML +CSS + JavaScript, autant de domaines dans lesquels l’auteur excelle.

Tout d’abord, cet ouvrage approche l’exhaustivité, compte-tenu des spécifications encours d’évolution. Méticuleux, Rodolphe n’a pu se restreindre à moins de 600 pagesde contenus, codes et illustrations. L’annexe en ligne sur l’accessibilité, notamment,mériterait d’être lue par tout professionnel du Web.

Ensuite, il ne contient pas d’approximation, et l’auteur ne prend aucune liberté avecles standards. Chaque partie est testée, moult fois vérifiée et validée avant de figurerdans l’ouvrage.

Enfin, il est agréable à lire, parsemé d’un humour que l’on pourrait qualifier de « à laRodolphe »© et qu’il manie avec beaucoup de justesse.

Ce qui m’amène à dire un mot de l’auteur : Rodolphe Rimelé manie avec une désinvol-ture naturelle les logiciels de graphisme et d’image, les animations Flash ; il connaît lesarcanes de langages tels que jQuery, Ajax, PHP, MySQL, l’administration de serveursweb et maîtrise encore bien d’autres jargons informatiques. Son curriculum vitae débordeallègrement de références en webdesign et développement, et se distingue par la publica-tion d’un DVD d’apprentissage sur jQuery, d’un lecteur Flash fameux à l’époqueestampillé « Dewplayer » et d’un mémento sur MySQL précédemment publié chezEyrolles. Ce portrait ne serait pas complet sans évoquer ses évidentes qualités de photo-graphe amateur et d’humoriste tourmenté via son carnet personnel blup.fr. Tant de per-fection et de diversité à la fois suscitent l’envie pour l’un des membres du commun desmortels que je suis. Dès que Rodolphe touche un clavier d’ordinateur, il semble que toutlui réussit, infailliblement, et à merveille. Et le voilà à présent qui s’attaque à HTML 5 !

Je suis sûr que vous trouverez bien d’autres qualités à son livre.

Bonne lecture.

Raphaël Goetter, fondateur d’alsacreations.comraphael@goetter.fr

HTML5_.book Page VII Friday, October 13, 2017 12:04 AM

HTML5_.book Page VIII Friday, October 13, 2017 12:04 AM

apitre

Ce livre est le fruit de longs mois de travail, de recherches, d’expérimentations, de dis-sections des spécifications toujours en mouvement, de pittoresques rencontres debogues, de discussions avec mes collègues. J’espère qu’il sera utile au plus grand nombreet qu’il répandra autour de lui autant de plaisir que j’ai eu à l’écrire.

Avertissement et conventionsLa spécification HTML est un document qui dépasse les 800 pages et qui fait référenceà de nombreux autres grâce à la magie des liens hypertextes. Il est écrit dans un langagepeu distrayant, condensé, très technique, à la destination d’un public très spécialisé.

Cet ouvrage se veut plus didactique et pratique. Il ne couvre pas toutes les mentions,exceptions et précisions de la spécification, qui nécessiteraient 23 volumes différentset une nouvelle étagère à côté de votre bureau. C’est pourquoi son objectif est d’allerà l’essentiel.

J’ai choisi de faire référence aux éléments HTML en les notant principalement entant que balises, c’est-à-dire entre les caractères inférieur à « < » et supérieur à « > »,pour faciliter la lecture et l’appropriation du code.

Voici par exemple un élément <p> qui correspond à un paragraphe. Fondamentale-ment, un élément comprend une balise ouvrante <p> et une balise fermante </p>,éventuellement des attributs et du contenu. Il s’agit aussi d’une entité mixte qui est àla fois présente dans le code HTML, dans le DOM, et à laquelle on peut faire réfé-rence en JavaScript et en CSS. On peut donc la décrire de multiples façons selon lecontexte. J’espère que les puristes me pardonneront ce trope.

Enfin, cet ouvrage ne traite pas de web design en général, ni de graphisme, ni desfeuilles de styles CSS (à l’exception des nouveautés CSS 3 mentionnées au sein des

Avant-propos

HTML5_.book Page IX Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2005X

chapitres). Ce sont des sujets qui sont eux-mêmes aussi vastes et qui méritent desapports complémentaires à la seule vision du code HTML.

Codes sourceLes exemples de code sont rédigés en français avec quelques soupçons d’anglais, lan-gage de prédilection pour le Web. Ils doivent être adaptés à vos besoins, qui peuventvarier grandement selon le contexte de développement ou la mise en page attendue.Certains exemples figurant dans un chapitre ne reprendront pas nécessairementtoutes les recommandations présentes dans les précédents par souci de simplicité etde lisibilité. Il vous appartiendra de faire vos choix, au regard des tenants et aboutis-sants de vos projets.

Le code complet de la page HTML (en-tête et pied de page, propriétés de style) ne sera,la plupart du temps, pas repris intégralement, car semblable d’une page à l’autre ; maisvous le retrouverez dans les chapitres initiaux et les fichiers à télécharger. Il en sera demême pour les feuilles de styles CSS associées à la présentation des documents HTML.Les codes sources affichent une fraîcheur maximum au moment de la rédaction.

COMPLÉMENTS Annexe sur CSS et l’accessibilité (ARIA) et tableaux de prise en charge mis à jour

Cet ouvrage est complété de deux annexes et d’un index : • l’annexe A, qui fait un point sur les « Fonctionnalités modifiées et obsolètes » entre HTML 4

et HTML 5 ;• l’annexe B, comprenant un rappel de quelques principes des feuilles de styles CSS ;• l’annexe C, enfin, qu’il faudrait mettre entre les mains de tout développeur web, et qui vous guide

dans la création de sites accessibles, conformes à la spécification ARIA : « Accessibilité et ARIA ».Vous trouverez également sur le site d’accompagnement du livre des ressources et compléments, ainsiqu’une collection de liens utiles.B http://html5.blup.fr/ B http://www.editions-eyrolles.com/Quant aux illustrations variées utilisées dans cet ouvrage, elles sont issues de Fotolia et Photl avec leurpermission. Les photos des démonstrations et des exemples ont été réalisées par l’auteur.B http://www.fotolia.comB http://www.photl.com

HTML5_.book Page X Friday, October 13, 2017 12:04 AM

© Groupe Eyrolles, 2005 XI

Avant-propos

À propos de l’auteurInitialement ingénieur réseaux et télécoms, j’ai bifurqué quelque peu à l’issue de mesétudes vers ma passion réelle, qui avait débuté bien avant cela lorsque j’avais tenté depercer plusieurs mystères :• celui de mon modem RTC qui produisait des bruits étranges ;• celui de mon modem câble qui <blink>clignotait</blink> bien souvent en orange ;• celui de la première version de Flash qui m’a valu un stage expérimental auprès de

mon propre fournisseur d’accès ;• celui de toutes les invocations magiques telles qu’IRC, NTTP et IPX qui

cachaient un Nouveau Monde désormais en péril.

À cette époque – mode nostalgie on – sobre en débit mais pas en GIF animés, lesgéants du Web – Google, Dailymotion, YouTube, Wikipédia, Facebook – n’exis-taient pas. Point de Chatroulette, d’iPhone ou de Twitter à l’horizon. Les CMS secomptaient sur les doigts d’une seule main. Cela n’en faisait pas pour autant unmonde moins fabuleux ni moins vaste – mode nostalgie off.

Comme beaucoup d’autres passionnés, je dois tout ce que j’ai appris à la veille techno-logique quotidienne que permet Internet, les échanges sur les forums, la lecture delivres en français ou en anglais, la vie en agence web, la création de projets expérimen-taux, les recherches effectuées pour écrire des articles publiés sur Alsacreations.com.

Bien qu’intéressé par mes études menées à leur terme, je me suis aperçu que la confi-guration de routeurs (et d’autres protocoles empilés dans chaque couche du modèleOSI) était bien moins réjouissante que les séances de <body></body>, c’est-à-dire laréalisation de sites esthétiques et vraiment utiles à mes semblables. Par ailleurs, jepouvais apprendre en une journée ce que l’on nous inculquait à l’université en unmois et qui était par moments dépassé ou superfétatoire – n’entendez pas là qu’il yavait de super fêtes, mais que les applications concrètes se faisaient désirer.

Je m’intéresse aussi à la géographie, à l’histoire, à l’astronomie, pour me changer lesidées depuis que le rayonnement d’un écran illumine mon quotidien.

J’ai publié avant cet ouvrage un mémento MySQL et un mémento HTML 5 auxéditions Eyrolles.

À propos d’AlsacréationsAlsacreations.com, site communautaire d’apprentissage des standards du Web, a étéfondé par Raphaël Goetter en 2003. Il a vu sa popularité grandir d’année en annéeavec la publication de nombreux tutoriels qui défendaient – parfois en avance sur leurtemps – une conception web propre et conforme aux normes.

HTML5_.book Page XI Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2005XII

Pour participer à ce mouvement, et après avoir sympathisé autour d’une tarte flambéeavec Raphaël, j’ai rédigé des articles, des actualités, développé le forum et d’autresfonctionnalités pour la communauté.

C’est avec plaisir que nous nous sommes associés en 2006 pour lancer Alsacrea-tions.fr, l’agence web, afin de mettre en pratique ce que nous défendions et de pou-voir en faire notre métier. Nous nous attachons à ne pas utiliser des expressionscomme « Web 2.0 », « rationalisation de process digital » et « buzz viral », mais àadopter des approches pragmatiques.

Notre petite équipe s’est étoffée progressivement mais sûrement, avec des collabora-teurs de qualité en qui je place toute ma confiance. Aujourd’hui, je conduis et déve-loppe avec eux des projets pour des clients aux niveaux national et international.

RemerciementsCet ouvrage n’aurait pu voir le jour sans le soutien de tous ceux qui m’entourent auquotidien. Je remercie tout particulièrement...• Mes parents, pour tout ce qu’ils m’ont apporté durant ma jeunesse et mes études,

pour tous les recoins du monde qu’ils m’ont fait découvrir : mon père qui nous aquittés durant l’écriture et à qui je dois beaucoup ; ma mère qui a toujours été pré-sente et attentionnée pour moi.

• Sarah, pour sa patience de tous les jours, ses relectures, ses muffins délicieux, et lajoie de vivre qu’elle insuffle à notre couple.

• Raphaël Goetter, pour ses conseils avisés, ses jeux de mots inédits et sa confiancesereine dans l’aventure de notre agence web.

• Tous les membres passés et présents d’Alsacréations pour leur professionnalismeet la réjouissante ambiance qu’ils instaurent dans notre équipe, même après delongues journées.

• Christophe Mattera, pour son « coup de pouce » à l’époque où je n’étais qu’unpadawan, et Benoît Laurenti pour de multiples raisons.

HTML5_.book Page XII Friday, October 13, 2017 12:04 AM

Table des matières

CHAPITRE 1Une brève histoire du Webet de ses standards ....................... 1

Un successeur pour HTML 4 et XHTML 2Le rôle du W3C . . . . . . . . . . . . . . . . . . 15

Une maturation rigoureuse... . . . . . . . 16… mais peu véloce . . . . . . . . . . . . . . 16

Le rôle du WhatWG . . . . . . . . . . . . . . . 19Les fondements de l’évolution . . . . . . . . 20

Tout le monde sur la brèche . . . . . . . 21En quoi HTML 5 consiste-t-il réellement ? . . . . . . . . . . 21Différences depuis HTML 4.01 et XHTML 1.x . . . . . . . . . . . . . . . 23

HTML 5 = HTML + JavaScript + CSS ? 23Page web ou application web ? . . . . . . 24Pourquoi des standards pour le Web ? 25

CHAPITRE 2HTML en seconde langue ........... 27

La syntaxe HTML 5 . . . . . . . . . . . . . . . 29Rappel sur les balises . . . . . . . . . . . . 29Imbrications et types de contenu . . . . 30Structure générale d’un document HTML . . . . . . . . . . . . . . . . . . . . . 32Attributs . . . . . . . . . . . . . . . . . . . . 33Les commentaires . . . . . . . . . . . . . . 34

L’encodage des caractères . . . . . . . . . . . 35Les entités . . . . . . . . . . . . . . . . . . . 36

Le type MIME . . . . . . . . . . . . . . . . . . . 36Comment le navigateur détermine-t-il l’encodage des caractères et le type MIME ? . . . . . . . . . . . . . . . . . 38HTML 5 ou XHTML 5 ? . . . . . . . . . . . 39

Forme HTML . . . . . . . . . . . . . . . . 39Forme XHTML . . . . . . . . . . . . . . . 40Ce que vous savez sur XHTML est probablement faux . . . . . . . . . . . . 40Du vrai XHTML 5 . . . . . . . . . . . . . 41

La validation . . . . . . . . . . . . . . . . . . . . . 43Rappels sur les styles CSS . . . . . . . . . . . . 44Rappels sur JavaScript . . . . . . . . . . . . . . 47

Frameworks JavaScript . . . . . . . . . . . 48Où placer <script> ? . . . . . . . . . . . . . 49

Publier un site en ligne . . . . . . . . . . . . . . 50Choisir un hébergeur web . . . . . . . . . 50

« I believe I can touch the sky » : le cloud . . . . . . . . . . . . . . . . . . . 50

Utiliser un client FTP . . . . . . . . . . . . 51Choisir un langage serveur et un système de gestion de contenu . . . . . . . . . . . . 51

Le protocole HTTP . . . . . . . . . . . . . . . . 52Requêtes et en-têtes . . . . . . . . . . . . . 53

Bonnes pratiques . . . . . . . . . . . . . . . . . . 56Organisation du code . . . . . . . . . . . . 57Organisation des fichiers . . . . . . . . . . 57Optimisations en vue des performances 57

Les sites de référence . . . . . . . . . . . . . . . 58

HTML5_.book Page XIII Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2004XIV

CHAPITRE 3Navigateurs et outils de conception............................... 63

Panorama des navigateurs web et moteurs de rendu . . . . . . . . . . . . . . . . 64

Mobiles et tablettes . . . . . . . . . . . . . 66Prise en charge de HTML 5 . . . . . . . 66

Bibliothèques et frameworks web . . . . . . 68Bibliothèques JavaScript . . . . . . . . . . 68

Modernizr . . . . . . . . . . . . . . . . 68html5shiv (ou html5shim) . . . . . . 70Polyfills . . . . . . . . . . . . . . . . . . 71

Frameworks HTML . . . . . . . . . . . . 72HTML5 Boilerplate . . . . . . . . . 72Bootstrap . . . . . . . . . . . . . . . . . 72Initializr . . . . . . . . . . . . . . . . . 73

Les bons outils pour développer . . . . . . . 74Pour éditer du code . . . . . . . . . . . . . 74Pour tester et déboguer . . . . . . . . . . . 77

Virtualisez ! . . . . . . . . . . . . . . . 78Mozilla Firefox . . . . . . . . . . . . . 78Google Chrome . . . . . . . . . . . . . 79Safari . . . . . . . . . . . . . . . . . . . 79Opera . . . . . . . . . . . . . . . . . . . 80Internet Explorer et Edge . . . . . . 80

Outils de développement et consoles JavaScript . . . . . . . . . . . . . . . . . . . . 80

Les pages about: . . . . . . . . . . . . . 81Performance front-end . . . . . . . . 82

Créer des applications web et mobiles . . . 84Web apps . . . . . . . . . . . . . . . . . . . 86

Applications web progressives . . . . 87Applications interceptant protocoles et contenus . . . . . . . . . . . . . . . . . . . 88

CHAPITRE 4Éléments et attributs HTML 5 .... 91

Modèles de contenu . . . . . . . . . . . . . . . 94Le doctype avant tout . . . . . . . . . . . . . . 95

Rappel des précédents doctypes . . . . . 96Éléments racines et méta-informations . . 97

<html> . . . . . . . . . . . . . . . . . . . . . . 97manifest . . . . . . . . . . . . . . . . . . 98

<head> . . . . . . . . . . . . . . . . . . . . . . 98<title> . . . . . . . . . . . . . . . . . . . . . 101<meta> . . . . . . . . . . . . . . . . . . . . . 102

<meta name> . . . . . . . . . . . . . . 102<meta charset> . . . . . . . . . . . . . 103<meta http-equiv> . . . . . . . . . . 104

<link> . . . . . . . . . . . . . . . . . . . . . 105<style> . . . . . . . . . . . . . . . . . . . . . 106

scoped . . . . . . . . . . . . . . . . . . 108media . . . . . . . . . . . . . . . . . . 109

<base> . . . . . . . . . . . . . . . . . . . . . 109href . . . . . . . . . . . . . . . . . . . . 110target . . . . . . . . . . . . . . . . . . . 110

<body> . . . . . . . . . . . . . . . . . . . . . 110Groupement . . . . . . . . . . . . . . . . . . . . 111

<div> . . . . . . . . . . . . . . . . . . . . . . 112<span> . . . . . . . . . . . . . . . . . . . . . 113

Liens . . . . . . . . . . . . . . . . . . . . . . . . . 114<a> . . . . . . . . . . . . . . . . . . . . . . . 114

href et hreflang . . . . . . . . . . . . . 115rel . . . . . . . . . . . . . . . . . . . . . 117id et ancres . . . . . . . . . . . . . . . 117target . . . . . . . . . . . . . . . . . . . 118download . . . . . . . . . . . . . . . . 118ping . . . . . . . . . . . . . . . . . . . 119Liens et blocs . . . . . . . . . . . . . . 119

Sections et titres . . . . . . . . . . . . . . . . . . 120Le cas Internet Explorer . . . . . . . 125Le cas d’Internet Explorer sans JavaScript . . . . . . . . . . . . 128Le cas Internet Explorer sans JavaScript, bis . . . . . . . . . . 129

<section> . . . . . . . . . . . . . . . . . . . 130<main> . . . . . . . . . . . . . . . . . . . . . 132<article> . . . . . . . . . . . . . . . . . . . . 133<header> . . . . . . . . . . . . . . . . . . . 134<footer> . . . . . . . . . . . . . . . . . . . . 136<nav> . . . . . . . . . . . . . . . . . . . . . 137<aside> . . . . . . . . . . . . . . . . . . . . 138

HTML5_.book Page XIV Friday, October 13, 2017 12:04 AM

Table des matières

© Groupe Eyrolles, 2004 XV

<address> . . . . . . . . . . . . . . . . . . . 140<h1> à <h6> . . . . . . . . . . . . . . . . . 141

Hiérarchie des éléments de sections et outline . . . . . . . . . . . . . . . . 143

<hgroup> . . . . . . . . . . . . . . . . . . 148Listes . . . . . . . . . . . . . . . . . . . . . . . . . 149

<ol> . . . . . . . . . . . . . . . . . . . . . . 149<ul> . . . . . . . . . . . . . . . . . . . . . . 151<li> . . . . . . . . . . . . . . . . . . . . . . . 152<dl> . . . . . . . . . . . . . . . . . . . . . . 153<dt> . . . . . . . . . . . . . . . . . . . . . . 154<dd> . . . . . . . . . . . . . . . . . . . . . . 155

Texte et sémantique . . . . . . . . . . . . . . 155<p> . . . . . . . . . . . . . . . . . . . . . . . 155<blockquote> . . . . . . . . . . . . . . . . 156<q> . . . . . . . . . . . . . . . . . . . . . . . 158

cite . . . . . . . . . . . . . . . . . . . . 159<cite> . . . . . . . . . . . . . . . . . . . . . 159<strong> . . . . . . . . . . . . . . . . . . . 160<em> . . . . . . . . . . . . . . . . . . . . . 161<b> . . . . . . . . . . . . . . . . . . . . . . . 161<i> . . . . . . . . . . . . . . . . . . . . . . . 163<u> . . . . . . . . . . . . . . . . . . . . . . . 163<small> . . . . . . . . . . . . . . . . . . . . 164<dfn> . . . . . . . . . . . . . . . . . . . . . 165<abbr> . . . . . . . . . . . . . . . . . . . . . 165<code> . . . . . . . . . . . . . . . . . . . . 166<var> . . . . . . . . . . . . . . . . . . . . . . 167<kbd> . . . . . . . . . . . . . . . . . . . . . 168<samp> . . . . . . . . . . . . . . . . . . . . 169<sub> . . . . . . . . . . . . . . . . . . . . . 169<sup> . . . . . . . . . . . . . . . . . . . . . 170<time> . . . . . . . . . . . . . . . . . . . . 170

datetime . . . . . . . . . . . . . . . . 171pubdate . . . . . . . . . . . . . . . . . 173

<data> . . . . . . . . . . . . . . . . . . . . 174<hr> . . . . . . . . . . . . . . . . . . . . . . 175<br> . . . . . . . . . . . . . . . . . . . . . . 176<wbr> . . . . . . . . . . . . . . . . . . . . . 177<ins> . . . . . . . . . . . . . . . . . . . . . . 178<del> . . . . . . . . . . . . . . . . . . . . . . 179<s> . . . . . . . . . . . . . . . . . . . . . . . 181

<pre> . . . . . . . . . . . . . . . . . . . . . . 182<mark> . . . . . . . . . . . . . . . . . . . . 183<ruby> . . . . . . . . . . . . . . . . . . . . . 184<rt> . . . . . . . . . . . . . . . . . . . . . . . 185<rp> . . . . . . . . . . . . . . . . . . . . . . 186<rb> . . . . . . . . . . . . . . . . . . . . . . 187<rtc> . . . . . . . . . . . . . . . . . . . . . . 187<bdo> . . . . . . . . . . . . . . . . . . . . . 187<bdi> . . . . . . . . . . . . . . . . . . . . . 188

Contenu embarqué . . . . . . . . . . . . . . . 188<img> . . . . . . . . . . . . . . . . . . . . . 188

Formats de compression d’images . 189Bref comparatif visuel . . . . . . . . 191Usage des images en HTML . . . 192src . . . . . . . . . . . . . . . . . . . . . 194alt . . . . . . . . . . . . . . . . . . . . . 194width, height . . . . . . . . . . . . . . 196usemap . . . . . . . . . . . . . . . . . . 197ismap . . . . . . . . . . . . . . . . . . . 197Liens sur images . . . . . . . . . . . . 199Positionnement des images . . . . . 200Images à résolution adaptative (responsive images) . . . . . . . . . 200

<map> . . . . . . . . . . . . . . . . . . . . . 202<area> . . . . . . . . . . . . . . . . . . . . . 204<figure> . . . . . . . . . . . . . . . . . . . . 206<figcaption> . . . . . . . . . . . . . . . . . 210<iframe> . . . . . . . . . . . . . . . . . . . . 210

src . . . . . . . . . . . . . . . . . . . . . 211width, height . . . . . . . . . . . . . . 211sandbox . . . . . . . . . . . . . . . . 213srcdoc . . . . . . . . . . . . . . . . . . 214seamless . . . . . . . . . . . . . . . . . 214

<embed> . . . . . . . . . . . . . . . . . . . 215Imbrications avec object et éléments médias . . . . . . . . . . 217

<object> . . . . . . . . . . . . . . . . . . . . 218typemustmatch . . . . . . . . . . . . 219Le cas de Flash . . . . . . . . . . . . . 220

<param> . . . . . . . . . . . . . . . . . . . . 221<video> . . . . . . . . . . . . . . . . . . . . 222<audio> . . . . . . . . . . . . . . . . . . . . 222

HTML5_.book Page XV Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2004XVI

<source> . . . . . . . . . . . . . . . . . . . 223<track> . . . . . . . . . . . . . . . . . . . . 223<canvas> . . . . . . . . . . . . . . . . . . . 223

Données tabulaires . . . . . . . . . . . . . . . 224<table> . . . . . . . . . . . . . . . . . . . . 224<thead> . . . . . . . . . . . . . . . . . . . . 227<tfoot> . . . . . . . . . . . . . . . . . . . . 227<tbody> . . . . . . . . . . . . . . . . . . . . 228<tr> . . . . . . . . . . . . . . . . . . . . . . . 230<td> . . . . . . . . . . . . . . . . . . . . . . 231<th> . . . . . . . . . . . . . . . . . . . . . . 233<caption> . . . . . . . . . . . . . . . . . . . 234<colgroup> . . . . . . . . . . . . . . . . . . 235<col> . . . . . . . . . . . . . . . . . . . . . . 237

Éléments interactifs . . . . . . . . . . . . . . 239<dialog> . . . . . . . . . . . . . . . . . . . 239<menu> . . . . . . . . . . . . . . . . . . . . 243

type . . . . . . . . . . . . . . . . . . . . 243label . . . . . . . . . . . . . . . . . . . 244

<menuitem> . . . . . . . . . . . . . . . . 245<details> . . . . . . . . . . . . . . . . . . . 247<summary> . . . . . . . . . . . . . . . . . 250

Scripting . . . . . . . . . . . . . . . . . . . . . . 251<script> . . . . . . . . . . . . . . . . . . . . 251

Script externe à la page HTML . 253Exécution asynchrone . . . . . . . . 253Exécution différée . . . . . . . . . . 254crossorigin . . . . . . . . . . . . . . . 254nonce . . . . . . . . . . . . . . . . . . . 254integrity . . . . . . . . . . . . . . . . . 255Type module . . . . . . . . . . . . . . 255

<noscript> . . . . . . . . . . . . . . . . . . 256<template> . . . . . . . . . . . . . . . . . . 257

Shadow DOM, Custom Elements 259Attributs HTML globaux . . . . . . . . . . 261

accesskey . . . . . . . . . . . . . . . . . . . 262class . . . . . . . . . . . . . . . . . . . . . . 263contextmenu . . . . . . . . . . . . . . . . 265contenteditable . . . . . . . . . . . . . . 266data- . . . . . . . . . . . . . . . . . . . . . 267dir . . . . . . . . . . . . . . . . . . . . . . . 269

draggable . . . . . . . . . . . . . . . . . . 269dropzone . . . . . . . . . . . . . . . . . . . 270hidden . . . . . . . . . . . . . . . . . . . . 270id . . . . . . . . . . . . . . . . . . . . . . . . 271itemid, itemref, itemscope, itemtype, itemprop . . . . . . . . . . . . . . . . . . . 272lang . . . . . . . . . . . . . . . . . . . . . . . 272tabindex . . . . . . . . . . . . . . . . . . . . 273translate . . . . . . . . . . . . . . . . . . . . 275title . . . . . . . . . . . . . . . . . . . . . . . 276spellcheck . . . . . . . . . . . . . . . . . . 277style . . . . . . . . . . . . . . . . . . . . . . . 277

Relations des liens . . . . . . . . . . . . . . . . 278Quelques relations notables . . . . . . . 280

nofollow . . . . . . . . . . . . . . . . . 280noreferrer . . . . . . . . . . . . . . . 281prefetch, dns-prefetch, prerender, preload . . . . . . . . . . . . . . . . . 282prev, next . . . . . . . . . . . . . . . . 284

Attributs événements . . . . . . . . . . . . . . 284

CHAPITRE 5Les formulaires (Web Forms) .. 289

<input> et ses variantes . . . . . . . . . . . . . 291text . . . . . . . . . . . . . . . . . . . . . . . 294password . . . . . . . . . . . . . . . . . . . 294tel . . . . . . . . . . . . . . . . . . . . . . . . 295url . . . . . . . . . . . . . . . . . . . . . . . . 296email . . . . . . . . . . . . . . . . . . . . . . 297search . . . . . . . . . . . . . . . . . . . . . 299hidden . . . . . . . . . . . . . . . . . . . . . 300radio . . . . . . . . . . . . . . . . . . . . . . 300checkbox . . . . . . . . . . . . . . . . . . . 301button . . . . . . . . . . . . . . . . . . . . . 303reset . . . . . . . . . . . . . . . . . . . . . . . 303submit . . . . . . . . . . . . . . . . . . . . . 304image . . . . . . . . . . . . . . . . . . . . . . 304file . . . . . . . . . . . . . . . . . . . . . . . . 305

Camera API et périphériques mobiles . . . . . . . . . . . . . . . . . . 308

date . . . . . . . . . . . . . . . . . . . . . . 308

HTML5_.book Page XVI Friday, October 13, 2017 12:04 AM

Table des matières

© Groupe Eyrolles, 2004 XVII

time . . . . . . . . . . . . . . . . . . . . . . 311datetime-local . . . . . . . . . . . . . . . 312month . . . . . . . . . . . . . . . . . . . . 314week . . . . . . . . . . . . . . . . . . . . . 315number . . . . . . . . . . . . . . . . . . . . 317range . . . . . . . . . . . . . . . . . . . . . 318color . . . . . . . . . . . . . . . . . . . . . . 319

Autres éléments de formulaires . . . . . . . 320<textarea> . . . . . . . . . . . . . . . . . . 320<select> . . . . . . . . . . . . . . . . . . . . 322<option> . . . . . . . . . . . . . . . . . . . 323<optgroup> . . . . . . . . . . . . . . . . . 324<datalist> . . . . . . . . . . . . . . . . . . 325<button> . . . . . . . . . . . . . . . . . . . 327<output> . . . . . . . . . . . . . . . . . . . 327<progress> . . . . . . . . . . . . . . . . . . 329<meter> . . . . . . . . . . . . . . . . . . . 332

Construction de formulaires . . . . . . . . . 334<form> . . . . . . . . . . . . . . . . . . . . 334

Validation des données . . . . . . . 335<fieldset> . . . . . . . . . . . . . . . . . . . 337<legend> . . . . . . . . . . . . . . . . . . . 338<label> . . . . . . . . . . . . . . . . . . . . 339

Attributs communs pour les éléments de formulaire . . . . . . . . . . . . . . . . . . . 341

Quelques nouveaux attributs HTML 5 . . . . . . . . . . . . . . . . . . 343

placeholder . . . . . . . . . . . . . . . 343autofocus . . . . . . . . . . . . . . . . 344autocomplete . . . . . . . . . . . . . 344required . . . . . . . . . . . . . . . . 347multiple . . . . . . . . . . . . . . . . 347dirname . . . . . . . . . . . . . . . . 347pattern . . . . . . . . . . . . . . . . . 348min, max, step . . . . . . . . . . . . 348minlength . . . . . . . . . . . . . . . 349inputmode . . . . . . . . . . . . . . . 349

Une touche de style . . . . . . . . . . . . . . . 350Un zeste de script . . . . . . . . . . . . . . . . 352Prise en charge . . . . . . . . . . . . . . . . . . 354

CHAPITRE 6Les microformats (Microdata) . 355

Les microformats et le Web sémantique . 356Les prémices . . . . . . . . . . . . . . . . . 358

Microdata à la rescousse . . . . . . . . . . . . 360Attributs globaux . . . . . . . . . . . . . . 361

itemscope . . . . . . . . . . . . . . . . . 361itemtype . . . . . . . . . . . . . . . . . 362Vocabulaires . . . . . . . . . . . . . . 362itemprop . . . . . . . . . . . . . . . . . 364itemid . . . . . . . . . . . . . . . . . . 366itemref . . . . . . . . . . . . . . . . . . 367

API DOM Microdata . . . . . . . . . . 367document.getItems() . . . . . . . . . 369itemType, itemRef, itemId . . . . . 370properties . . . . . . . . . . . . . . . . 370properties.namedItem() . . . . . . . 370itemValue . . . . . . . . . . . . . . . . 371

JSON-LD . . . . . . . . . . . . . . . . . . . . . 372Données structurées et indexées . . . . . . 374

CHAPITRE 7Audio et vidéo ........................... 377

Conteneurs, codecs, licences et support . 380Vidéo . . . . . . . . . . . . . . . . . . . . . . 382

Theora . . . . . . . . . . . . . . . . . . 382WebM . . . . . . . . . . . . . . . . . . 382H.264 . . . . . . . . . . . . . . . . . . 383

Audio . . . . . . . . . . . . . . . . . . . . . 384MP3 (Mpeg-1 Audio Layer 3) . . 384AAC (Advanced Audio Coding) . 385FLAC (Free Lossless Audio Codec) . . . . . . . . . . . . . . 385Vorbis . . . . . . . . . . . . . . . . . . 385Opus . . . . . . . . . . . . . . . . . . . 385

Les balises médias . . . . . . . . . . . . . . . . 387<audio> . . . . . . . . . . . . . . . . . . . . . . . . 389<video> . . . . . . . . . . . . . . . . . . . . . . . . 389<source> . . . . . . . . . . . . . . . . . . . . . . . 390<track> . . . . . . . . . . . . . . . . . . . . . . . . 391

Attributs pour <track> . . . . . . . . . . 393

HTML5_.book Page XVII Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2004XVIII

Attributs pour <audio> et <video> . . . . . 395src . . . . . . . . . . . . . . . . . . . . . . . 395width et height . . . . . . . . . . . . . . . 395controls . . . . . . . . . . . . . . . . . . . . 396poster . . . . . . . . . . . . . . . . . . . . . 396autoplay . . . . . . . . . . . . . . . . . . . . 396preload . . . . . . . . . . . . . . . . . . . . 396loop . . . . . . . . . . . . . . . . . . . . . . 397mediagroup . . . . . . . . . . . . . . . . . 397

Interface de contrôle et événements . . . 397Contrôler la lecture . . . . . . . . . . 399Surveiller les événements . . . . . . 400

Créer une interface graphique personnalisée . . . . . . . . . . . . . . . . 402

Détecter les erreurs de lecture . . . 408Détection du support avec canPlayType() . . . . . . . . . . . . 409

Solution de repli avec Flash . . . . 410Media Fragments . . . . . . . . . . . . . 412

Plein écran (fullscreen) . . . . . . . . . . . . . 412Web Audio API . . . . . . . . . . . . 415Encrypted Media Extensions . . . 416Media Source Extensions . . . . . 417MediaCapture et WebRTC . . . . 418Presentation et Speech API . . . . 418

Librairies et lecteurs . . . . . . . . . . . . . . 419

CHAPITRE 8Dessin avec Canvas ................... 421

L’élément <canvas> . . . . . . . . . . . . . . . 423Base de départ et contexte graphique 424Coordonnées . . . . . . . . . . . . . . . . 424

Formes géométriques . . . . . . . . . . . . . 426Chemins . . . . . . . . . . . . . . . . . . . . . . 428

beginPath() et closePath() . . . . . . . . 429moveTo() et lineTo() . . . . . . . . . . . 430fill() et stroke() . . . . . . . . . . . . . . . 431rect() . . . . . . . . . . . . . . . . . . . . . . 432arcTo() . . . . . . . . . . . . . . . . . . . . 432arc() . . . . . . . . . . . . . . . . . . . . . . 433bezierCurveTo() . . . . . . . . . . . . . . 434

quadraticCurveTo() . . . . . . . . . . . . 435Path2D . . . . . . . . . . . . . . . . . . . . 436

Styles de traits, remplissages et couleurs . 437Dégradés . . . . . . . . . . . . . . . . . . . . . . 439Transformations et états du contexte . . . 441

save() et restore() . . . . . . . . . . . . . . 443Images . . . . . . . . . . . . . . . . . . . . . . . . 445Pixels . . . . . . . . . . . . . . . . . . . . . . . . . 447

Créer des pixels . . . . . . . . . . . . . . . 449Lire des pixels . . . . . . . . . . . . . . . . 450Modifier des pixels . . . . . . . . . . . . . 452

Motifs et sprites . . . . . . . . . . . . . . . . . . 455Texte . . . . . . . . . . . . . . . . . . . . . . . . . 460Ombrages . . . . . . . . . . . . . . . . . . . . . . 462Transparence, compositions et masques . 464

Transparence générale . . . . . . . . . . 464Compositions . . . . . . . . . . . . . . . . 465Masques . . . . . . . . . . . . . . . . . . . . 467

Contrôle clavier et souris . . . . . . . . . . . 471Souris . . . . . . . . . . . . . . . . . . . . . . 471Clavier . . . . . . . . . . . . . . . . . . . . . 474

Animation et jeux . . . . . . . . . . . . . . . . 477requestAnimationFrame . . . . . . . . . 478Jeux . . . . . . . . . . . . . . . . . . . . . . . 480Gamepad API . . . . . . . . . . . . . . . . 481Pointer Lock . . . . . . . . . . . . . . . . . 487

Performance . . . . . . . . . . . . . . . . . . . . 492L’API Page Visibility . . . . . . . . . . . . . . 493Plein écran . . . . . . . . . . . . . . . . . . . . . 496

Adapter la taille du canevas à la fenêtre . . . . . . . . . . . . . . . . . . 496

Vidéo et audio . . . . . . . . . . . . . . . . . . . 497Prise en charge . . . . . . . . . . . . . . . . . . . 499Bibliothèques . . . . . . . . . . . . . . . . . . . 500Et la 3D ? WebGL ! . . . . . . . . . . . . . . . 501Et le graphisme vectoriel ? SVG ! . . . . . . 504

Syntaxe . . . . . . . . . . . . . . . . . . . . 504Création au format SVG . . . . . . . . . 507Inclusion HTML . . . . . . . . . . . . . 508

Accessibilité . . . . . . . . . . . . . . . 509Utiliser SVG dans une page web . . . . 509

HTML5_.book Page XVIII Friday, October 13, 2017 12:04 AM

Table des matières

© Groupe Eyrolles, 2004 XIX

Avec <object> . . . . . . . . . . . . . 509Avec <embed> . . . . . . . . . . . . . 509Avec <iframe> . . . . . . . . . . . . 510Avec <img> . . . . . . . . . . . . . . 510Avec CSS . . . . . . . . . . . . . . . . 510SVG inline . . . . . . . . . . . . . . . 511Viewbox et étirement . . . . . . . . 513

Implémentation . . . . . . . . . . . . . . 514Frameworks SVG . . . . . . . . . . . . . 514

CHAPITRE 9Géolocalisation.......................... 517

Principe . . . . . . . . . . . . . . . . . . . . . . . 519Les mains dans le code . . . . . . . . . . . . . 521

Déclencher la localisation . . . . . . . . 521Travailler avec la position et les coordonnées . . . . . . . . . . . . . 522Gestion des erreurs . . . . . . . . . . . . 524Options supplémentaires . . . . . . . . 525Utiliser une carte . . . . . . . . . . . . . . 527

CHAPITRE 10Interactions avec les fichiers (File API) ..................................... 531

Principe . . . . . . . . . . . . . . . . . . . . . . . 532Fonctionnement . . . . . . . . . . . . . . . . . 533

Événement onchange . . . . . . . . . . 535Recueillir les informations des fichiers sélectionnés . . . . . . . . . 536

Lire des fichiers avec FileReader . . . . . . 537Utiliser Canvas . . . . . . . . . . . . . . . 541CreateObjectURL . . . . . . . . . . . . 543

Upload simple avec PHP . . . . . . . . . . . 543Upload avec XMLHttpRequest 2 . . . . . 546

FormData . . . . . . . . . . . . . . . . . . 547Drag’n Drop . . . . . . . . . . . . . . . . . . . 551

CHAPITRE 11Gestion du glisser-déposer (Drag’n Drop)............................. 553

Principe . . . . . . . . . . . . . . . . . . . . . . . 555

Événements et attributs mis en œuvre . . 555Glisser... . . . . . . . . . . . . . . . . . . . . . . . 557

L’attribut draggable . . . . . . . . . . . . 557Un zeste de CSS . . . . . . . . . . . . . . 557

Déposer ! . . . . . . . . . . . . . . . . . . . . . . 560L’attribut dropzone . . . . . . . . . . . . 560Les événements dragenter et dragleave . . . . . . . . . . . . . . . . . . 562L’événement dragover . . . . . . . . . . . 562

L’interface DataTransfer . . . . . . . . . . . 564L’événement dragstart . . . . . . . . . . . 565

effectAllowed et dropEffect . . . . . 565Données transportées par setData() . . 566L’événement drop et getData() . . . . . 567L’événement dragend . . . . . . . . . . . 569Aller plus loin . . . . . . . . . . . . . . . . 570Script complet . . . . . . . . . . . . . . . . 570

Glisser-déposer de fichiers . . . . . . . . . . 571Dépôt depuis le système (drag-in) . . . 572En symbiose avec FileReader et Data URI . . . . . . . . . . . . . . . . . 573Déposer des éléments hors du navigateur (drag-out) . . . . . . . . . 577

Bibliothèques JavaScript . . . . . . . . . . . . 579

CHAPITRE 12Événements envoyés par le serveur (Server-Sent Events) ... 581

Push-toi, j’arrive . . . . . . . . . . . . . . . . . 582Principe général . . . . . . . . . . . . . . . 583

Sous le capot . . . . . . . . . . . . . . . . . . . . 584Côté client (navigateur) . . . . . . . . . . 584

Propriétés et méthodes . . . . . . . . 585Côté serveur . . . . . . . . . . . . . . . . . 585

Mise en place d’un flux continu . . 586Syntaxe des messages source . . . . . . 591

id . . . . . . . . . . . . . . . . . . . . . 594event . . . . . . . . . . . . . . . . . . . 596retry . . . . . . . . . . . . . . . . . . . . 597Utiliser JSON . . . . . . . . . . . . . 598

Prise en charge . . . . . . . . . . . . . . . . . . 599

HTML5_.book Page XIX Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2004XX

CHAPITRE 13Échange d’informations entre documents (Web Messaging)... 601

Fonctionnement de postMessage . . . . . 603Surveiller les événements . . . . . . . . 607

Sécurité . . . . . . . . . . . . . . . . . . . . . . . 608Vérification de l’origine . . . . . . . . . 608Vérification du destinataire . . . . . . . 608Vérification du contenu . . . . . . . . . 609

Données transférées et JSON . . . . . . . . 609Source et réponse . . . . . . . . . . . . . . . . 611

CHAPITRE 14Communication en temps réel (Web Sockets)............................. 615

Un protocole commun . . . . . . . . . . . . . 619Pour démarrer, une poignée de mains (handshake) . . . . . . . . . . 620

Côté serveur . . . . . . . . . . . . . . . . . . . . 621Node.js et WebSocket . . . . . . . . . . 621

Installation . . . . . . . . . . . . . . 621Configuration . . . . . . . . . . . . . 622

Côté navigateur . . . . . . . . . . . . . . . . . 624Usage en console navigateur . . . . . . 625Usage en application HTML . . . . . 626Se connecter . . . . . . . . . . . . . . . . . 629Envoyer des données . . . . . . . . . . . 630Recevoir des messages . . . . . . . . . . 630Gérer les erreurs . . . . . . . . . . . . . . 631Fermer la connexion . . . . . . . . . . . 631

Aller plus loin . . . . . . . . . . . . . . . . . . . 633Écrire dans un fichier . . . . . . . . . . . 633

Prise en charge . . . . . . . . . . . . . . . . . . 635

CHAPITRE 15Stockage des données locales (Web Storage) ............................ 637

Deux espaces de stockage . . . . . . . . . . . 639Stockage de session . . . . . . . . . . . . 640Local Storage . . . . . . . . . . . . . . . . 640

L’interface Storage . . . . . . . . . . . . . . . . 640Stockage, lecture, suppression . . . . . . 641Sécurité et accès aux données . . . . . . 643Un compteur de visites avec localStorage . . . . . . . . . . . . . . 644Surveiller le dépassement de quota . . 645

Un soupçon de JSON . . . . . . . . . . . . . . 646Autres types de données . . . . . . . . . 648

Stocker sur un événement . . . . . . . . . . . 649Stockage à intervalles réguliers . . . . . 649Événements . . . . . . . . . . . . . . . . . 650

Prise en charge . . . . . . . . . . . . . . . . . . . 651

CHAPITRE 16Bases de données (Indexed Database et Web SQL Database).................. 653

L’aube d’IndexedDB . . . . . . . . . . . . . . 655Philosophie d’une base NoSQL . . . . 656Ouvrir une base et créer un catalogue . 659Gestion des versions . . . . . . . . . . . . 661Insérer des données dans une transaction . . . . . . . . . . . . . . . 662Afficher le contenu . . . . . . . . . . . . . 664Utiliser un index . . . . . . . . . . . . . . 666Effacer un catalogue ou une base . . . 668Perspectives . . . . . . . . . . . . . . . . . . 668Prise en charge . . . . . . . . . . . . . . . 669

Le crépuscule de l’API Web SQL Database . . . . . . . . . . . . . . . . . . 670

Philosophie . . . . . . . . . . . . . . . . . . 670Ouvrir une base . . . . . . . . . . . . . . . 671Initier une transaction . . . . . . . . . . . 671Créer une table . . . . . . . . . . . . . . . 672Insérer des données . . . . . . . . . . . . 672Exploiter les résultats . . . . . . . . . . . 673Perspectives . . . . . . . . . . . . . . . . . . 674

CHAPITRE 17Historique de navigation......... 675

Navigation dans l’historique . . . . . . . . . 677History . . . . . . . . . . . . . . . . . . . . . 677

HTML5_.book Page XX Friday, October 13, 2017 12:04 AM

Table des matières

© Groupe Eyrolles, 2004 XXI

Location . . . . . . . . . . . . . . . . . . . 678Modification dynamique de l’historique 679

pushState() . . . . . . . . . . . . . . . . . . 681replaceState() . . . . . . . . . . . . . . . . 682The king of popstate . . . . . . . . . . . 682

Simulation . . . . . . . . . . . . . . . . . . . . . 683Cas pratique . . . . . . . . . . . . . . . . . 684Réécriture d’adresse . . . . . . . . . . . . 690

Les ancres et l’événement hashchange . . 690Détection . . . . . . . . . . . . . . . . . . . . . . 691Prise en charge . . . . . . . . . . . . . . . . . . 692

CHAPITRE 18JavaScript en (multi)tâche de fond : les Web Workers et Service Workers .................... 693

Principe des Web Workers . . . . . . . . . 695Outils de développement . . . . . . . . 697

Fonctionnement des Web Workers . . . 698Initialisation . . . . . . . . . . . . . . . . . 698Communication . . . . . . . . . . . . . . 701Terminaison . . . . . . . . . . . . . . . . . 703Gestion des erreurs . . . . . . . . . . . . 703Contexte et limitations . . . . . . . . . . 704Fonctions complémentaires . . . . . . 704Blob à la rescousse . . . . . . . . . . . . . 705

Service Workers et navigation hors ligne 706Fonctionnement . . . . . . . . . . . . . . 707

Cycle de vie . . . . . . . . . . . . . . 708Enregistrement et installation . . 709Requêtes et réponses . . . . . . . . . 713

Fetch . . . . . . . . . . . . . . . . . . . . . 717Headers, Request, Response . . . . 719Chaînage des promesses . . . . . . . 722

Applications web . . . . . . . . . . . . . 723Prise en charge . . . . . . . . . . . . . . . . . . 724

CHAPITRE 19JavaScript, le DOM et l’API Selectors ....................... 725

Les bases de JavaScript . . . . . . . . . . . . 728

Insertion de script . . . . . . . . . . . . . 729Variables . . . . . . . . . . . . . . . . . . . 729Types simples . . . . . . . . . . . . . . . . 730

Objets . . . . . . . . . . . . . . . . . . 731Opérateurs . . . . . . . . . . . . . . . 733Fonctions . . . . . . . . . . . . . . . . 733Structures de contrôle . . . . . . . . . 734Boucles . . . . . . . . . . . . . . . . . . 734

Méthodes de sélection DOM . . . . . . . . 735getElementById() . . . . . . . . . . . . . 738getElementsByTagName() . . . . . . . 738getElementsByName() . . . . . . . . . . 738getElementsByClassName() . . . . . . 738querySelector() . . . . . . . . . . . . . . . 739querySelectorAll() . . . . . . . . . . . . . 739

Propriétés et méthodes DOM . . . . . . . . 739Manipulation DOM . . . . . . . . . . . . . . 740

createElement() . . . . . . . . . . . . . . . 740appendChild() . . . . . . . . . . . . . . . . 741removeChild() . . . . . . . . . . . . . . . . 741insertBefore() . . . . . . . . . . . . . . . . 741createTextNode() . . . . . . . . . . . . . . 741classList . . . . . . . . . . . . . . . . . . . . 741insertAdjacentHTML() . . . . . . . . . 742

Méthodes pour formulaires . . . . . . . . . . 742Gestionnaires d’événements . . . . . . . . . 743Autres fonctions utiles . . . . . . . . . . . . . 745

matchMedia() et Media Queries . . . . 745Prise en charge . . . . . . . . . . . . . . . . . . 746

Conclusion et perspectives ...... 747Quid des frameworks JavaScript et de Flash ? . . . . . . . . . . . . . . . . . . . . . 747Perspectives d’avenir . . . . . . . . . . . . . . 748

ANNEXE AFonctionnalités modifiées et obsolètes................................ 751

Différences au cours des évolutions de HTML 5 . . . . . . . . . . . . . . . . . . . . 751

HTML5_.book Page XXI Friday, October 13, 2017 12:04 AM

HTML 5 – Une référence pour le développeur web

© Groupe Eyrolles, 2004XXII

Différences HTML 5 par rapport à HTML 4 . . . . . . . . . . . . . . . . . . . . . 752Fonctionnalités obsolètes . . . . . . . . . . . 752Fonctionnalités obsolètes non conformes 752

Éléments . . . . . . . . . . . . . . . . . . . 752Attributs . . . . . . . . . . . . . . . . . . . 753

ANNEXE BFeuilles de styles CSS................ 755

Principe général . . . . . . . . . . . . . . . . . 757Sélecteurs . . . . . . . . . . . . . . . . . . . . . . 758Propriétés . . . . . . . . . . . . . . . . . . . . . . 759Pseudo-classes et pseudo-éléments . . . . 765Règles @ . . . . . . . . . . . . . . . . . . . . . . 766Media queries . . . . . . . . . . . . . . . . . . . 767Positionnement . . . . . . . . . . . . . . . . . 768

ANNEXE CAccessibilité et ARIA ................. 771

Qu’est-ce que l’accessibilité du Web ? . . 772HTML sémantique . . . . . . . . . . . . 775

WAI, WCAG et ARIA . . . . . . . . . . . 778Les rôles et propriétés de WAI-ARIA . 780

Rôles avec l’attribut role . . . . . . . . . 782Points de repère (landmark roles) 782Structure de document . . . . . . . 785Composants (widgets) . . . . . . . 786

Propriétés et états avec les attributs aria-* . . . . . . . . . . . . . 789

Globaux . . . . . . . . . . . . . . . . . 790Contrôles d’interface . . . . . . . . . 791

Cas pratiques . . . . . . . . . . . . . . . . 796aria-hidden . . . . . . . . . . . . . . 796role=presentation . . . . . . . . . . . 797aria-live . . . . . . . . . . . . . . . . 797Drag’n drop (glisser-déposer) . . . 799Relations . . . . . . . . . . . . . . . . 799

Valider et tester . . . . . . . . . . . . . . . 802

Index ........................................... 805

HTML5_.book Page XXII Friday, October 13, 2017 12:04 AM