HTML 5 : une évolution majeure du langage HTML

HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML. Cette version a été finalisée en 2014. Il faut noter en parallèle la formidable évolution du CSS avec de très nombreuses nouvelles propriétés.
Désormais les choses sont claires : le HTML ne s'occupe que du contenu et le CSS gère la mise en forme (et entre autres l'affichage sur les petits écrans).

Le présent tuto rappelle dans quelques chapitres ce qu'était le HTML version 4. Il était alors impossible de manipuler les fichiers audio et vidéo en HTML (obligation d'utiliser Flash), seul l'affichage sur les écrans d'ordinateurs était gérée, etc.
Les débutants en HTML ont intérêt à lire les pages "révisions HTML4" dans ce tuto car ce qui y est écrit est toujours valide en HTML 5.
Pour les visiteurs complètement ignorants en HTML & CSS, je leur conseille de visiter d'abord le tuto (dans le même site) : débuter en HTML & CSS

L'implémentation de HTML5 & CSS3 par les navigateurs est progressive.
L’usage de nouveaux éléments/attributs HTML5 non reconnus par votre navigateur ne bloquera pas l'affichage de la page. Ce dernier adoptera un mode dégradé.
Exemple : si le navigateur ne connait pas le type "email" pour les INPUT, le champ affiché sera de type "text".

HTML 5 : une liste impressionnante d'innovations et de simplifications

simplification du codage en particulier du doctype
syntaxe plus permissive que la norme XHTML
apparition de balises structurantes qui évitent de recourir aux fameux div id = ... qui rendaient le code illisible ...
une notable amélioration pour les formulaires : nouveaux types de champs, nouveaux attributs qui permettent de réaliser un véritable contrôle de saisie côté client sans devoir recourir au JavaScript
balises AUDIO et VIDEO qui dispensent de recourir au lecteur Flash ...
de nouveaux attributs de balise et en particulier l'attribut contenteditable mais surtout les attributs data-*. Et oui le développeur peut désormais créer ses propres attributs. Ces attributs personnalisés peuvent être ensuite utilisés par CSS et JavaScript
le code SVG peut désormais être écrit directement dans une page à condition qu'il soit contenu dans la balise double : SVG. On peut donc dessiner directement dans une page : dessin vectoriel.

Mais la norme HTML 5 c'est aussi un enrichissement notable de son langage de programmation (le JavaScript) avec de nouvelles API proposées par le W3C (W3C : instance internationale de normalisation de la programmation web).
Citons entre autres : Canvas, geolocation, Webstorage, Drag & drop, etc. Ces API sont donc implémentées par les versions récentes des différents navigateurs.

Dans le cadre de ce tuto j'évoque aussi certaines API JavaScript non implémentées (ne faisant pas partie de la norme) mais qui peuvent s'avérer utiles pour ne pas "réinventer la roue" ...

Google maps et son alternative libre et collaborative : OpenStreetMap
Google translate : service de traduction en ligne

Compte tenu de son importance, l'API Canvas (dessin matriciel cette fois) fait l'objet de son propre tutoriel.
Le langage SVG constitue aussi un tuto distinct.

Applications et animations HTML5

Avec peu ou prou de HTML, un zest de CSS (version 3) voire un script (routine écrite en JavaScript), on peut réaliser de belles applications ou animations en ligne.

Exemple d'animation

Sur un smartphone, orientez en mode "paysage" sinon dézoomage de la page.

Le code HTML

<div id ="zone5">
	<img src ="../images/fondeur.gif"  id ="fondeur1"/>
	<img src ="../images/fondeur2.gif" id ="fondeur2" />
</div>

Le code HTML est donc d'une simplicité étonnante.
Notez cependant que chaque élément IMG a l'attribut class et l'attribut id ...
Ici c'est le code CSS qui détermine l'animation.

Le code CSS

#zone5 {width : 100% ; height : 500px ; background-image :url(../images/paysage_hiver3.jpg) ; 
		background-size : cover ; 	border :1px solid black ; position : relative ;  }
@keyframes deplacer 
{
	from{left : 0% ; height : 80px; }
	to{left : 95%; top : 200px; height : 40px;}
} 
#fondeur1 {position:absolute ; top : 380px ; animation : deplacer 16s 0s infinite linear ; }
#fondeur2 {position:absolute ; top : 400px ; animation : deplacer 14s 2s infinite linear ; }

Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste parfaitement à la taille de la boîte.
Le modèle d'animation repose les propriétés top, left, height appliquées aux "sprites". Les fondeurs se déplacent du coin bas gauche vers le coin haut droit et leur taille diminue afin de créer un effet de perspective alors qu'il s'agit d'une zone 2D ...

Une autre application HTML5 : la boite aux couleurs

Composez de belles couleurs pour vos sites ; vous récupérez le code RGBA correspondant dans un champ en lecture seule.
Vous pourrez argumenter les propriétés CSS backgroud-color, color, border-color avec ce code proposé par l'application.

Code correspondant à cette application

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

HTML5 : nouvelles balises et nouveaux attributs

Des API utiles, des applications en HTML5

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville