HTML vs HTML5. Quelle est la grande différence ? Si vous souhaitez vous lancer dans le développement d’interface publique ou travailler avec du code dans WordPress, vous devez connaître la différence. Cela peut être particulièrement déroutant car certaines personnes utilisent les deux termes de manière interchangeable, alors qu’il s’agit techniquement de deux choses différentes, bien qu’elles soient également liées.

Passons en revue les différences entre HTML et HTML5, la meilleure solution et ce qui a changé avec la plus grande mise à jour du langage de balisage populaire.

Qu’est-ce que le HTML ?

HTML est l’abréviation de HyperText Markup Language. Il s’agit des éléments constitutifs du web, et c’est probablement le langage de code le plus connu.

Le HTML est le langage standard utilisé pour le développement web. Il vous permet de créer la structure de base d’une page web à l’aide de petites balises appelées balises de balisage (markup tags). Par exemple, pour mettre un morceau de texte en italique, vous pouvez l’envelopper dans des balises HTML comme celles-ci :

<i>Italicized text.</i>
Exemple de balise HTML
Exemple de balise HTML

Une grande partie du HTML est également simple et lisible par l’homme, de sorte que même les non-développeurs le trouvent facile à utiliser. Pour l’importance qu’il revêt pour le World Wide Web, l’apprentissage du HTML est étonnamment facile.

Il est impossible de créer un site web sans utiliser le langage HTML. Bien qu’il existe des consctructeurs de sites web, dont WordPress, qui vous permettent de concevoir un site sans toucher au code, ils manipulent en coulisses le code HTML pour vous.

Ainsi, si vous souhaitez devenir un développeur web ou vous plonger dans des outils comme WordPress, vous devrez naturellement apprendre le HTML.

Le langage HTML est souvent associé à d’autres langages tels que CSS et JavaScript pour étendre ses fonctionnalités. Le CSS vous aide à donner du style au HTML en ajoutant des couleurs, des mises en page, etc., tandis que JavaScript est un langage de programmation plus traditionnel qui vous permet d’ajouter des fonctionnalités avancées.

Bien que ces deux langages se combinent bien avec le HTML, ils ne sont pas strictement nécessaires pour créer un site web. Le HTML l’est assurément, et c’est pourquoi il s’agit du langage web le plus important.

Qu’est-ce que le HTML5 ?

Logo HTML5
Logo HTML5 (Source: W3C)

HTML5 n’est pas un système distinct, mais plutôt la dernière version de la technologie HTML. Son prédécesseur, HTML4, a connu sa première et dernière mise à jour en décembre 1999. Le HTML5 n’est en fait pas très récent lui-même, puisqu’il est sorti il y a plusieurs années, en 2014.

Alors quelle est la grande différence ? Pourquoi tout ce battage ? Si la plupart des balises restent inchangées (après tout, il ne faut pas réparer ce qui n’est pas cassé), plusieurs d’entre elles ont été simplifiées, ce qui permet d’écrire du code beaucoup plus facilement et rapidement. Il est basé sur une norme entièrement nouvelle, et son analyse syntaxique est également complètement différente.

Contrairement aux anciennes versions de HTML, qui permettaient de créer des sites essentiellement statiques qu’il fallait agrémenter de CSS et de JavaScript, HTML5 est beaucoup plus dynamique et comprend des éléments multimédias. Il supporte nativement la vidéo et l’audio, et vous pouvez même créer des jeux ou des animations.

En d’autres termes, HTML5 est tout à fait capable de faire des choses que vous deviez auparavant faire à l’aide d’anciens outils comme JavaScript, Flash ou Silverlight. Cela signifie que votre site est plus sûr et moins ouvert aux exploits des attaquants qui tentent de s’y introduire.

Et si CSS et JavaScript sont toujours nécessaires pour créer un site web à part entière, vous ne devez plus compter sur eux pour faire quoi que ce soit de dynamique.

HTML5 n’est plus seulement un constructeur de sites web. C’est un constructeur d’applications à part entière.

Plutôt que de sortir la prochaine mise à jour sous le nom de « HTML6 », HTML5 est continuellement mis à jour comme une norme vivante qui évolue en fonction des besoins du web. Il s’agit de la dernière et de la meilleure version de cette technologie durable, et elle sera là pour longtemps encore.

HTML ou HTML5 : Peser les différences

Lorsque la plupart des gens parlent de « HTML », ils font référence à la technologie dans son ensemble, y compris sa dernière version : HTML5. Bien qu’il soit très différent à bien des égards, le HTML5 n’est en fait qu’une mise à jour soignée de l’ancienne norme.

Bien que HTML et HTML5 fassent partie du même système, la grande mise à jour a apporté plusieurs améliorations à l’ancien langage de code, le rendant encore plus efficace. Voici quelques exemples de ce qui a été ajouté.

Compatibilité

Lorsque le HTML5 est apparu, la compatibilité était une préoccupation et une raison majeure pour laquelle beaucoup ont choisi de ne pas encore mettre leur site à niveau. Si le navigateur ne savait pas comment analyser une balise HTML5, les pages pouvaient être cassées ou avoir un aspect étrange.

Le contraire est vrai : les sites web écrits selon les anciennes normes HTML4 ne fonctionneront souvent pas dans les navigateurs modernes, car ceux-ci ne prennent plus en charge les fonctions obsolètes depuis longtemps. Si vous voulez rester compatible avec les navigateurs de la plupart des gens, le HTML5 est la voie à suivre.

Bien que les anciennes versions de HTML fonctionnent bien sur des navigateurs comme Internet Explorer, ces versions obsolètes ne sont plus prises en charge ou utilisées par une majorité d’utilisateurs. La plupart des gens n’auront pas besoin de coder un site web pour des navigateurs aussi anciens, il n’est donc pas nécessaire d’utiliser HTML4.

Comme vous pouvez le voir ici, le HTML5 et la plupart de ses fonctions sont pris en charge par tous les navigateurs modernes. Ses nouvelles balises sont entièrement ou partiellement prises en charge par tous les navigateurs, à l’exception des versions 6-8 d’Internet Explorer et de Firefox 2, qui datent tous du début des années 2000 et sont rarement utilisés de nos jours.

Vérification de la prise en charge des navigateurs HTML et HTML5
Vérification de la prise en charge des navigateurs HTML et HTML5

Si tous les navigateurs modernes prennent techniquement en charge le HTML4, la prise en charge des balises obsolètes est, au mieux, inégale. Vous devriez éviter d’utiliser des normes obsolètes et passer au HTML5.

Support multimédia

L’un des principaux apports de HTML5 est la prise en charge d’éléments multimédias tels que l’audio, la vidéo, les graphiques vectoriels, les animations et les jeux.

À l’époque du web, l’ajout d’une simple animation sur votre site nécessitait généralement l’utilisation de JavaScript, de Flash ou d’une autre technologie. Aujourd’hui, vous pouvez le faire en HTML ou CSS sans vous exposer à des exploits potentiels.

Pour la vidéo et l’audio, l’intégration d’un lecteur est aussi simple que l’ajout d’une simple balise. À partir de là, vous pouvez effectuer de nombreuses configurations, comme activer la lecture automatique ou ajouter des commandes de lecture.

Lecteur audio HTML5
Lecteur audio HTML5

HTML5 permet également d’intégrer des graphiques vectoriels SVG, des images qui peuvent être redimensionnées à n’importe quelle résolution sans pixellisation. Les SVG sont de plus en plus populaires pour l’affichage de graphiques en ligne, car ils s’étirent bien pour remplir n’importe quelle taille d’écran.

Enfin, vous pouvez créer des jeux vidéo à part entière avec HTML5, surtout si vous le combinez avec JavaScript. De nombreux outils de création de jeux sont même portés en HTML5 et vous permettent d’intégrer le résultat sur votre site web.

Ce support multimédia fait de HTML5 le candidat idéal pour remplacer de nombreuses technologies dépassées, notamment Java Web Start, Silverlight et, plus récemment, Flash. Presque tout ce que vous pouvez faire avec ces systèmes peut être fait plus simplement et plus efficacement en HTML5.

SGML

Le langage HTML original (jusqu’à la version 4) était fortement basé sur la norme SGML ou Standard Generalized Markup Language.

Bien que le SGML soit censé normaliser le balisage, éliminer la confusion et qu’il ait inspiré le HTML et le XML, il est issu d’un langage créé dans les années 1960. Il est ancien et n’a donc pas été conçu en fonction des applications web modernes.

HTML5 a évolué pour ne plus se conformer à la norme SGML ; il effectue l’analyse syntaxique selon ses propres règles. Bien que ses origines soient toujours dans le SGML, et que le HTML5 ne soit qu’une extension de la technologie existante, il n’est plus conforme à ces normes.

L’un des résultats est que le traitement des erreurs est désormais beaucoup plus indulgent. Une petite erreur ne se traduira plus par un problème flagrant pour les internautes sur votre page, ni par une page qui ne se charge pas du tout.

La sémantique, ou les balises, s’est également considérablement améliorée. Auparavant, la moindre structuration de votre page nécessitait l’utilisation constante des balises <div> : <div id="header"> , <div id="menu"> , et <div class=“post”> .

En HTML5, ces codes encombrants seraient <header> , <nav> , et <div class=“post”>. Ces balises sont à la fois plus propres et plus responsives.

Plusieurs nouvelles balises ont également été introduites. Beaucoup d’entre elles ont été créées pour remplacer les divs et les frames précédemment utilisés pour structurer les pages.

La plupart des anciennes balises sont restées entièrement inchangées, de sorte que HTML5 est partiellement rétrocompatible avec les anciennes versions. Mais un document HTML4 non modifié ne sera plus analysé correctement avec les nouvelles normes.

Bien qu’il existe de nombreuses différences entre HTML et HTML5, les changements sont généralement positifs et visent à rendre le langage de balisage plus accessible.

Meilleures performances et support mobile

L’un des principaux avantages de HTML5 est qu’il est beaucoup plus rapide et beaucoup plus réactif que les itérations précédentes. À l’époque du HTML original, l’accès à l’internet par d’autres appareils que les ordinateurs n’était pas encore un rêve ; aujourd’hui, tout est accessible à partir de nos téléphones, montres et télévisions, grâce en partie à la vitesse du HTML5.

La nouvelle version a apporté de meilleures normes pour assurer un fonctionnement plus fluide des sites web sur les appareils plus petits et moins puissants. De nombreux problèmes de performance dépendront encore de vous et de la qualité de votre code. Toutefois, la mise à jour HTML5 a permis de régler de nombreux problèmes liés au langage HTML.

Par exemple, HTML5 prend en charge le multithreading avec JavaScript Web Workers, ce qui permet au processeur de votre appareil d’utiliser une plus grande partie de sa puissance pour exécuter les scripts. Le code qui ralentissait une page s’exécutera désormais de manière transparente.

La conception de sites web responsives est également beaucoup plus facile avec HTML5. De nombreux éléments non responsives de HTML4, tels que les divs, ont été remplacés par des balises de structure qui fonctionnent mieux sur les mobiles.

Les Frames ont également été supprimées car elles posaient des problèmes d’utilisabilité et d’accessibilité. Bien qu’elles soient toujours prises en charge, elles ont été dépréciées et ne doivent pas être utilisées, sauf si vous avez des raisons de travailler avec une technologie obsolète.

Bien qu’il n’existe pas de remplacement direct des frames en HTML5, il est recommandé d’utiliser des éléments CSS tels que les flex boxes ou les iframes (qui sont toujours pris en charge dans HTML5) pour remplacer l’ancienne fonctionnalité.

De meilleurs contrôles des formulaires

Les nouveaux contrôles de formulaire équivalent à un nouveau niveau de contrôle sur votre site. Bien que cela puisse sembler une petite fonctionnalité, cela signifie qu’il faut compter sur une technologie externe de moins pour créer un formulaire fonctionnel.

Exemple de formulaire HTML 5
Exemple de formulaire HTML 5

À l’origine, le HTML ne prenait en charge que les types de saisie suivants : texte, mot de passe, masqué, case à cocher/radio et téléversement de fichier. Bien que cela soit suffisant pour créer un formulaire de saisie de base, il y a tellement plus de choses que vous pouvez maintenant faire avec les types d’entrée HTML5.

Les nouveaux ajouts comprennent les entrées suivantes : e-mail, numéro de téléphone, URL, boîte de recherche, diaporama, numérique, sélecteur de date et d’heure et sélecteur de couleur.

Cette gamme diversifiée de types de saisie vous permet de créer des formulaires plus performants, capables d’accepter davantage de types de contenu, avec une validation incluse pour s’assurer qu’ils sont corrects. Consultez la liste complète des entrées HTML pour plus d’informations.

Stockage sur le web

En ce qui concerne le stockage sur le web, le HTML4 et les versions inférieures supportent essentiellement les cookies et peu d’autres choses. Le stockage d’informations autres que le suivi de base des utilisateurs dans un minuscule cookie de 4 kilo-octets était pratiquement impossible.

D’autre part, le stockage local vous permet de stocker 5 à 10 mégaoctets de données selon le navigateur. Cela vous permet d’enregistrer des informations côté client sur les sessions précédentes, les données d’accès hors ligne, les personnalisations, etc. En outre, le stockage local n’est pas effacé automatiquement, contrairement aux cookies.

Mode sombre activé dans la personnalisation de WordPress
Mode sombre activé dans la personnalisation de WordPress

Un exemple de ce que vous pouvez faire avec le stockage local est d’enregistrer la préférence d’un utilisateur pour le thème clair ou foncé de votre site, afin qu’il continue à voir votre site comme il le préfère lors de sa prochaine visite. Vous pouvez également enregistrer les préférences des utilisateurs à l’aide de cookies, mais le navigateur les efface inévitablement au bout d’un certain temps.

HTML5 prend en charge le stockage local grâce à l’API de stockage web. Il prend également en charge le stockage dans une base de données web SQL, le stockage dans une base de données indexée et même l’accès aux fichiers avec File API. Nombre de ces éléments s’intègrent à JavaScript via d’API. Avant cela, il était soit extrêmement difficile de le faire, soit, dans certains cas, tout simplement impossible ou extrêmement difficile à faire.

Lequel est le meilleur : HTML ou HTML5 ?

Si vous voulez apprendre à coder, vous devez absolument éviter d’utiliser des normes obsolètes. Le HTML5 est la version la plus récente du HTML et devrait toujours être utilisé de préférence aux anciennes versions du langage.

Comme indiqué ci-dessus, HTML5 améliore plusieurs aspects de HTML4 qui étaient obsolètes et difficiles à utiliser. En outre, HTML5 peut faire beaucoup de choses en mode natif, alors que HTML4 repose entièrement sur des systèmes obsolètes depuis longtemps, comme Silverlight, Java Web Start et Flash.

Si le HTML5 ne s’affiche pas toujours correctement sur les super vieux navigateurs et systèmes d’exploitation (comme Internet Explorer ou les anciennes versions des téléphones portables), ces plateformes sont extrêmement dépassées et ne sont plus guère utilisées. Il n’y a plus de bonnes raisons d’utiliser des versions obsolètes de HTML au lieu des normes modernes.

Malheureusement, il y a beaucoup d’informations sur Internet et dans les livres sur les anciennes versions de HTML. Chaque fois que vous consultez un guide ou que vous apprenez dans un cours ou un livre, assurez-vous qu’il parle de HTML5 et qu’il a été publié ou mis à jour après 2014. Il est inutile d’apprendre des normes obsolètes datant de 1999.

Comment convertir du HTML en HTML5

Si vous avez un site web plus ancien, vous devez le mettre à jour. Il n’y a malheureusement aucun moyen de procéder à une conversion totale sans faire de travail manuel.

La meilleure chose à faire est de lire la spécification HTML5 (ou de suivre un cours de HTML si vous êtes totalement novice dans ce langage) et de vous familiariser avec les changements. Après cela, vous pouvez réécrire le code et ajouter les nouvelles fonctionnalités ajoutées en HTML5.

Consultez ce guide sur la migration de HTML4 à HTML5. Il couvre en détail les modifications manuelles que vous devez apporter au code.

Vous pouvez également essayer ce convertisseur XHTML vers HTML5, mais veillez à revoir votre code manuellement ou à l’insérer dans un validateur avant de l’importer sur un site réel.

Heureusement, le HTML5 est essentiellement du nouveau contenu. Il y a quelques balises dépréciées que vous devrez remplacer, mais à part cela, la mise à jour du code n’est généralement pas un gros effort, à moins que votre site ne dépende fortement d’une technologie dépréciée comme les frames.

Résumé

HTML et HTML5 ne sont que deux parties de la même technologie, bien qu’ils aient des significations légèrement différentes. HTML fait référence au langage de balisage dans son ensemble, souvent à la version la plus récente, tandis que HTML5 en est la dernière mise à jour.

Si vous cherchez à apprendre le HTML, il est important d’utiliser la dernière édition : HTML5. Il est meilleur à tous points de vue, et même si cela implique de convertir manuellement une grande partie de l’ancien code, cela en vaut vraiment la peine.

Le HTML5 a maintenant plusieurs années d’existence et, en tant que norme de vie du langage dans son ensemble, il ne cessera d’être mis à jour pour fonctionner avec le web moderne.

Brenda Barron

Brenda Barron is a journalist and copywriter from California. She contributes to sites like WPMU DEV, Envato, and Torque.