HTML5 : Introduction

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 :

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN »
« http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »>

à, pour du HTML5 :

<!DOCTYPE html>

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 :

<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″>

HTML5:

<meta charset=”UTF-8″>

Javascript et CSS

Avant :

<script type= »text/javascript » src= »monFichierJavascript.js »></script>
<link type=’text/css’ href=’maFeuilleDeStyle.css’ rel=’stylesheet’ >

HTML5:

<script src= »monFichierJavascript.js »></script>
<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
acronymappletbasefontbigcenterdirfontframeframesetnoframesstrikexmp

Redéfinitions

Certaines balises voient leur sens modifié.

Eléments changeant de sensAncien sensNouveau sens
smallrendre ceci avec une taille moindrerendre ceci de manière minimale
brendre en grassortir du style courant sans transmettre aucune importance supplémentaire
irendre en italiquerendre une partie du texte différemment du reste
citeréférence à d’autres sourcestitre d’une oeuvre

Nouveautés

Enfin, de nouvelles balises voient le jour.

Nouvel élémentDéfinition
articleContenu au sens indépendant du reste de la page : un article (tiens donc…), un commentaire, …
Peut avoir son propre header et footer
asideBalise structurante regroupant des données subalternes
audioInsertion d’un contenu audio
canvasInsertion d’un graphique
commandeInsertion 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.
datalistInsertion de liste déroulante
detailsPeut ê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.
embedInsertion d’un contenu externe et interactif ou bien encore pour un plug-in.
figcaptionUtilisée dans le conteneur <figure>, définition de légende/description. Elle peut se situer avant ou après le contenu.
figureRegroupement de médias (photos, diagrammes, code…) attachés au document sans pour autant en suivre le flux.
footerRegroupement 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.
headerRegroupement d’informations d’entête de section ou de page.
hgroupRegroupement de titres de niveau Hx dans la balise <head>.
keygenContrôle de générateur de clé stockée dans « keystore local ».
markMarquage de texte, à styliser via CSS (ex : un résultat de recherche).
meterMesure dans une plage prédéfinie.
navRegroupement de liens internes ou externes.
outputAffichage du résultat d’un calcul.
progressAffichage d’une barre de progression.
rpUtilisé en annotations Ruby pour définir ce qui est à montrer aux navigateurs ne supportant pas les éléments Ruby.
rtPour expliquer des annotations en Ruby.
rubyUtilisée pour des annotations en Ruby.
sectionUtilisé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.
sourceDans 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.
summaryDescription de sommaire, légende ou titre d’un élément (conseil: à utiliser dans le conteneur <detail>).
timeDéclaration de date ou heure.
trackAffichage d’une barre de temps.
videoInsertion de vidéo.
wbrutilisé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.

2 réflexions sur “HTML5 : Introduction”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *