Les nouveautés apportées par HTML 5
Par Francis Besset le lundi 19 juillet 2010 - XHTML / CSS | Lien permanent

Cela fait un bon petit moment que vous l'entendez raisonner sans pour autant savoir tout ce qu'il se cache derrière.
Connaissez-vous le lot de nouveautés qu'apporte HTML 5 dans la structure de vos pages ?
Savez-vous ce qui est déprécié en HTML 5 ?
Vous avez sûrement entendu parlé de la nouvelle balise <video> qui permet d'insérer des vidéos directement sur une page sans utiliser de lecteur flash.
Bien entendu c'est loin d'être la seule nouveauté de cette nouvelle technologie.
Les changements ne passe pas uniquement sur ce que l'utilisateur final verra.
En effet, le doctype diffère beaucoup de celui que l'on connait à l'heure actuelle :
En HTML 5 :
<!DOCTYPE html>
<html lang="fr">…</html>
Il faut noter que la déclaration du Doctype n'est pas sensible à la casse et qu'il n'y a plus de référence à une DTD.
En XHTML 5 :
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">…</html>
On comprend vite qu'il sera plus simple de l'apprendre par coeur !
Concernant le processus de détection de l'encodage ce fait dans l'ordre suivant :
- Vérification de la présence d'un header HTTP "Content-Type"
- Détection du BOM en début de fichier
- Utilisation d'une balise meta spécifique (<meta charset="UTF-8"> par exemple, la syntaxe utilisée dans les versions précédentes étant toujours compatible)
Cependant pour les documents XHTML 5 l'auteur doit spécifier l'encodage dans le prologue XML :
<?xml version="1.0" encoding="UTF-8"?>
Nouvelles balises :
Pour passer aux nouvelles balises, on peut citer :
- video : Ajouter du contenu vidéo
- audio : Ajouter du contenu audio
- aside : Ajouter du contenu sans rapport avec la page
- header : Spécifier le début de la page
- footer : Spécifier la fin de la page
- nav : Section avec beaucoup de liens internes au site
- progress : Afficher un niveau d'avancement
Cette liste n'est pas exhaustive. Rendez-vous en fin d'article pour plus d'informations.
Les formulaires se voient eux aussi dotés de nouveaux types de champs :
- datetime : Champ de type date heure
- date : Champ de type date
- time : Champ de type heure
- month : Champ de type mois
- email : Champ de type E-mail
- url : Champ de type adresse Web
- color : Champ de type couleur
Cette liste aussi est loin d'être exhaustive mais vous permet de visualiser les principaux changements.
On peut noter entre autre que l'attribut target dans les liens est à nouveau disponible alors qu'elle était déprécié jusqu'à maintenant.
Balises supprimées :
Beaucoup de changement ont été effectués. Même s'il y a beaucoup de nouveautés, il y a des balises qui elles sont désormais dépréciées :
- basefont
- big
- center
- font
- s
- strike
- tt
- u
Elles sont supprimées car c'est aux CSS de faire le boulot.
Les balises frame, frameset et noframes sont supprimés ! Elles étaient déjà dépréciées car elles créaient des problèmes d'accessibilité.
- acronym : Supprimé car elle créait beaucoup de confusion
- applet : obsolète en faveur de object
Pour finir, la balise noscript est disponible uniquement dans la version HTML.
API HTML 5 :
HTML 5 permet d'utiliser 8 nouvelles API qui permettront de créer de nouvelles applications et qui peuvent être utilisées ensemble avec de nouveaux éléments introduits pour les applications dont :
- une API de dessin 2D utilisé avec la nouvelle balise canvas
- une API pour jouer des vidéos et des sons/musiques utilisé avec les nouvelles balises video et audio
- une API utilisée pour les applications hors-lignes
- une API d'édition en combinaison avec le nouvel attribut contenteditable
- une API de drag and drop en combinaison avec l'attribut draggable
- une API qui permet l'accès à l'historique et permet aux pages d'en ajouter pour prévenir les problèmes de bouton retour-en-arrière
Connexion et distribution P2P :
HTML 5 se voit doté de la capacité de réaliser des connexions entre utilisateurs PeerToPeerConnection(), et également grâce aux websocket.
Grâce à la création de nouvelles balises, on voit que l'on va pouvoir améliorer le référencement de son site grâce notamment à aside, nav, header er footer.
Bien sûr je n'ai pas tout dit. Mais si je m'étais amusé à le faire, je n'aurais pas fini d'ici un bout de temps. C'est pourquoi je vous invite à lire la page Wikipedia dédié à l'HTML 5 qui vous donnera toutes les infos sur les nouveautés de l'HTML 5.
(Image : LookupTables)




Commentaires
Hum ça fait quelques balises que j'utilise souvent qui sont supprimées ... Je pense au center par exemple !
@PSP : Y'a plus qu'à utiliser text-align: center; dans ta jolie CSS ;-)
"Savez-vous ce qui est déprécié en HTML 5 ?"
Je traduirai plutôt deprecated par obsolète ;)
Je découvre se blog via cet article et je pense du coup y revenir souvent.
Est ce que quelque part on peu voir des résultats obtenu avec l'API de dessins 2D, je suis un peu sceptique quand au résultats obtenus.
@Guiguiboy : C'est juste une façon de voir. Bon ok je suis mauvais joueur. :-)
@maniT4c : C'es quelque chose qui est prévu dans courant de la semaine.
Car j'ai prévu de blogguer uniquement sur HTML5 cette semaine !
Les center à l'arrache dans son HTML, c'était pas mal, dommage. :P
Non non : lang attribute n'est pas souhaitable et la déclaration html ne sert à rien.
@Philippe : Pourtant le W3C indique bien qu'il faut préciser html dans le doctype : http://www.w3.org/TR/html5-diff/#do...
Concernant lang il semblerait que tu ai raison :)
La déclaration HTML n'est pas utile sinon si tu veux le rendre compatible avec IE en utilisant le script html5.js qui en a besoin.
Encore une fois il faudrais vérifier d'une part, les balise supprimées sont nécessaire à la lecture des pages compossé au préalable et elle ne sont peut être pas vraiment supprimer (en êtes vous sur). D'autre part il faudrais composer des pages spécialement pour ceux qui ont un navigateur avec html 5 ce qui n'est pas la cas de tous le monde, j'en conclus que l'on puisse l'utiliser mais que ces fonctions sont acccessible pour ceux qui ont téléchargé les versions récente de nos navigateurs.
@denis bertin : Comme toutes nouveautés, dans le web on doit souvent attendre avant de pouvoir les utiliser à grande échelle.
Cependant, petit à petit les sites s'y mettent et les utilisateurs en ont marres de ne pas avoir un navigateur qui n'est pas à jour. C'est donc vraiment petit à petit que les gens mettent à jour leurs navigateurs. Ils m'arrivent même de devoir aller à droite ou à gauche pour mettre à jour les navigateurs des gens à leur demande parce qu'ils ne savent pas le faire eux-mêmes.
En tout cas, je pense que l'on peut utiliser l'HTML5 pour des projets quand on connait les navigateurs qu'utilisent nos visiteurs (merci Google Analytics).
Par ailleurs, il peut-être toujours rigolo de l'utiliser pour des pages comme les erreurs 404 par exemple.