HTML5: pour mieux présenter vos pages Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de HTML5: pour mieux présenter vos pages Web Niveau recommandé pour le cours de HTML5: pour mieux présenter vos pages Web Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz disponible pour ce cours

Page 1: Quoi de neuf en HTML5?

Toutes les pages

HTML5: pour mieux présenter vos pages Web

Il était une fois, HTML

Dans le cours consacré au langage HTML, nous avons vu que celui ci est un langage de description de pages Web. Il permet de définir le contenu et de présenter le document. Le langage HTML est structuré en balises qui peuvent ou non accueillir des attributs.

Dans le même cours, j'ai souligné que nous nous intéresserons à la syntaxe de base (celle de HTML4) afin de mieux comprendre comment ce célèbre langage fonctionne et interagit avec le navigateur.

Dans ce cours, nous allons voir un autre standard. Il s'agit de HTML5, la toute nouvelle version du langage HTML soutenue par W3C et qui a longtemps fait parler de lui avant sa finalisation (et même après). Cela veut-il dire que nous devons oublier ce que nous avons appris sur HTML? La réponse est non. En effet, vous allez voir qu'en principe HTML5 et HTML ne font qu'un. Mais HTML5 a apporté plus de fonctionnalités donc plus de possibilités.

Petite histoire de HTML5

Depuis la finalisation de HTML4 en 1997, aucune avancée technologique remarquable n'a marqué ce langage, si ce n'était la publication du standard XHTML (eXtensible HyperText Markup Language) qui est un langage de marquage fondé sur XML (mais qui utilise quasiment les mêmes balises que HTML).

Après plus de 10 ans de stagnation. Un groupe de travail externe au W3C a commencé le travail sur la version 5 de HTML, il s'agit de WHAT Working Group (WHATWG), soutenu par Mozilla, Google, Apple et Opera. W3C n'a donc plus le choix que de travailler sur HTML5 après avoir abandonné XHTML2.

HTML5 est destiné à devenir une révolution du Web. En effet il a proposé des innovations importantes telles que la création de nouvelles balises (dites sémantiques), la prise en charge du flux multimédia (audio et vidéo) sans que le navigateur ne sollicite le service des plugins, les animations 2D et 3D...

Nouveautés de HTML5

Vous allez voir durant ce cours qu'entre HTML et HTML5, il y a une grande ressemblance. D'ailleurs la grande majorité des balises de HTML reste valable. Cependant HTML5 a apporté plus de richesse fonctionnelle qu'on peut résumer dans ces points:
  • Nouveau conteneurs: HTML5 a innové de nouvelles balises (conteneurs) dites sémantiques. Ces balises ont un rendu identique à celui de la balise <div>, mais ils ont un sens que le navigateur et les outils de recherche et d'indexation connaissent. D'où le nom de Web sémantique (ou Web3.0).
  • Prise en charge du flux multimédia: HTML5 permet d'intégrer directement un contenu multimédia (audio, vidéo ou animation) sans que le navigateur n'aie besoin de plugin. Jusqu'ici, pour intégrer une vidéo par exemple, il fallait faire appel à la balise <object>. Cette balise invoque le plugin installé sur le navigateur et qui peut comprendre le type de flux intégré. Désormais, le navigateur peut déchiffrer un contenu multimédia d'une façon autonome.
  • De nouveaux champs de formulaire: HTML5 propose de nouveaux champs de formulaire de la famille <input> qui s'avèrent très utiles lors de leur saisie.
  • D'autres fonctionnalités qui mettent en valeur le contenu: Des fonctionnalités tel que glisser-déposer (drag & drop), accès aux périphériques tel que la webcam... on été également ajoutées.

Objectif du cours et prérequis

Durant ce cours nous allons essayer d'explorer l'environnement de HTML5 en découvrant les nouvelles balises sémantiques, la gestion des flux multimédia et, bien entendu, apprendre à écrire un document HTML5 proprement.

Il faut souligner que nous n'allons pas tout voir, car la syntaxe est tellement riche qu'il faut des chapitres et des chapitres pour tout survoler. Cependant, nous allons apprendre à présenter un document HTML5 avec les fonctionnalités les plus utilisées sur le Web.

Pour tirer profit de ce cours, il faut être initié au langage HTML (HTML4 bien entendu). Car ses balises sont en grande partie reprises par HTML5. Si vous n'avez pas de notions (même de base) en HTML4 je vous recommande vivement de commencer par là. Voici le lien du cours de HTML4 sur ce site.