HTML 5 Introduction

 

Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile.
Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années. Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte.

Sommaire :


L’HTML5 c’est quoi ?

L’HTML5 n’est pas…

L’HTML5 n’est pas un nouveau langage. On ne peut donc pas non plus commencer par “directement apprendre” l’HTML5, et enfin vous n’aurez pas à tout réapprendre.

L’HTML5 est…

L’HTML5 est une évolution de l’HTML 4.01 (et de l’XHTML 1.0), c’est à dire que tout ce que vous savez faire en HTML reste valide.
Cette évolution consiste en une multitude de nouvelles fonctionnalités qui ont été apportées au langage HTML ainsi qu’au Javascript.
Si vous savez faire de l’HTML “classique” vous devrez donc apprendre à manipuler ces nouvelles fonctionnalités.

Nous allons voir un aperçu de certaines de ces nouveautés apportées par l’HTML5, mais tout d’abord, commençons par nous intéresser aux gens qui travaillent dessus !

Le W3C et le WHATWG

Le W3C (World Wide Web Consortium) est l’organisation qui s’occupe de standardiser le web. Elle est constituée d’un ensemble de membres actifs qui réfléchissent à l’évolution des standards tels que l’HTML et le CSS. Ils discutent par exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de nouvelles balises qu’il serait intéressant d’ajouter au langage. Le W3C travaille donc à l’élaboration du standard qu’est “l’HTML5”.

Seulement voilà, le problème c’est qu’une telle responsabilité présente un inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est la création d’un groupe de rébellion au sein du W3C, nommé le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple. L’approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert et surtout a pour objectif d’accélérer la standardisation (ou du moins la mise en place de standards pour les navigateurs).

L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.

Voyons sans plus attendre un petit aperçu de ce que nous ont concocté ces gens d’un point de vue du code HTML.

Les nouveautés dans le code HTML

Un allégement du code

Tout d’abord, certaines balises ont été simplifiées afin d’alléger le code.
C’est le cas par exemple du Doctype (la première ligne indigeste que vous copiez/colliez en haut de chaque page HTML), de la balise <html>, de la balise <meta> de l’encodage des caractères, et des balises de feuilles de style et de script.

Alors qu’auparavant on pouvait avoir ce genre de code :

<--
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="design.css" />
  <script type=”text/javascript” src=script.js"></script>
</head>
<body>
</body>
</html>

En HTML5, ça nous donne :

1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="design.css" />
  <script src="script.js"></script>
</head>
-->

Plutôt sympathique n’est-ce pas ? De manière générale, on peut dire que l’HTML5 est beaucoup plus léger et laxiste sur l’écriture du code HTML. Un document HTML5 sera valide W3C même si vous écrivez vos balises en majuscules, ou si vous n’écrivez pas le / de fermeture d’une balise auto-fermante telle que <img />. La philosophie est donc à présent de laisser chacun adopter le style de code qu’il préfère. Ce choix est assez contestable mais il ne tient qu’à nous de conserver les bonnes pratiques adoptées grâce à l’XHTML1.0.

Les nouvelles balises sémantiques

L’HTML5 introduit également un ensemble de nouvelles balises afin de donner plus de sémantique (de sens) à nos pages. Par exemple, au lieu d’utiliser une <div> avec un id=”header”, nous pouvons utiliser tout simplement la balise <header>. Parmi ces balises sémantiques on trouve entre autres

Ces noms n’ont pas été choisis au hasard. Google a fourni au W3C les chiffres de la fréquence d’utilisation de tous les id utilisés sur les sites indexés par le moteur de recherche, et ceux-ci font partie de ceux qui sont les plus employés.

Les balises multimédia

<video>
Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré à votre page et natif au navigateur !
 

<audio>
Cette balise est l’équivalent de la balise video mais pour l’audio. En 3 lignes de code vous avez un lecteur MP3 !
Nous pouvons d’ailleurs voir sur l’image ci-dessous que chaque navigateur utilise un design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.
Lecteurs audio HTML5
 

<canvas>
Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit d’une surface sur laquelle il est possible de tracer des formes et de les animer. En résumé… C’est dans cette zone que sont réalisées des animations ou des jeux.
Canvas HTML5
Les possibilités offertes par la balise canvas sont immenses, et couplé avec le standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants au sein même du navigateur.
Un projet de portage du jeu Quake 2 a été réalisé par 3 employés de Google afin de démontrer le potentiel de cette technique :
 

Des formulaires améliorés

Enfin parmi les nouveautés côté HTML on peut également citer une évolution des formulaires.
Il est possible de spécifier de toutes nouvelles valeurs dans le champ “type” des balises input, afin d’indiquer le type de contenu du champ. C’est particulièrement utile afin d’effectuer une première validation du contenu avant l’envoi des informations au serveur.
C’est également très important pour la navigation depuis un smartphone, qui affichera un clavier adapté selon le type de contenu.

Par exemple, pour le champ input suivant :

1
<input type="tel" />

On aura le clavier suivant sur un iPhone :

Clavier iPhone HTML5 form tel

Ou sur un Android :

Pour le champ suivant :

1
<input type="url" />

Un iPhone affichera ce clavier adapté aux URLs :

Clavier iPhone HTML5 form url

Il existe bien d’autres nouveautés pour le code HTML, mais je pense que c’est suffisant pour une première introduction. Passons maintenant au Javascript.

Les nouveautés dans le code Javascript

Il est loin le temps où le Javascript était une sale bête noire détestée… L’apogée de l’AJAX et du web 2.0 ainsi que des bibliothèques Javascript telles que jQuery a rendu son utilisation bien plus agréable et efficace. De plus, de moins en moins d’utilisateurs désactivent le Javascript et il est même souvent impossible de le désactiver sur certains navigateurs.
C’est dans ce contexte que le Javascript a été propulsé vers l’avant avec l’HTML5. L’API Javascript (les objets et les méthodes utilisables) a été généreusement enrichi avec de nouvelles fonctionnalités. En voici quelques unes :

Le Local Storage

Le Local Storage est une manière élégante de stocker dans le navigateur des informations facilement. Par exemple, pour écrire puis lire une valeur dans le Local Storage il suffit d’écrire :

1
2
localStorage.setItem("name", "John");    
alert(localStorage.getItem("name"));

La variable sera toujours disponible si l’utilisateur ferme puis ré-ouvre son navigateur. L’utilisation du Local Storage est proche de celle des cookies, mais contrairement aux cookies, ces informations ne sont jamais communiquées au serveur. Elles sont ainsi particulièrement adaptées aux applications offline.

La géolocalisation

Il ne s’agit pas strictement d’une spécification de l’HTML5, mais elle y est souvent associée.
Il est possible grâce à l’API de géolocalisation d’accéder aux coordonnées de l’utilisateur si celui-ci a accepté de partager sa position via le bandeau s’affichant en haut de page :

Barre d'autorisation de partage de la géolocalisation en HTML5

On peut alors très facilement disposer d’informations telles que :

Le Drag and Drop

Il est également possible d’effectuer des “glisser-déposer” dans une page web. Cette fonctionnalité n’aura donc plus besoin d’être visuellement émulée par des bibliothèques Javascript tierces mais sera présente nativement dans l’API Javascript. Par exemple, si l’on souhaite pouvoir déplacer un élément d’une liste, il suffit de déclarer cet élément avec l’attribut “draggable” à true :

1
<li draggable="true">Element de ma liste</li>

Définir une zone potentielle de destination :

1
<div ondrop="drop(this, event)">

Puis ensuite effectuer le traitement Javascript correspondant :

1
2
3
function drop(target, e) {
  // Traitement
}

Bien entendu, l’utilisation de bibliothèques telles que jQuery est préférable à l’injection de code Javascript dans l’HTML.

Les Web Sockets

Il s’agit là d’un nouveau protocole ambitieux de communication avec le serveur. Un navigateur ne peut habituellement qu’effectuer des requêtes au serveur puis recevoir sa réponse. C’est une communication unidirectionnelle (dite par canal simplex). Les Web Sockets apportent la communication bi-directionnelle (dite full-duplex) entre le client et le serveur.
 

L’HTML5 ça sort quand ?

Haha, si on s’en tenait à attendre la date de “sortie officielle” correspondant à la recommandation du W3C, nous aurions tous des cheveux blancs avant de nous y mettre !

L’HTML5 n’est pas un “gros pack” avec une date de sortie. Il s’agit d’une multitude de petits modules étant élaborés et développés séparément. Par conséquent, certains sont déjà “sortis” et d’autres ne le sont pas encore.

De la même manière que pour tout ce que l’on utilise déjà sans se poser de questions avec l’HTML habituel, les nouveautés de l’HTML5 sont situées tout simplement… dans les navigateurs des visiteurs de votre site.

Une affaire de navigateur

Les standards du web évoluent constamment, grâce au W3C et au WHATWG. Mais rien ne sert d’élaborer des standards si les navigateurs n’implémentent pas ces standards.

Prenons un exemple. Si vous faites du CSS, vous savez que la couleur rouge correspond à la valeur hexadécimale #FF0000. Imaginons que le W3C décide alors de totalement changer son système de notation hexadécimale pour les couleurs et que le rouge s’écrive maintenant #FF#00#00. Que se passerait-il ?

On a donc une phase de transition sensible qui se déroule entre l’implémentation de la fonctionnalité par les navigateurs et son adoption par les développeurs.

L’HTML5 étant constitué de nombreux petits modules, certains sont déjà assez largement implémentés par les navigateurs pour être utilisés sans crainte par les développeurs.
Pour les autres, il suffit de prévoir une solution alternative au cas où le visiteur utilise un ancien navigateur.

Dans le cas de notre exemple avec la couleur rouge, si un développeur souhaite utiliser la nouvelle notation, il peut utiliser les 2 notations conjointement de manière à ce que tous les navigateurs, modernes ou anciens, l’affichent correctement. C’est typiquement le genre de raisonnement qu’il faut adopter si l’on veut passer à l’HTML5.

Tous les navigateurs modernes (Firefox, Chrome, Safari, Opera, ainsi que les navigateurs Android et iPhone / iPad) implémentent de nombreuses fonctionnalités de l’HTML5.

Utiliser l’HTML5 dès maintenant

Donc au final on attend la sortie d’Internet Explorer 9 ? On attend que plus personne n’utilise IE6, IE7 et IE8 ? On attend la recommandation du W3C ?

Alors là je vous demande d’ouvrir bien grand les yeux et de vous entrer ça dans la tête :

On peut utiliser l’HTML5 dès maintenant !

Et j’en rajoute même une couche : Ce n’est pas une blague, on peut vraiment l’utiliser aujourd’hui !

Si vous ne me croyez pas, jetez donc un oeil aux Doctypes de sites comme Youtube, Google, Apple, ou Gmail… Ou regardez simplement le code source de ce site ! L’HTML5 arrive doucement mais sûrement. Donc autant s’y former le plus tôt possible, pour avoir une longueur d’avance.

Vous qui lisez actuellement ces lignes, sachez que le plus dur est fait. Vous avez beaucoup de chance car nous avons atteint un stade de maturité suffisant pour pouvoir utiliser l’HTML5 dans de vrais projets. De plus, les nouveautés de l’HTML5 sont toutes indépendantes, et sont pour beaucoup d’entre-elles des améliorations non-critiques, qui ne présentent aucun risque à être utilisées en production.

Bref, je vous demande de me croire sur parole, l’HTML5 ce n’est pas le futur, c’est le présent.

Et à vrai dire ça a déjà commencé depuis quelques temps donc il est grand temps de vous y mettre !

 

… Et le CSS alors ?

Le CSS3 correspond à un ensemble de nouveautés sur les feuilles de style. Mais attention, que ce soit bien clair : le CSS3 n’est pas forcément lié à l’HTML5 ! On associe facilement et abusivement les deux car on en entend parler à la même période, et que les navigateurs les implémentent en même temps, mais chacun fonctionne indépendamment de l’autre.

Comprendre : On peut styliser une balise <header> avec du code CSS2.1 et styliser une balise <div> avec du code CSS3.

 

TESTEZ votre navigateur préféré

Pour connaitre quel niveau d'implémentation du HTML 5 supporte actuellement votre navigateur, CLIQUEZ ICI  tout simplement.

 

Merci d’avoir lu jusqu’ici, j’espère vous avoir donné envie de vous plonger au coeur de cette nouvelle technologie.

A bientôt !

   d'après Jonathan Verrecchia  © 2012