HTML 5, une introduction - Flash informatique
5
31 JANVIER 2012 - N°1
Analyse
HTML 5, une introduction
Laurent.Boatto@epfl.ch, EPFL – Domaine IT, développeur d'applications Web
HTML5 is the next revision of HTML, the language
for creating Web pages. It is still under develop-
ment, but you will discover in this article the fea-
tures you can use today while keeping compatibility
with older browsers.
HTML 5 est la prochaine révision majeure d’HTML, le
célèbre langage permettant de créer des pages Web.
Il est à l’heure actuelle encore en cours de déve-
loppement, et son support sur les différents navi-
gateurs n’est de loin pas complet. Nous allons ce-
pendant voir dans cet article les éléments que vous
pouvez utiliser dès aujourd’hui tout en gardant une
compatibilité avec les anciens navigateurs.
Doctype et autre simplifications
Tout fichier HTML se doit de commencer par un doctype définis-
sant le type du document. Avec HTML 4, cette déclaration est pour
le moins compliquée:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/
loose.dtd">
Avec HTML 5, le doctype est simplifié:
<!DOCTYPE html>
HTML 5 n’est en effet plus basé sur SGML, il n’y a donc plus besoin
de spécifier une DTD. Les déclarations de plusieurs balises cou-
rantes ont également été simplifiées:
HTML 4 HTML 5
<html xmlns=http://www.
w3.org/1999/xhtml"
xml:lang="en" lang="en">
<html lang="en">
<meta http-equiv="Content-
Type" content="text/html;
charset=utf-8">
<meta charset="utf-8">
<script type="text/
javascript">...</script>
<script>...</script>
<style type="text/css">...
</style>
<style>...</style>
Ces déclarations simplifiées sont tolérées par les anciens naviga-
teurs.
Les nouvelles balises sémantiques
HTML 5 propose de nouvelles balises permettant de mieux définir
la structure d’un document:
<section> Délimite une section thématique, par exemple
un ensemble d’articles sur un même sujet
<article> Un élément de contenu au sens large: un article
dans un blog, un commentaire dans un forum,
une actualité, etc.
<aside> Contenu complémentaire à un <article> ou au
document: un glossaire, une note, etc.
<header> A ne pas confondre avec la balise <head>, il
s’agit ici de l’en-tête d’une <section> ou du
document. Il peut donc y avoir plusieurs balises
<header> dans une page
<footer> Le pied de page d’une <section> ou du docu-
ment: nom de l’auteur, date de publication, liens
vers des pages complémentaires, etc.
<nav> Regroupe un ensemble de liens de navigation,
par exemple un menu
Plus les pages Web sont structurées, plus les outils qui les ana-
lysent peuvent être efficaces. Un moteur de recherche pourra,
par exemple, donner plus d’importance au contenu de la balise
<article>. Un logiciel pour malvoyants pourra utiliser la balise
<nav> pour faciliter la navigation dans un site.
Même si les anciens navigateurs ne reconnaissent pas directe-
ment ces nouvelles balises, il est possible de les styliser avec CSS,
par exemple:
# le code HTML
<footer>Le pied de page du site</footer>
# le code CSS
footer
{
display: block;
border-top: 1px solid black;
margin-top: 1em;
color: gray;
}
Cela fonctionne avec tous les navigateurs, à l’exception d’Inter-
net Explorer 8 et inférieur. Il existe cependant une petite librairie
JavaScript nommée html5shiv permettant de contourner ce pro-
blème. Pour l’inclure dans vos pages, ajoutez ces lignes à l’inté-
rieur de la balise <head>:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/
trunk/html5.js"></script>
<![endif]-->
6
6
66 flash informatique
6
631 JANVIER 2012 - N°1
flash informatique
La balise <video>
Jusqu’à présent il n’était pas possible avec HTML d’afficher une
vidéo sans avoir recours à un plugin tel que Flash. HTML 5 intro-
duit une nouvelle balise <video> réglant ce problème. Il reste ce-
pendant une difficulté de taille: l’encodage. Pour pouvoir publier
une vidéo sur le Web, il faut en effet l’encoder dans un format
spécifique. Il n’existe cependant aucun format supporté par tous
les navigateurs du marché.
Google propose VP8, un format ouvert utilisé par Google Chrome,
Firefox et Opera. Pour des raisons essentiellement commerciales
Internet Explorer et Safari utilisent un autre format, propriétaire
celui-ci, H.264.
Pour s’assurer que tous les navigateurs puissent lire une vidéo il
faut donc obligatoirement l’encoder dans les deux formats. La
balise <video> permet à cet effet de spécifier plusieurs sources
différentes, une pour chaque format. Il est également possible
d’inclure un lecteur Flash afin de supporter les anciens naviga-
teurs. Voici un exemple concret:
<video width="320" height="240"
controls="controls">
<!-- vidéo encodée avec VP8 pour Google Chrome,
Firefox et Opera -->
<source src="/movie.webm" type="video/webm" />
<!-- vidéo encodée avec H.264 pour Safari &
Internet Explorer -->
<source src="/movie.mp4" type="video/mp4" />
<!-- lecteur Flash pour le support des anciens
navigateurs -->
<object data="/movie.swf" type="application/x-
shockwave-flash" width="320" height="240">
</object>
</video>
Les attributs width et height de la balise <video> définissent
respectivement la largeur et la hauteur de la fenêtre affichant le
contenu. L’attribut controls ajoute à la vidéo des boutons de
contrôles tels que Lecture, Pause, Stop, etc.
La balise <audio>
Comme pour la vidéo, il n’était pas possible de jouer de l’audio
sans plugin avant HTML 5. La nouvelle balise <audio> règle le
problème, mais encore une fois, l’encodage pose des difficultés.
Google Chrome, Firefox et Opera utilisent Vorbis, un format
ouvert, alors qu’Internet Explorer et Safari utilisent MP3, un
format propriétaire. Comme pour la vidéo, il est donc nécessaire
d’encoder son audio dans les deux formats et de le préciser à
l’aide de la balise <source>. Exemple:
<audio controls="controls">
<!-- audio encodé avec Vorbis pour Google
Chrome, Firefox et Opera -->
<source src="/song.ogg" type="audio/ogg" />
<!-- audio encodé avec MP3 pour Safari &
Internet Explorer -->
<source src="/song.mp3" type="audio/mpeg" />
<!-- lecteur Flash pour le support des anciens
navigateurs →
<object data="/song.swf" type="application/x-
shockwave-flash">
</object>
</audio>
Les formulaires
HTML 5 améliore nettement les formulaires en proposant plu-
sieurs nouveaux types de champs, parmi les principaux citons:
date Une date, le navigateur affichera un calendrier per-
mettant une sélection facile
number Un numéro, il est possible de définir les valeurs mini-
males et maximales admises avec les attributs min
et max
range Une plage de valeurs numériques
email Une adresse email ou une liste d’adresses email
tel Un numéro de téléphone
color Un code couleur (par exemple #000000 pour le noir)
Exemple:
Date de naissance: <input type="date" />
Email: <input type="email"/>
En connaissant précisément le type de données, le navigateur peut
utiliser des composants graphiques plus adaptés, par exemple un
calendrier pour la sélection d’une date. Autre exemple, l’iPhone
affiche uniquement le clavier numérique pour les champs de type
“number” et “tel”. Les navigateurs récents peuvent également
valider les formulaires, en contrôlant par exemple la syntaxe
d’une adresse email. Les anciens navigateurs traitent les types de
champs qu’ils ne connaissent pas comme étant du texte simple
(type=”text”).
HTML 5 introduit également de nouveaux attributs pour les
champs, notamment:
placeholder Permet de définir une valeur par défaut lorsque
le champ n’a pas encore été rempli, par exemple
Indiquez ici votre email
required Indique que le champ doit être rempli, le navi-
gateur pourra afficher un message d’erreur si ce
n’est pas le cas
pattern Permet de définir une expression régulière à
respecter pour la valeur du champ, par exemple
d{4} pour un code postal suisse (4 chiffres, pas
de lettres)
Exemple:
Code postal: <input type="number" pattern="d{4}"
placeholder="(4 chiffres)" required>
Le cache offline
Avec HTML 5 il est possible de spécifier au navigateur une liste de
ressources (feuille de style CSS, scripts, icônes, etc.) à télécharger
dans le cache afin de rendre les accès ultérieurs au site plus rapide.
Ce mécanisme permet également de rendre le site disponible en
mode offline, ce qui est particulièrement utile pour les applica-
tions mobiles.
La première étape consiste à créer un cache manifest. Il s’agit
simplement d’un petit fichier texte que vous déposerez sur votre
HTML 5, une introduction
77
31 JANVIER 2012 - N°1
site, généralement à la racine. Le nom n’a pas d’importance, dans
cet exemple nous l’appellerons cache.appcache. Le format est le
suivant:
CACHE MANIFEST
# La ligne ci-dessus est obligatoire, elle marque
# le début du fichier.
# On listera en dessous les ressources à mettre
# en cache, une par ligne.
# Il n’est pas possible d’utiliser des
# expressions régulières.
/images/logo.png
/style.css
# Les ressources peuvent être hébergées sur un
# autre serveur, ce qui permet d’inclure une
# librairie externe:
http://code.jquery.com/jquery-1.6.4.min.js
NETWORK:
# Après la ligne “NETWORK:” on listera les
# ressources qui nécessitent un accès au réseau,
# par exemple une page dynamique. Il est possible
# ici de mettre une étoile (*) afin de permettre
# eau navigateur de charger tout fichier non
# présent dans le cache
*
Il faut ensuite déclarer votre cache manifest dans la balise
<html>, comme ceci:
<html manifest="/cache.appcache">
Dernière étape, il est impératif que votre serveur Web transmette
le cache manifest avec le type MIME text/cache-manifest. Avec
Apache, il suffit de rajouter la ligne suivante dans le fichier de
configuration .htaccess (ou dans la configuration globale du ser-
veur):
AddType text/cache-manifest .appcache
Les navigateurs supportant le mode offline téléchargent le cache
manifest lors de chaque accès au site. Si le contenu de ce fichier
n’a pas changé, les ressources déjà présentes dans le cache ne sont
pas rechargées. Si vous avez édité une des ressources (par exemple
la feuille de style CSS), il est impératif de modifier le contenu du
cache manifest pour que ces évolutions soient prises en compte.
Une solution simple consiste à inclure, dans un commentaire du
cache manifest, un numéro de version que vous incrémenterez au
fur et à mesure de vos modifications, par exemple:
# Version: 12
Les anciens navigateurs ignorent les cache manifest.
Les balises et attributs supprimés
Dans la spécification d’HTML 5, seul l’usage de CSS est prévu pour
définir la présentation du document (taille des polices, aligne-
ments, couleurs, etc.). Les balises de présentation ne peuvent donc
plus être utilisées. Parmi celles-ci, citons notamment:
z big
z font
z center
z u
De la même manière, certains attributs sont désormais obsolètes:
z align et valign
z cellpadding, cellspacing et nowrap pour les cellules des
tableaux
z width pour certaines balises, etc.
Bien sûr, les nouveaux navigateurs tolèrent ces balises et attributs
et continuent de les prendre en compte, il est cependant temps,
en 2012, d’utiliser CSS!
Conclusion
Cet article introduit une toute petite partie des changements
apportés par HTML 5. Même si la spécification définitive n’est pas
prévue avant 2014 (!), il est possible d’utiliser dès aujourd’hui cer-
tains éléments tout en gardant une compatibilité avec les anciens
navigateurs.
D’autres innovations, comme les canvas permettant de générer
des images 2D à l’aide de scripts, ne fonctionnent que sur les
nouveaux butineurs. On peut cependant se réjouir de la décision
récente de Microsoft d’inclure Internet Explorer dans les mises à
jour automatiques de Windows, ce qui devrait limiter grandement
le nombre de personnes utilisant un navigateur obsolète.
Article du FI-EPFL 2012 sous licence CC BY-SA 3.0 / L. Boatto
HTML 5, une introduction
La couleur 2012
1
/
3
100%
