Introduction à HTML5

Le langage HTML (de l’anglais Hypertext Markup Language) est, depuis les toutes premières heures de l’Internet, le programme de base en matière de structuration, de mise en réseau et de contenu sur le World Wide Web. Cependant, le langage de balisage n’a cessé de se développer suite à la sortie de la version HTML 4.01 en décembre 1999.

A l’inverse, Internet n’a jamais cessé de s’agrandir et de se s’améliorer. L’anglicisme « surfer » est aujourd’hui ancré dans notre vocabulaire de tous les jours. A côté des textes et des illustrations, les éléments multimédia sont aujourd’hui la pierre angulaire de l’Internet. L’intérêt croissant pour les offres mobiles s’ajoute à ce phénomène et l’utilisation moderne du Web n’est plus la même.

C’est ainsi que les sites Internet actuels font face à un grand nombre de plugins propriétaires pour pouvoir être à la hauteur des exigences des programmeurs, des éditeurs de sites Web et des consommateurs, ce qui entraîne des incompatibilités et des failles de sécurité. La cinquième version du langage hypertexte est censé mettre fin à ce problème. Le 28 octobre 2014, le Word Wide Web Consortium, abrégé par le sigle W3C, a présenté la technologie de HTML5 comme le noyau du langage de la Toile. Cependant, bon nombre d’administrateurs de sites Web continuent à miser sur la version antérieure ou font un compromis avec la technologie XHTML, ce qui devrait bientôt évoluer.

Tout sur le développement de HTML5

Contrairement à son prédécesseur, la cinquième version du langage de balisage hypertexte est un produit réalisé par deux groupes de développeurs parallèles. Alors que W3C a mis le projet HTML en pause après la sortie de la version 4.01 pour se concentrer sur le développement de XHTML, de nombreuses organisations ont manifesté leur mécontentement sur le nouveau cours du comité de normalisation. Ce lent développement du standard du Web fut inadmissible pour beaucoup d’entreprises spécialisées dans le développement de logiciels et de moteurs de recherche. En réaction à la réorganisation du W3C, le groupe de travail Web Hypertext Application Technology Working Group ou WHATWG a été créé pour travailler sur le développement du standard de HTML et se concentrer sur l’encadrement des applications. Le WHATWG a déjà présenté en 2004 une première proposition de HTML5 : celle-ci a convaincu le W3C qui a, deux ans plus tard, demandé à un nouveau groupe de travail de développer le langage HTML5 sur la base de la version de WHATWG.  En 2009, le W3C a annoncé la fin de XHTML. Au lieu de cela, ils se sont concentrés sur la mise au point de la spécification de HTML5.

Pourquoi HTML5 ?

Alors que les sites internet ne servaient, au début de l’ère du Web, qu’à la présentation de contenus, l’interaction entre les internautes et la Toile est aujourd’hui mise en avant. Les visiteurs sont passés du statut de passif à celui d’actif. Les éditeurs de sites Web répondent à ce phénomène avec des formulaires interactifs, en intégrant des champs de commentaires ou des boutons pour les réseaux sociaux. A cela s’ajoutent les jeux en ligne qui reposent directement sur les navigateurs. Avec HTML 4.01, une telle palette de fonctionnalités n’était alors accessible que grâce à des plugins externes. Le nouveau standard du Web HTML5 fait état de ces nouvelles forces. En plus des balises HTML entre crochets, la base de HTML5 comprend des balises spécifiques (voir ci-dessous), des éléments multimédia ainsi que de nombreuses interfaces de programmation (Application Programming Interfaces soit APIs ou interface de programme applicative) à disposition en combinaison avec JavaScript. Les plugins propriétaires de fournisseurs privés tels que Adobe Flash sont devenus des figures du passé. Les programmeurs peuvent maintenant travailler avec HTML5 indépendamment des sociétés développant des logiciels et créer ainsi des sites Internet sans barrière. Le tableau suivant présente les innovations de HTML5 ainsi qu’une sélection d’éléments clés.

Les nouveaux éléments HTML

Un des points les plus novateurs dans le monde du Web est l’introduction de nouveaux éléments HTML5 dans les balises sémantiques. Alors que HTML5 ne prévoyait qu’une structuration simpliste à travers différent éléments <div>, certaines balises spécifiques telles que <section>, <nav>, <article>, <aside>, <header>, <footer> voire <main> permettent de définir dans le langage HTML5 quel est le genre de contenu présent dans chaque élément. 

Balisesfonctions
<section>Définit une section à l’intérieur d’un document HTML5.
<nav>Définit une section possédant des liens de navigation. En général, on peut trouver ici des renvois vers d’autres pages.
<article>Caractérise une section en tant que contenu à part entière au sein d’un document HTML5.
<aside>Définit une section en tant que complément par rapport à ce qui l’entoure.
<header>Définit une section en tant qu’en-tête. En règle générale, vous y trouverez des logos, le titre du site Web ainsi que la navigation.
<footer>Définit une section comme un pied de page. Il s’agit souvent de l’adresse, des mentions légales ou du Copyright.
<main>Caractérise une section en tant que contenu principal d’une page Web. La balise <main> peut être utilisée qu’une fois par document HTML5.

La balise sémantique d’une section de page Web présente un grand avantage : elle facilite le travail des moteurs de recherche sur un document HTML5. Ceux-ci privilégient les contenus dont la structure est claire et concise. Par conséquent, les éditeurs de sites Internet qui facilitent l’interprétation d’un document HTML en utilisant des balises adaptées ont de grandes chances d’être bien référencés par les moteurs de recherche.

L’intégration d’éléments multimédia

Grâce à HTML, l’intégration de vidéos et de fichiers sonores est aussi facile que d’insérer une image. En plus de cela, les éléments HTML <audio> et <video> rendent l’utilisation de plugins superflue.

Balises fonctions
<audio> Caractérise un fichier audio.
<video> Caractérise des contenus vidéo accompagnés de leurs pistes audio.

Interfaces de programmation

HTML5 met à la disposition des programmeurs un bon nombre d’objets JavaScrit intégrés en tant que APIs dans des documents HTML5. Le tableau suivant indique une sélection d’éléments HTML5 qui facilitent le travail des programmeurs en matière de modernisation de leurs sites internet. 

API Fonctions
Canvas Le programmeur peut, grâce à l’élément <canvas>, définir un champ de document HTML5 afin d’intégrer des rendus dynamiques d’images bitmap via JavaScript. A côté des lignes, des rectangles et des arcs, l’élément prend en charge des courbes de Bézier, des dégradés de couleurs, des illustrations dans le format PBG, GIF et JEPEG ainsi que composants transparents et des textes. Une utilisation classique de <canvas> est l’intégration de diagrammes. Il est très utile pour la programmation de jeux en ligne.
Drag-and-Drop Le glisser-déposer (Drag-and-Drop) permet le déplacement d’objets à l’intérieur d’un document HTML5 ou entre deux sites Web.
Offline-Applications Grâce aux applications offline, les pages HTML5 disposent aussi d’applications Web même sans connexion Internet. Ceci est avant tout utile dans le cadre d’une utilisation Internet sur smartphone. A cela se rajoute le téléchargement de tous les contenus nécessaires dans l’application cache.
Géolocation Avec l’outil géolocalisation, HTML5 prend en charge une interface de programmation API, ce qui permet d’identifier l’emplacement d’un internaute. En règle générale, un internaute a le choix d’informer ou non où il se trouve lors du chargement d’une page fonctionnant avec HTML5.

Travailler avec HTML5

Plusieurs tutoriels sur HTML5 vous permettront de vous faire la main sur le nouveau standard du Web. Le premier que nous conseillons est le site www.selfhtml5.org. Une sélection de ressources pratiques pour les développeurs de sites est également disponible sur le site de Mozilla. En règle générale, le langage de balises est pris en charge par tous les éditeurs Web actuels. Il est conseillé de ne pas vous procurer d’éditeur HTML5 au préalable. Pour chaque standard du Web, le W3C met à disposition le Validator pour HTML5. Vous pourrez, grâce à lui, vérifier gratuitement la conformité de documents HTML5. La validation du code HTML Markup d’un site Web est une étape importante pour assurer la qualité d’un site.

Cet article vous a-t-il été utile ?