Le HTML 5

Le HTML, HyperText Markup Language, est un langage de balisage utilisé afin de créer des pages web et afficher des informations dans un navigateur Web. Le HTML ne possède pas de véritable loi régissant sa rédaction. Le W3C, World Wide Web Consortium, est une organisation qui délivre des normes internationales de standardisation pour le World Wide Web (d’où est tiré le WWW). Le HTML est apparu, nommé ainsi dans les années 1990. Il a connu 4 versions de 1990 à 1997. Aujourd’hui, la dernière version semble être une petite révolution sur le Web. Qu’apporte le HTML 5 aux développeurs Web?

HTML5Logo

Le langage

Le HTML est un langage de balisage, c’est à dire qu’il est composé de balise ouvrantes (<html>), fermantes (</html>). Chacune de ces balises a un but. Elle va être interprété par le navigateur web afin de présenter un rendu à l’utilisateur. Le développeur peut ainsi insérer énormément d’éléments dans une page HTML, images, textes, vidéo… Chaque balise possède également un certain nombre d’attributs. Les attributs sont des valeurs qui permettent de la personnaliser, Il en existe 188 dans HTML4. Ils ont des objectifs différents mais peuvent être réunis en différents ensembles:

  • Les attributs propres à des balises comme le chemin de la source pour une balise image (<img>)
  • Les attributs génériques par exemple un identifiant unique sur la page ou une classe qui permet de regrouper des éléments dans un groupe nommé
  • Les attributs facultatifs comme la largeur et la hauteur qui ne doivent pas obligatoirement être présents dans les balises

Il existe un nombre limité de balises HTML standardisées mais il est possible de créer des balises soit-même. Attention, le navigateur l’interpréta, mais votre document HTML n’est pas valide. Afin de l’être, votre document doit respecter la syntaxe SGML, Standard Generalized Markup Language, et n’utiliser que des éléments et attributs présents dans le standard HTML et respecter la structure standardisée des balises. Une fois valide au normes de ce style de document, votre page HTML doit également respecter la spécification HTML qui est entre autre précisée dans une norme de l’ISO.

La structure de base d’une page HTML doit impérativement respecter ce schéma afin d’être valide :

Le HTML 5

Le HTML est donc le dernier standard publié par le W3C depuis la version 4 de 1997. Il regroupe en réalité deux choses : la nouvelle version du langage HTML 5 mais également un ensemble d’API et d’outil qui permettent la construction de sites variés et puissants. Son but est d’apporter une réponse aux nombreuses problématiques actuelles du Web, notamment l’unification des standards du HTML et du xHTML.

Compatibilité et migration

La première version dite Draft de HTML5 est sortit en 2008, les navigateurs ont pu s’adapter. Aujourd’hui, les navigateurs reconnaissent une majorité des fonctionnalités du HTML5. Bien qu’apportant de nouveaux outils, le HTML5 est compatible avec les anciennes versions du langage. Un site actuellement réalisé en HTML4 fonctionnera toujours en HTML5. Si, une amélioration est demandée, il est possible d’utiliser les outils du HTML4 ou les nouveaux contrôles de HTML5 qui contiennent déjà des spécification plus ou moins subtiles. Par exemple le champ email est semblable aux autres champs mais sur navigateurs mobiles, il va permettre la personnalisation du clavier afin de permettre la saisie d’un e-mail plus facilement. Les navigateurs qui ne connaissent pas ce type de champ fonctionneront normalement en proposant un champ commun à l’utilisateur.

Particularité du HTML5

Le doctype

L’histoire du doctype est un peu particulière. Pendant les débuts du HTML, les navigateurs s’adaptaient beaucoup à ce qui était déjà présent sur le Web, même si cela ne respectait pas les règles établies. Lors du développement de Internet Explorer pour Mac, les développeurs se sont rendus compte que s’ils essayaient de respecter strictement les règles pour leur navigateur, le rendu des sites était complètement aléatoire. Afin de corriger cela, les développeurs ont opté pour la présence d’une balise doctype au début du document HTML permettant d’identifier les pages respectant les spécifications et ceux qui ne les respectaient pas afin de les afficher de la bonne manière (en respectant ou non les spécifications).

Doctype HTML4 :

Cette balise est assez complexe, chaque version du HTML et xHTML possédant un doctype différent (environ 15 doctypes). Elle permet d’activer le mode standard du navigateur, c’est à dire lui indiquer qu’il doit interpréter le HTML de cette page en respectant les spécification du HTML. La volonté du W3C fut de simplifier cette balise.

Doctype HTML5:

La syntaxe est très simplifiée, il permet de définir une page comme utilisant du HTML5 et permet au navigateur de savoir que cette page respectera le standard.

Le Head

La balise est <head> est un élément placé avant tout contenu dans la page HTML. Elle permet de paramétrer la page, notamment avec l’encodage et le titre de la page. C’est également dans cette balise que l’on va importer les fichiers JavaScript et Css. Il y a peu de changement dans la structure de cette balise. La modification notable concerne le paramétrage de l’encodage qui est simplifié.

Encodage HTML4 :

Encode HTML5 :

Ceci marche pour tous les navigateurs et permet de définir très simplement l’encodage de la page.

Les balises structurantes

Dans une majorité de pages HTML4, il est possible de trouver des balises structurantes de type <div> qui vont définir les mêmes zones du site (menu de navigation, entête de page, pied de page…). Le HTML5 amène avec lui un lot de nouvelles balises qui vont permettre de mettre en place l’architecture du site de manière simplifiée et surtout plus simple et claire.

  • <header> : comme son nom l’indique elle compose le haut de votre site et contient en général la banière, le logo, et le slogan de votre site Web.
  • <footer> : représente le pied de page situé en bas de votre document HTML et contient les informations de contact, les copyright, les noms d’auteurs.
  • <nav> : c’est la balise qui va composer votre menu, elle contient les principaux liens vers les autres pages de votre site.
  • <section> : permet de rassembler les éléments de la page de manière thématique et se situe généralement au centre de la page
  • <aside> : cette balise permet l’apport de compléments d’informations présents sur le coté de la section liée.
  • <article> : permet la création d’article, donc une partie indépendante de la page dans laquelle elle s’inscrit.
Les balises multimédias

Avec l’augmentation du nombre de vidéos présentes sur le Web beaucoup de sites intègrent à leurs pages des lecteurs vidéos qui permettent de partager celles-ci. Cependant, ces lecteurs ont le problèmes de nécessité l’utilisation de plugins. Les plugins sont de petites applications qui vont permettre aux navigateurs de lire les flux vidéos et audios. Leurs défauts principaux sont de devoir être installés et ils sont propriétaires ce qui rend les utilisateurs dépendants des entreprises qui les possèdent. Le HTML5 répond une nouvelle fois à ces problématique en proposant des balises permettant d’intégrer audio et vidéo à un site Web.

La balise audio permet la lecture de musique sur un site. Pour cela, il suffit d’ajouter la balise <audio> dans la page. Plusieurs attributs permettent de définir le comportement de la balise.

  • loop : permet à la musique d’être jouée en boucle.
  • autoplay : spécifie au navigateur de jouer la musique dès le chargement de la page
  • controls : ajoute à l’endroit de la balise un petit lecteur permettant de mettre en lecture ou en pause la musique.
  • width : spécifie la largeur du lecteur ci-dessus.
  • preload : permet de décrire au navigateur s’il doit précharger la musique lors du chargement de la page, c’est notamment utile pour l’utilisation d’un navigateur mobile avec lequel la bande passante est limitée

Ainsi, Il est très simple d’obtenir un petit lecteur qui permettra la lecture de la musique sur la page.

Attention cependant, tous les navigateurs ne sont pas capables de lire tous les formats audios. Afin d’éviter que votre fichier ne soit pas lu du tout, il est possible de fournir aux navigateurs plusieurs fichiers avec des formats différents, le navigateur, choisira alors celui qu’il est capable de lire.

 

La balise vidéo permet d’insérer sur une page une vidéo. Pour cela on utilise la balise <video>. Tout comme la balise audio, elle possède plusieurs attributs qui permettent de personnaliser son comportement.

  • loop : permet à la vidéo d’être jouée en boucle.
  • autoplay : spécifie au navigateur de lancer la vidéo dès le chargement de la page
  • controls : ajoute un bouton Lecture/Pause et la barre de défilement à la vidéo
  • width : spécifie la largeur de la vidéo
  • height : spécifie la hauteur de la vidéo
  • preload : permet de décrire au navigateur s’il doit précharger la vidéo lors du chargement de la page, c’est notamment utile pour l’utilisation d’un navigateur mobile avec lequel la bande passante est limitée
  • poster : cet attribut permet de définir l’image qui va être affichée tant que la vidéo n’est pas lancée. Par défaut, c’est la première image de la vidéo.

Avec tout ces éléments il possible de très facilement insérer une vidéo dans une page internet sans avoir à connaître les technologies de type Flash ou autres lecteurs.

Le même problème se pose au niveau de la compatibilité des navigateurs face à la vidéo. Ils n’ont pas tous les capacités de lire certains format de vidéo. Il est possible comme avec la vidéo de fournir au navigateur une liste de vidéo pour que celui-ci choisisse celle qu’il sera capable de lire.

htmlvideo

 

Ci dessous vous trouverez un tableau récapitulant les compatibilités entre formats audio, vidéo et les navigateurs issus du site Mozilla.org

Tableau comparatifs de la compatibilité des navigateurs par rapport au formats vidéos et audios

Compatibilité des navigateurs pour les différents formats audios et vidéos – Mozilla Contributors

 

Les canvas

Les canvas sont des zones éditables qui permettent de réaliser des dessins à l’aide des langages JavaScript et CSS. Pour cela il faut déterminer la taille de la zone qui contiendra le dessin et donner à notre balise <canvas> un identifiant. Puis le JavaScript pourra réaliser le dessin à l’aide de plusieurs fonctions.


Les canvas connaissent un véritable succès de part le fait qu’ils permettent de réaliser très rapidement beaucoup de choses et notamment des jeux en HTML5 qui ont l’avantage d’être légers et lisibles sur toutes les plates-formes.

 

Conclusion

Le HTML5 amène beaucoup de nouveaux outils permettant de simplifier l’intégration des sites web. Il permet l’allègement de pages en supprimant la nécessité de plugins supplémentaires. Les nouvelles balises structurantes permettent également d’être plus clair au niveau de la structure du site.

spacer

Laisser un commentaire