Le développement web est en perpétuelle évolution. Du fait, HTML5 occupe une place prépondérante en tant que langage fondamental et incontournable. Depuis son introduction officielle le 28 octobre 2014, HTML5 a révolutionné la façon dont les sites Web sont créés et offre une multitude de fonctionnalités avancées qui améliorent l’expérience utilisateur.
L’évolution des balises de base dans HTML5
HTML5 a fait évoluer drastiquement les balises de base d’un document HTML. Ces balises sémantiques fournissent une structure plus claire et significative au contenu d’une page web, améliorant par conséquent l’accessibilité, l’indexation par les moteurs de recherche et la compréhension globale du document.
| <header> : balisage de l’en-tête |
Cette nouvelle balise permet de définir l’en-tête d’un document. Il est généralement utilisé pour inclure le titre, le logo, la navigation principale, et d’autres informations. Cette balise permet aux moteurs de recherche et aux navigateurs de mieux comprendre la structure de la page et d’améliorer l’accessibilité. |
|---|---|
<nav> : navigation |
Cet élément est utilisé pour encapsuler la navigation principale d’un document, en regroupant des menus, des listes de liens ou des barres de navigation. Cela facilite la distinction de la navigation des autres éléments de la page |
<section> : la division sémantique |
Il permet de diviser une page web en sections thématiques ou en groupes de contenus. Cela facilite l’organisation logique du contenu et rend la structure plus claire pour les développeurs et les lecteurs assistés par des technologies d’assistance. |
<article> : du contenu indépendant |
Il est utilisé pour encapsuler du contenu indépendant et autonome. Cela peut inclure des articles de blog, des actualités, commentaires, etc. |
<footer> : le pied de page |
Ce nouvel élément est utilisé pour définir le pied de page d’un document ou d’une section. Il contient généralement des informations telles que les coordonnées, les liens de contacts, les droits d’auteur, les crédits, etc. |
À quoi servent les formulaires ?
Ils sont un élément essentiel de nombreux sites web. Ils permettent aux utilisateurs d’interagir avec de nombreux éléments et de soumettre des informations.
| Types d’entrées | De nouveaux types d’entrées ont été implémentés (‘email’, ‘url’, ‘number’, etc) permettant aux navigateurs de valider automatiquement les données saisies et de fournir un message adapté si les informations sont incorrectes. |
|---|---|
| Attributs de validation | HTML5 a introduit de nouveaux attributs de validation permettant de contraindre les données saisies par l’utilisateur. Par exemple, l’attribut ‘required’ indique que le champ est obligatoire pour l’envoi du formulaire. |
| Validation côté client | Auparavant, la validation impliquait le plus souvent l’utilisation de Javascript, mais avec HTML, les navigateurs modernes peuvent valider automatiquement les formulaires. |
| Saisie automatique | HTML5 peut permettre à l’utilisateur de remplir des formulaires par rapport aux informations précédemment saisies. |
| Contrôles des formulaires | Les formulaires améliorent à présent l’expérience utilisateur grâce à de nouveaux contrôles, comme ‘datalist’ qui permet de proposer des suggestions automatiques pendant la saisie. |
HTML5 et les medias
Des évolutions significatives ont été apportées en matière d’intégration et de manipulation de médias dans les sites web.
| Intégration de vidéos | HTML5 introduit l’élément <video> qui permet d’intégrer des vidéos directement dans les pages web sans avoir besoin de plugins externes tels que Flash. |
|---|---|
| Intégration d’audio | Similaire à l’élément précédent, <audio> permet d’intégrer directement des pistes sonores dans les pages web. |
| Création de graphiques | L’élément <canvas> permet la manipulation de graphiques, d’animation et de rendus dynamiques en utilisant Javascript. |
D’autres fonctionnalités comme l’API média et l’élément <track> permettent également une gestion plus riches concernant les médias intégrés aux sites web.
Autres fonctionnalités avancées
Outre les améliorations que nous venons d’évoquer, HTML5 propose également des fonctionnalités intéressantes :
| Stockage local | HTML5 introduit des API de stockage local qui permettent aux sites web de stocker des données localement sur le navigateur de l’utilisateur. Cela offre une alternative aux cookies pour le stockage de données persistantes. |
|---|---|
| Connectivité | L’API WebSocket est une fonctionnalité qui permet une communication bidirectionnelle en temps réel entre le client et le serveur. Contrairement aux appels HTTP traditionnels, cela ouvre la voie à des applications web en temps réel comme des salons de tchat, des dashboards, des jeux multijoueurs, etc. |
| Géolocalisation | L’API Geolocation permet aux sites web d’accéder à la position géographique de l’utilisateur via le navigateur. |
Conclusion
HTML5 a révolutionné la façon dont les sites web sont aujourd’hui conçus. Les sites web modernes sont maintenant beaucoup plus dynamiques et esthétiques, ce qui était auparavant impossible avec les anciennes moutures de HTML.
