Les nouveautés apportées par HTML 5
Introduction html5
L’HTML5 est une évolution de l’HTML 4.01 (et de l’XHTML 1.0), c’est à dire que tout ce que vous savez faire en HTML reste valide. Cette évolution consiste en une multitude de nouvelles fonctionnalités qui ont été apportées au langage HTML ainsi qu’au Javascript.
Le W3C et le WHATWG
Le W3C (World Wide Web Consortium) est l’organisation qui s’occupe de standardiser le web. Elle est constituée d’un ensemble de membres actifs qui réfléchissent à l’évolution des standards tels que l’HTML et le CSS. Ils discutent par exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de nouvelles balises qu’il serait intéressant d’ajouter au langage. Le W3C travaille donc à l’élaboration du standard qu’est “l’HTML5”.
Seulement voilà, le problème c’est qu’une telle responsabilité présente un inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est la création d’un groupe de rébellion au sein du W3C, nommé le WHATWG (Web Hypertext Application Technology Working Group). Ce groupe est constitué principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple. L’approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert et surtout a pour objectif d’accélérer la standardisation (ou du moins la mise en place de standards pour les navigateurs).
De simple exécutant, il peut donc intervenir sur l’ergonomie ou le design du site. Sa fonction technique peut le conduire vers des postes proches du développement, de la conception, du conseil ou de la production.
Il peut également prétendre au poste de webmaster.
L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.
Les nouveautés dans le code HTML5
Un allégement du code
Tout d’abord, certaines balises ont été simplifiées afin d’alléger le code.
C’est le cas par exemple du Doctype (la première ligne indigeste que vous copiez/colliez en haut de chaque page HTML), de la balise <html>, de la balise <meta> de l’encodage des caractères, et des balises de feuilles de style et de script.
Alors qu’auparavant on pouvait avoir ce genre de code :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd« >
<html xmlns= »http://www.w3.org/1999/xhtml » xml:lang= »fr » >
<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″>
<link rel= »stylesheet » type= »text/css » href= »/design.css » />
<script type=”text/javascript” src=script.js »></script>
</head>
<body>
</body>
</html>
En HTML5, ça nous donne :
<!DOCTYPE html>
<html lang= »fr »>
<head>
<meta charset= »utf-8″ />
<link rel= »stylesheet » href= »/design.css » />
<script src= »/script.js »></script>
</head>
Nouvelles balises :
- section : Une section est un groupage thématique du contenu.
<section id= »articles »>…</section>
<section id= »twitter »>…</section> - video : Ajouter du contenu vidéo
- Article : Est une section représentant un contenu indépendant du reste du document
<section id= »articles »>
<h1>Articles</h1>
<article><h1>Article 1…
<article><h1>Article 2… - audio : Ajouter du contenu audio
- aside : Ajouter du contenu sans rapport avec la page
<aside>
<h1>…..</h1>
<p>…….</p>
</aside> - header : Spécifier le début de la page
<header id= »header »>…</header>
<section id= »news »><header>…</header></section> - footer : Spécifier la fin de la page
- hgroup :une section regroupant un ensemble de titres
<hgroup>
<h1>Titre</h1>
<h2>Sous-titre</h2>
</hgroup> - nav : Section avec beaucoup de liens internes au site
<nav>
<h1>Navigation</h1>
<ul>
<li><a href= »/ »>Accueil</a></li>
<li><a href= »/actualites/ »>Actualités</a></li>
…
</ul>
</nav> - progress : Afficher un niveau d’avancement
- canvas :Permet de dessiner du bitmap en Javascript
les nouveaux éléments de formulaire : La nouveauté la plus intéressante réside dans la possibilité de pouvoir spécifier une validation du formulaire côté client. Il est par exemple possible d’indiquer si un champ est obligatoire ou pas. Le développeur pourra fixer des contraintes qui s’appliqueront sur les champs (min, max, pattern, autocomplete, etc.), et que le navigateur se chargera de faire respecter.
input : quelques nouveaux types qui permettront au navigateur d’afficher directement les widgets qui vont bien.
- 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
- number :Le type de champ number permet de renseigner une valeur numérique.
L’attribut form: permettra de spécifier à quel formulaire se rattache un champ. Ce qui signifie que les dits champs pourront se trouver n’impore où dans la page, et plus uniquement sous la balise form corrspondante.
L’attribut autofocus : que l’on pourra attribuer à un input pour lui donner le focus dés la page chargée.
Et d’autres… :
<command>, <datalist>, <details>, <dialog>, <embed>, <figcaption>, <figure>, <keygen>, <mark>, <meter>, <output>, <progress>, <rp>, <rt>, <source>, <summary>
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
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 et footer…
