FLASH INFORMATIQUE FI



HTML 5, une introduction


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éveloppement, et son support sur les différents navigateurs n’est de loin pas complet. Nous allons cependant voir dans cet article les éléments que vous pouvez utiliser dès aujourd’hui tout en gardant une compatibilité avec les anciens navigateurs.



HTML5 is the next revision of HTML, the language for creating Web pages. It is still under development, but you will discover in this article the features you can use today while keeping compatibility with older browsers.


Laurent BOATTO


Doctype et autre simplifications

Tout fichier HTML se doit de commencer par un doctype définissant 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 courantes 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 navigateurs.

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 document : 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 analysent 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 directement 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’Internet Explorer 8 et inférieur. Il existe cependant une petite librairie JavaScript nommée html5shiv permettant de contourner ce problè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]-->

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 introduit une nouvelle balise <video> réglant ce problème. Il reste cependant 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 navigateurs. 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 &#8594;
<object data="/song.swf" type="application/x-shockwave-flash">
</object>
</audio>

Les formulaires

HTML 5 améliore nettement les formulaires en proposant plusieurs nouveaux types de champs, parmi les principaux citons :

dateUne date, le navigateur affichera un calendrier permettant une sélection facile
numberUn numéro, il est possible de définir les valeurs minimales et maximales admises avec les attributs {min} et {max}
rangeUne plage de valeurs numériques
emailUne adresse email ou une liste d’adresses email
telUn numéro de téléphone
colorUn 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 :

placeholderPermet de définir une valeur par défaut lorsque le champ n’a pas encore été rempli, par exemple Indiquez ici votre email
requiredIndique que le champ doit être rempli, le navigateur pourra afficher un message d’erreur si ce n’est pas le cas
patternPermet 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 applications 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 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 &#8220;NETWORK:&#8221; 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 , 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 serveur) :

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, alignements, couleurs, etc.). Les balises de présentation ne peuvent donc plus être utilisées. Parmi celles-ci, citons notamment :

  • big
  • font
  • center
  • u

De la même manière, certains attributs sont désormais obsolètes :

  • align et valign
  • cellpadding, cellspacing et nowrap pour les cellules des tableaux
  • 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 certains é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



Cherchez ...

- dans tous les Flash informatique
(entre 1986 et 2001: seulement sur les titres et auteurs)
- par mot-clé

Avertissement

Cette page est un article d'une publication de l'EPFL.
Le contenu et certains liens ne sont peut-être plus d'actualité.

Responsabilité

Les articles n'engagent que leurs auteurs, sauf ceux qui concernent de façon évidente des prestations officielles (sous la responsabilité du DIT ou d'autres entités). Toute reproduction, même partielle, n'est autorisée qu'avec l'accord de la rédaction et des auteurs.


Archives sur clé USB

Le Flash informatique ne paraîtra plus. Le dernier numéro est daté de décembre 2013.

Taguage des articles

Depuis 2010, pour aider le lecteur, les articles sont taggués:
  •   tout public
    que vous soyiez utilisateur occasionnel du PC familial, ou bien simplement propriétaire d'un iPhone, lisez l'article marqué tout public, vous y apprendrez plein de choses qui vous permettront de mieux appréhender ces technologies qui envahissent votre quotidien
  •   public averti
    l'article parle de concepts techniques, mais à la portée de toute personne intéressée par les dessous des nouvelles technologies
  •   expert
    le sujet abordé n'intéresse que peu de lecteurs, mais ceux-là seront ravis d'approfondir un thème, d'en savoir plus sur un nouveau langage.