HTML5

HTML5

Le HTML5 (HyperText Markup Language 5) est la dernière révision du HTML. Cette version est finalement devenu une recommandation de la W3C le 28 octobre 2014 dernier après 7 ans de travaux. Avec deux modèles, le HTML5 bien sûrs mais aussi et heureusement le XHTML5, plus strict mais extensible! C’est que l’initiative vient en fait du « Web Hypertext application Technologie working Groupe (WHATWG) », une collaboration non officielle des différents développeurs de navigateurs web dont Mozilla, Opéra et Apple. Principalement pour répondre à la lenteur de la W3C de mettre à niveau son HTML4 et notamment pour répondre aux nombreuses fonctionnalités apportées par Internet Explorer.

Ça fait un bout de temps que je veux faire une référence des éléments HTML5, j’ai bien fait d’attendre que la W3C en fasse une véritable recommandation. Ce qui est donne encore plus de poids pour le viel adage « Vaut mieux tard que jamais »!.

Le HTML5 a effectivement été attendu longtemps, avec plusieurs attentes et on peut dire qu’il a rendu la marchandise à plusieurs égards, notamment le nouveau module Javascript! Je reste cependant sceptique quant à sa prétention d’en faire un langage davantage sémantique souvent au détriment de la rigueur et du bon sens. Par chance la W3C en a profité pour concocter une version XHTML5 avec certes sa grande rigueur mais surtout un module complet pour rendre le HTML5 extensible à la manière XML. Il faut avertir le lecteur que le HTML5 englobe un nombre important de module ou API tous plus spécialisés les uns que les autres que je ne traiterais pas ici en détail.

Bon, on peut déjà dire que le merveilleux CSS3 a comblé et surtout grandement optimisé la gestion du style et du coup sauvé le HTML. Combiné avec les nouvelles fonctionnalités Javascript on peut certainement dire qu’il a fait mal au populaire jQuery, plus aussi indispensable qu’avant le HTML5. Le HTML5 restes un langage structurel mais sans apporter de réelle solution à son problème historique de grille. Bien sûr le CSS3 faits encore le travail mais on aurait aimé avoir une balise <grid> (grille) par exemple tant qu’à créer des balises complètement inutiles comme <figcaption>! C’est pourquoi les « framework » comme Bootstrap risque d’être utile encore longtemps.

Langage structurel

Le HTML5 a toutefois fait un merveilleux travail au niveau structurel et à ce titre la sémantique me semble de bon augure. Un exemple vaut mille mots.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Structure HTML5</title>
  </head>
  <body>
    <header>
      <h1>En-tête (header)</h1>
      <nav role="menubar">...</nav>
    </header>
    <main role="main">

      <article>
        <header>
          <h2>Titre</h2>
        </header>
        <p>...</p>
        <footer>
          ...
        </footer>
      </article>

      <section>
        ...
      </section>
    </main>
    <aside>
      ...
    </aside>
    <footer>
      <p>Pied de page (footer)</p>
    </footer>
  </body>
</html>

XHTML5

Pour utiliser la structure XHTML 5 il faut préciser le type de contenu (Content-Type) dans l’entête HTTP : « Content-Type: application/xhtml+xml » (à distinguer de l’entête HTML <head>). Et bien sûr le document doit être aux normes XML. Strict sans exception et plus difficile à rendre. Avec toutefois l’avantage de permettre les extensions du langage XML, comme ajouter vos propres balises (exemple : <mabalise></mabalise>) ;

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <title>Exemple</title>
  </head>
   <body>
     <!-- Contenu de la page respectant la syntaxe XML. -->
   </body>
</html>

Les balises

<!DOCTYPE html>

Tout comme les pages HTML ou XHTML, les documents HTML5 nécessitent une déclaration <!DOCTYPE html> au début de tout document HTML sauf pour les documents XML interprétés en mode standard par défaut.

<a>

Référence ou hyperlien vers un autre document HTML ou autres fichiers compatibles.
Voir : Lien vers une adresse de courrier électronique

<article>

Partie indépendante du site, comme un commentaire.
article

<aside>

Associé à la balise qui le précède.
aside

<audio>

Pour définir un son, comme la musique ou les autres flux audio (streaming).

<b>

<base>

base

<bdi>

bdi

<bdo>

bdo

<blockquote>

blockquote

<body>

body

<br>

<button>

button

<canvas>

Utilisé pour afficher des éléments graphiques, il faut utiliser un script pour l’animer.

<caption>

caption

<cite>

cite

<code>

code

<col>

col

<colgroup>

colgroup

<command>

Définit un bouton. Cette balise est uniquement supportée par Internet Explorer 9. Il n’est donc pas recommandé de l’utiliser.
command

<datalist>

datalist

<dd>

<del>

del

<details>

Précise les détails supplémentaires qui peuvent être masqués ou affichés sur demande.
details

<dfn>

dfn

<div>

div

<dl>

<dt>

<em>

<embed>

Définit un contenu incorporé, comme un plug in.
embed

<fieldset>

fieldset

<figcaption>

Légende pour la balise <figure>.

<figure>

Définit des images, des diagrammes, des photos, du code, etc.

<footer>

Définit le pied de page d’un article ou un document. Contient généralement le nom de l’auteur, la date à laquelle le document a été écrit et / ou ses coordonnées.

<form>

form

<h1> - <h6>

<head>

head

<header>

Spécifie une introduction, ou un groupe d’éléments de navigation pour le document.

<hgroup>

Balise supprimée.
~~hgroup~~

<hr>

<html>

html

<i>

<iframe>

iframe

<img>

<input>

input

<ins>

ins

<kdb>

kbd

<keygen>

Permet de générer une clé (sécurisé).

<label>

label

<link>

La balise d’entête link permet de spécifier les relations entre les pages du site ou encore de lier des documents externes. Notamment les fichiers CSS.
link

<main>

Définit le contenu principal de la page, il doit être unique dans la page.
main

<map>

Associé à une balise <img>, elle permet de définir un « image-map » c’est-à-dire des zones <area> cliquables sur une image.
map

<mark>

Définit un texte marqué.
mark

<menu>

En fait ce n’est pas une nouvelle balise, instauré par Firefox 8, cette balise dépréciée, qui permet de définir un menu contextuel a été réintroduite par le HTML5. Absolument incompatible à l’heure actuelle.
menu

<meta>

Balise d’entête, elle permet de définir les métadonnées (titre, description...).

<meter>

Permet d’utiliser les mesures avec un minimum et maximum connus, pour afficher une jauge.

<nav>

Définit une section dans la navigation.

<noscript>

Permet d’afficher un contenu dans le cas où le JavaScript serait désactivé.

<object>

Permet d’intégrer au document HTML des objets externe (audio, vidéo, Applets Java, ActiveX, PDF, et animation Flash).

<ol>

Définie une listes d’item (li) numérotées avec retraits.

<optgroup>

optgroup

<option>

option

<output>

Représente le résultat d’un calcul.
output

<p>

<param>

param

<pre>

pre

<progress>

Définit une barre de progression sur le travail en cours d’exécution.
progress

<q>

<rp>

Annotations ruby.
rp

<rt>

<ruby>

ruby

<s>

<samp>

samp

<script>

script

<section>

Définit les sections dans un document. Tels que les chapitres, en-têtes, pieds de page, ou toutes autres sections du document.
section

<select>

select

<small>

small

<source>

<span>

<strong>

<style>

<sub>

<sumary>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<time>

Définit une date ou une heure, ou les deux. Cette balise a été abandonnée en octobre 2011 en faveur de la balise data avant d’être réintroduite.

<title>

<tr>

<track>

Insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise vidéo.

<u>

Balise supprimée.

<ul>

<var>

<video>

Insérer un contenu vidéo en streaming.
video

<wbr>

Nouveaux attributs

Quelques nouveaux attributs spécifiques à une balise, quelques-unes globales mais une ribambelle d’attributs pour les éléments d’un formulaire par contre. Encore limitée au niveau de la compatibilité mais qui promet beaucoup.

Pour la balise <html> :

manifest : URL de déclaration (manifest) des fichiers pour un usage hors ligne.

Pour la balise <iframe> :

sandbox : Spécifie des restrictions sur le contenu de l’iframe
seamless : Indique que l’iframe doit être parfaitement intégrée dans le document.
srcdoc : le code HTML du document affiché dans l’iframe.

Pour la balise <a> :

media : permet de spécifier pour quel media ou device il est optimisé.
type : définit le MIME de la cible URL.

Pour la balise <area> :

hreflang : spécifie le langage de l’url.
media : permet de spécifier pour quel media ou appareil il est optimisé.
rel : Indique la relation entre le document courant et l’URL cible.
type : définit le MIME de la cible URL.

Pour la balise <link> :

sizes : Définit la taille, hauteur et largeur.

Pour la balise <menu> :

label : Label visible du menu.
type : Définit le type de menu à afficher. La valeur par défaut est « list ».

Pour la balise <meta> :

charset : Définit la table de caractères pour l’encodage de la page.

Pour la balise <ol> :

reversed : si présent, change l’ordre d’affichage.

Pour la balise <script> :

async : définit si le script doit être exécuté de manière asynchrone ou pas.

Pour la balise <style> :

scoped : Si présent, le style est appliqué uniquement sur le parent et les fils.

Ainsi que les attributs globaux qui s’appliquent à toutes les balises :

contenteditable
contextmenu
data-*
draggable
hidden
on* (gestionnaires d’événements)
spellcheck

Nouveaux attributs pour éléments de formulaire

Pour la balise <button> :

autofocus : Indique que le bouton doit avoir le focus pendant le chargement de la page.
form : spécifie à quel formulaire le bouton appartient.
formaction : Spécifie où envoyer le form-data quand un formulaire est soumis. Remplace l’attribut action du formulaire.
formenctype : Indique comment le form-data doit être encodé avant d’être envoyé à un serveur. Remplace l’attribut enctype du formulaire.
formmethod : définit comment il faut envoyer le form-data.
formnovalidate : si présent, indique que le formulaire ne doit pas être validé quand il est envoyé.
formtarget : spécifie où ouvrir/exécuter l’action.

Pour la balise <fieldset> :

name : définit le nom du fieldset.
disabled : désactive le fieldset.
form : définit le formulaire du fieldset.

Pour la balise <form> :

autocomplete : auto complétion.
novalidate : si présent le formulaire n’est pas validé lorsqu’il est soumis.

Pour la balise <input> :

autocomplete : auto completion.
autofocus : définit le focus lors du chargement de la page.
form : spécifie à quel formulaire le champ appartient.
formaction : Remplace l’attribut "action" du formulaire. Indique l’URL à laquelle envoyer les données du formulaire.
formenctype : Remplace l’attribut "enctype" du formulaire. Indique comment la forme-données doit être encodé avant d’être envoyé au serveur.
formmethod : Remplace l’attribut "method" du formulaire. Définit la méthode HTTP d’envoi des données à l’URL.
formnovalidate : Remplace l’attribut "novalidate" du formulaire. S’il est présent le champ de saisie ne devrait pas être validé lors de son envoi.
formtarget : Remplace l’attribut "target" du formulaire. Indique la fenêtre cible utilisée lorsque le formulaire est soumis.
height : Définit la hauteur.
list : Désigne un "datalist" contenant des options prédéfinies pour le champ de saisie.
max : Indique la valeur maximale du champ d’entrée.
min : Indique la valeur minimale du champ d’entrée.
multiple : Si présent, l’utilisateur peut entrer plusieurs valeurs.
pattern : Définit un motif.
placeholder : Un conseil pour aider les utilisateurs à remplir le champ de saisie.
required : Indique que la valeur du champ de saisie est nécessaire pour soumettre le formulaire.
step : Indique l’intervalle entre les valeurs.

Pour la balise <textarea> :

autofocus : focus l’élément textarea.
dirname : Indique le nom du textarea.
form : définit une ou plusieurs formulaires pour le textarea.
maxlength : nombre maximum de caractères.
placeholder : définit une astuce pour aider l’utilisateur.
required : Indique que la valeur du champ de saisie est nécessaire.
wrap : définit comment le texte est affiché dans le textarea.

Nouveaux types d’élément de formulaire

Voilà qui est des plus pratiques, une des premières lois de programmation, la validation. Les navigateurs sont toutefois très lents à les supporter. Je dirais même que les mobiles et l’iPod les supportent davantage. Ce qui en fait un gadget esthétique sans plus, à la limite ergonomique. Prometteur mais d’ici là, la validation côté serveur reste la seule solution viable...

datetime
datetime-local
date
month
week
time
tel
number
range
email
url
search
color

Compatibilité du HTML5

Le HTML5 est aujourd’hui raisonnablement supporté par la plupart des plate-formes. Google Chrome domine et s’auto met à jour! La plupart des dernières générations de navigateurs supporte assez bien le HTML5. Pour s’assurer que les versions précédentes soit au maximum supportées, on parle essentiellement de la plupart des versions de Internet Explorer, mais aussi Safari, ou encore de la Ford T des Navigateurs, la solide et vielle version 3 de Firefox, il faut déjà déclarer les nouvelles balises pour les traiter de façon « display: block; » (le navigateur interprète les nouvelle balise inconnue de façon « inline »)

/* Firefox 2+ et IE6+ */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, keygen, main, meter, nav, output, progress, section, source, video { 
  display: block;
}
mark, rp, rt, ruby, summary, time{ 
  display: inline
}

Pour au moins sauver les meubles. Mais pour fonctionner, il faut créer au préalable les éléments dans le DOM avec ce Javascript qui doit être exécuté en tout premier :

<script>
  document.createElement("article");
  document.createElement("aside");
  document.createElement("audio");
  document.createElement("canvas");
  document.createElement("command");
  document.createElement("datalist");
  document.createElement("details");
  document.createElement("embed");
  document.createElement("figcaption");
  document.createElement("figure");
  document.createElement("footer");
  document.createElement("header");
  document.createElement("keygen");
  document.createElement("main");
  document.createElement("mark");
  document.createElement("meter");
  document.createElement("nav");
  document.createElement("output");
  document.createElement("progress");
  document.createElement("rp");
  document.createElement("rt");
  document.createElement("ruby");
  document.createElement("section");
  document.createElement("source");
  document.createElement("summary");
  document.createElement("time");
  document.createElement("video");
</script>

<script>
// Autre exemple par Dmitri Lau */
"abbr article aside audio bdi canvas data datalist details figcaption figure "+
  "footer header hgroup main mark meter nav output progress section " +
  "summary template time video"
  .replace(/w+/g, function(a){ document.createElement(a) });
</script>

Polyfill, Shiv ...pour IE

Internet Explorer a historiquement fait cavalier seul. Ce n’est pas qu’il a erré, mais il a assurément manqué le bateau du HTML5. Déjà IE a perdu le gros de son marché depuis quelques années, un maigre 9,48 % aujourd’hui, 7,97 % en juin dont 4% pour IE11 sur les Trucsweb.com (8571 visiteurs)! On se retrouve un peu comme avec Netscape de l’époque, avec des versions IE6, IE7, IE8, IE9, IE10, IE11 et probablement une dernière version IE 12, ou « Spartan », la cerise sur le gâteau.

Pourquoi pas un commentaire conditionnel! Je ne suis pas fervent des patch mais ça reste efficace et seul Internet Explorer 8 et moins peut lire ce commentaire. Ici l’exemple « The shiv » de Sjoerd Visscher, pionnier dans le domaine (ici sur Google) :

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Microsoft a aussi ses scripts de mise à niveau, par exemple des navigateurs MSIE5 version 5 à 8 avec les navigateurs modernes. Voir la liste complète.

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

À la manière Bootstrap, un fichier « Shiv » doublé d’un « respond » pour les requêtes de média (media query) min/max-width. Cette fois sur maxcdn.

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Il existe des dizaines de librairies et de scripts plus ou moins complexes pour étendre la compatibilité des fonctionnalités les plus diverses. Une bonne référence est la compilation de Paul Irish « HTML5 Cross Browser Polyfills » dont le clasique Modernizr v3

Navigateur de bureau

	Chrome	Firefox	Internet Explorer	Opera	Safari
Courrante	43	38	11	29	8.0
Vielle	42	37	10	28	7.0
	41	36	9	27	6.0
	40	35	8	26	5.1
	39	34		24
	38	33		23
	37	32		22

Tablette

	Android	BlackBerry	Chrome	Firefox	Internet Explorer	iOS	Opera
Courrante	5.0	2.1	39	35	11	8.0	26
Vielle	4.4.3		34	34	10	7.0	12.10
	4.4			33		6.0	11.50
	4.0			28		5.1
	3.2			24		4.2

Mobile

	Android	BlackBerry	Chrome	Firefox	iOS	Opera	Windows Phone
Courrantes	5.0	10.3	39	35	8.0	26	8.1
Vielle	4.4.3	10.2	34	34	7.0	12.10	8
	4.4	7		33	6.0	11.50	7.5
	4.0			28	5.1
	1.6			24	4.2
					4.1
					3.1

Consoles
Sony Playstation 4	Passable
Sony Playstation TV (NetFront NX)	Passable
Xbox One (Internet Explorer 10)	Passable
Nintendo Wii U (NetFront NX)	Passable
Xbox 360 (Internet Explorer 9)	Aucun
Nintendo Wii (Opera)	Aucun
Sony Playstation 3 (NetFront)	Aucun