Si le langage HTML5 est en cours de spécification, 2012 est l’année où ces spécifications doivent passer au statut “candidate recommendation”, c’est-à-dire qu’elles ont atteint un certain niveau de maturité.
Les constructeurs de navigateurs web implémentent d’ores et déja dans leurs outils certaines de ces spécifications, ce qui fait que les web développeurs et designers peuvent les utiliser dans leurs conceptions.
Tirant leçon de l’échec du XHTML2, les concepteurs du HTML5 ont suivi un principe simple mais efficace : “Supporter l’existant”.
On y retrouve donc la plupart des spécifications du HTML4.01.
La méthode suivie est de privilégier le pragmatisme à la théorie, et en cas de conflit, de se ranger au point de vue de l’utilisateur lambda plutôt que de celui de la pureté théoricienne.
Et surtout d’écouter les avis des fabricants de navigateurs.
Gestion des erreurs
Jusqu’à présent, le HTML spécifiait au navigateur ce qu’il devait faire avec du “bon code”.
Le HTML5 lui dit aussi ce qu’il doit faire avec un balisage mal écrit.
Ceci n’intéresse pas le designer que vous êtes, c’est bien normal, vous écrivez votre code à la perfection, mais il faut garder en mémoire que le HTML5 est aussi à destination du fabricant de navigateur.
Simplifications
Déclaration de Type de Document
La déclaration de type de document, ou doctype, est simplifiée à l’extrême. Ainsi, elle passe de, pour du XHTML1.0 :
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
à, pour du HTML5 :
Plutôt cool, non?
Oui, mais si l’indice du langage n’est pas spécifié, comment cela se passera t’il quand on passera à HTML6 en l’an 2042???
Pas de panique :
– souvenez-vous, HTML5 est écrit pour prendre en charge ce qu’il y avait avant lui, non? Il en sera de même pour les spécifications futures !
– de toute façon, le doctype n’est réellement utile que pour les valideurs de code, pas pour le navigateur : si vous ne spécifiez pas le doctype correctement, votre navigateur continuera à afficher les balises correctement (faites le test !).
Encodage de caractères
Avant :
HTML5:
Javascript et CSS
Avant :
<link type=’text/css’ href=’maFeuilleDeStyle.css’ rel=’stylesheet’ >
HTML5:
<link href=’maFeuilleDeStyle.css’ rel=’stylesheet’>
Dorénavant, le navigateur n’a plus besoin de ces attributs pour déterminer le type des fichiers.
Syntaxe
Avant le XHTML 1.0, la syntaxe importait peu.
Avec le XHTML 1.0 qui s’appuyait sur la syntaxe XML, elle était devenue stricte : balisage en minuscule, attributs entre quotes, balise fermante…
Avec HTML5, retour à une syntaxe ‘à la carte’ : en majuscule ou minuscule, entre guillemets ou sans guillemets, avec ou sans balise fermante, l’utilisateur a la liberté de choisir sa syntaxe de balisage.
De la dépréciation à l’obsolescence
Avant HTML5, lorsqu’un élément ou un attribut était supprimé des specs, il était par le fait déprécié et ne devait plus être utilisé.
Avec HTML5, un élément ou un attribut ne sera plus déprécié mais obsolète : puisqu’HTML5 se doit de supporter l’existant, un élément obsolète doit impérativement être pris en compte par les navigateurs même s’il ne doit plus être utilisé par les designers, sous peine de “non-conformité”.
| Eléments obsolètes | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| acronym | applet | basefont | big | center | dir | font | frame | frameset | noframes | strike | xmp |
Redéfinitions
Certaines balises voient leur sens modifié.
| Eléments changeant de sens | Ancien sens | Nouveau sens |
|---|---|---|
| small | rendre ceci avec une taille moindre | rendre ceci de manière minimale |
| b | rendre en gras | sortir du style courant sans transmettre aucune importance supplémentaire |
| i | rendre en italique | rendre une partie du texte différemment du reste |
| cite | référence à d’autres sources | titre d’une oeuvre |
Nouveautés
Enfin, de nouvelles balises voient le jour.
| Nouvel élément | Définition |
|---|---|
| article | Contenu au sens indépendant du reste de la page : un article (tiens donc…), un commentaire, … Peut avoir son propre header et footer |
| aside | Balise structurante regroupant des données subalternes |
| audio | Insertion d’un contenu audio |
| canvas | Insertion d’un graphique |
| commande | Insertion de bouton, de bouton radio, de checkbox. Si utilisée dans la balise <menu>, elle sera visible. Sinon, elle sera invisible et utilisable pour des raccourcis clavier. |
| datalist | Insertion de liste déroulante |
| details | Peut être utilisé pour cacher ou afficher des informations complémentaires. Il peut être le conteneur de la balise <summary>. A l’heure actuelle, son utilisation n’est pas recommandée par les validateurs car trop peu de navigateurs l’ont implémentée. |
| embed | Insertion d’un contenu externe et interactif ou bien encore pour un plug-in. |
| figcaption | Utilisée dans le conteneur <figure>, définition de légende/description. Elle peut se situer avant ou après le contenu. |
| figure | Regroupement de médias (photos, diagrammes, code…) attachés au document sans pour autant en suivre le flux. |
| footer | Regroupement d’informations de pied de page en section ou article. Dans le footer, la balise <nav> n’est pas nécessaire pour insérer des liens de navigation. |
| header | Regroupement d’informations d’entête de section ou de page. |
| hgroup | Regroupement de titres de niveau Hx dans la balise <head>. |
| keygen | Contrôle de générateur de clé stockée dans “keystore local”. |
| mark | Marquage de texte, à styliser via CSS (ex : un résultat de recherche). |
| meter | Mesure dans une plage prédéfinie. |
| nav | Regroupement de liens internes ou externes. |
| output | Affichage du résultat d’un calcul. |
| progress | Affichage d’une barre de progression. |
| rp | Utilisé en annotations Ruby pour définir ce qui est à montrer aux navigateurs ne supportant pas les éléments Ruby. |
| rt | Pour expliquer des annotations en Ruby. |
| ruby | Utilisée pour des annotations en Ruby. |
| section | Utilisée pour regrouper des éléments différents, mais partageant la même thématique Cette balise est le plus souvent utilisé avec un header. Confusion possible avec la balise <article> dont tout le contenu doit avoir un sens propre. Confustion possible avec la balise <div> qui ne sert qu’à mettre en style un groupe d’éléments. |
| source | Dans le cadre d’affichage d’un média (donc à utiliser dans les balises <video> ou <audio>), pour indiquer l’url et le type du médias. |
| summary | Description de sommaire, légende ou titre d’un élément (conseil: à utiliser dans le conteneur <detail>). |
| time | Déclaration de date ou heure. |
| track | Affichage d’une barre de temps. |
| video | Insertion de vidéo. |
| wbr | utilisée pour forcer un retour à la ligne, comme par exemple pour couper en deux un mot de grande longueur. Cette balise ne se ferme pas. |
API Javascript
Jusqu’à présent, les spécifications HTML ne comportaient pas de documentation sur le Javascript. Les fabriquants de navigateurs implémentaient chacun indépendamment les APIs Javascript sans suivre de spécifications communes.
Dorénavant, ce monde est derrière nous : les specs HTML5 intègrent les spécifications pour les APIs Javascript.
Par exemple, il existe :
– un Undo-Manager permettant au navigateur de tracer les modifications effectuées sur un document,
– une API pour créer des Applications Web hors ligne utilisant des caches,
– une API pour le ‘drag & drop’.
Mais tout ceci sera développé en temps voulu et fera l’objet d’un autre billet.
Quel bel article, j’adore ce blog !
Merci, Daniel!