Introduction :
Les termes HTML, HTML5 et XHTML sont fréquemment utilisés dans la conception et le développement de sites Web. La plupart des personnes qui s'initient à la conception de sites Web trouvent souvent ces termes déroutants et ne savent pas lequel de ces trois langages elles doivent apprendre. Cette confusion est compréhensible car tous ces langages sont des langages de balisage et ont essentiellement le même objectif. Pour dissiper cette confusion, examinons en détail leurs différences.
Obectif :
Montrer les différences qui existent entre les trois lagages de balisage HTML, HTML5 et XHTML.
Prérequis :
Aucune connaissance en programmation Web n'est nécessaire pour comprendre cet article.
Le cours :
Les langages de balisage : De quoi s'agit-il ?
Les langages de balisage sont les outils essentiels nécessaires à la création d'une page Web. Chaque page Web contient du texte, des images ou toute autre sorte de données structurées présentées à l'utilisateur. La présentation des informations textuelles ou visuelles à l'utilisateur définit le balisage d'un site Web. Lors de la conception d'une page Web, nous pouvons avoir besoin de différentes polices pour différents mots, de différentes couleurs pour différents types de texte, etc. Nous avons également besoin d'une universalité dans le balisage, c'est-à-dire que la page Web doit avoir le même aspect quel que soit le navigateur. Il est donc nécessaire de disposer d'un langage de balisage standard par lequel les pages Web peuvent présenter des informations à l'utilisateur.
Les langages de balisage utilisent des balises pour déterminer le format de présentation des données. Les balises sont utilisées pour représenter les données de manière structurée et organisée. Des exemples courants de balises sont les balises d'en-tête header, les balises de corps body, etc. Le langage de balisage le plus courant pour les pages Web est le HTML, qui a été conçu par Tim Berners-Lee, l'inventeur du World Wide Web.
Le HTML, qui signifie HyperText Markup Language, a été le premier langage de balisage basé sur Internet utilisé pour les pages Web. Toutefois, le HTML a rapidement évolué et, avec la publication de ses versions ultérieures, il est devenu une sorte de norme pour les langages de balisage. Bien que le HTML soit plus une norme qu'un langage unique, il est communément appelé HTML lui-même jusqu'aux versions allant jusqu'à HTML4. Cela est dû à la nécessité de le différencier des changements significatifs apportés par HTML5, qui est la dernière version de HTML.
Toutefois, avant la sortie du HTML5, le World Wide Web Consortium (également connu sous le nom de W3C) a commencé à développer une extension du HTML basée sur le format XML afin de résoudre certains problèmes de compatibilité entre navigateurs. Le XML est une autre norme de langage de balisage très similaire au HTML, mais un peu plus stricte que ce dernier en matière de gestion des erreurs et de formatage. Le langage résultant a été nommé XHTML, qui signifie eXtensible HyperText Markup Language. Il est très similaire au HTML4 mais introduit des règles plus strictes.
Différences entre HTML, XHTML et HTML5
Explorons maintenant certaines de ces différences plus en détail.
HTML vs HTML5
Un groupe connu sous le nom de WHATWG a développé le HTML5, conçu pour améliorer les versions précédentes du HTML et résoudre certains problèmes de compatibilité entre navigateurs. Nous utiliserons le terme "HTML" pour désigner les versions antérieures à HTML5 du langage HTML. Les principales différences entre HTML et HTML5 sont classées dans le tableau ci-dessous :
|
Critères de comparaison
|
HTML
|
HTML5
|
|
Qu'est-ce que c'est?
|
Hypertext Markup Language, le langage de base pour le développement de pages web. |
Une nouvelle version du HTML, offrant de nouvelles fonctionnalités pour interagir avec les technologies de l'internet pour structurer et présenter le contenu. |
|
Prise en charge des médias
|
Il n'offre aucun support pour la vidéo et l'audio quelle que soit la langue. |
Offre un support pour l'audio et la vidéo tels qu'ils sont intégrés dans la langue. |
| Support géographique |
Le processus de localisation de l'utilisateur est laborieux et d'autant plus compliqué si l'utilisateur est connecté sur des appareils mobiles. |
Le langage utilise l'API de géolocalisation JavaScript qui permet d'identifier l'emplacement de tout utilisateur accédant au site Web. |
|
Stockage
|
Utilise la mémoire cache du navigateur comme stockage temporaire. |
Équipé de plusieurs options de stockage comme le stockage web, la base de données SQL et le cache des applications. |
|
Communication
|
La communication entre le client et le serveur se fait à l'aide du streaming et du long pooling car il n'offre pas la prise en charge des sockets. |
Le langage permet une communication en full-duplex entre le client et le serveur. |
| Compatibilité avec les différents navigateurs |
Comme il est ancien, tous les navigateurs le supportent. |
Compatible avec quelques navigateurs seulement, car il introduit de nouvelles balises et de nouveaux éléments. |
|
Prise en charge graphique
|
Des outils tiers sont nécessaires pour fournir un support graphique vectoriel. |
La prise en charge des graphiques vectoriels est assurée par défaut, car le langage intègre les fonctions canvas et SVG. |
|
Threading
|
L'exécution de JavaScript et de l'interface du navigateur dans le même thread entraîne un problème de performance. |
Il prend en charge l'API Web JavaScript, ce qui permet à JavaScript et à l'interface du navigateur de s'exécuter sur des threads différents. |
| Gestion des erreurs |
Pas capable de gérer une syntaxe inexacte ou toute autre erreur |
Capable de gérer une syntaxe incorrecte ou toute autre erreur. |
En bref, le HTML5 n'est qu'une version améliorée du HTML avec des caractéristiques et des fonctionnalités supplémentaires.
HTML vs XHTML
Le XHTML a été développé comme une extension du HTML. Il n'y a pas beaucoup de différences entre HTML4 et XHTML. Cependant, XHTML est une version plus stricte de HTML4. Les principales différences entre HTML et XHTML sont les suivantes :
|
Critères de comparaison
|
HTML
|
XHTML
|
|
Signification
|
Hypertext Markup Language
|
Extensible Hypertext Markup Language
|
| Sensibilité à la casse |
Il n'est pas sensible à la casse. |
Il est sensible à la casse.
|
|
Media Type
|
text/html
|
application/xhtml+xml
|
| Application |
Application du SGML |
Application du XML |
|
Format
|
Format de fichier de document. |
Il a pour format le langage de balisage. |
| Analyseur |
Nécessite un analyseur syntaxique spécifique HTML souple. |
Doit être analysé avec un analyseur syntaxique XML standard. |
|
Contrainte
|
Il n'y a pas de contraintes de préoccupation bien formées. |
Il n'y a pas de contraintes de préoccupation bien formées. |
Si les différences ci-dessus sont les plus importantes, il existe également des différences très subtiles, mais il est très rare de les rencontrer. Vous pouvez toujours consulter la documentation de XHTML pour plus d'informations. En résumé, le XHTML a été conçu pour résoudre certains problèmes du HTML, en intégrant certaines caractéristiques du XML.
HTML5 vs XHTML
Puisque XHTML et HTML sont largement identiques, les différences entre XHTML et HTML5 sont les mêmes que celles entre HTML4 et HTML5. Toutefois, voici quelques-unes des différences les plus subtiles entre HTML5 et XHTML :
| Critères de comparaison |
XHTML
|
HTML5
|
|
Sensibilité à la casse
|
Sensible à la casse
|
Pas sensible à la casse
|
|
Développé par
|
World Wide Web Consortium (W3C)
|
Collaboration entre Web Hypertext Application Technology Working Group (WHATWG) et le World Wide Web Consortium (W3C).
|
| Caractéristiques et avantages |
Voici quelques-unes de ses caractéristiques :
- Une combinaison de HTML et de XML
- Il définit une norme pour les pages Web qui peut être représentée par tous les navigateurs compatibles XHTML.
- Les pages XHTML peuvent être facilement éditées et formatées et permettent une maintenance aisée.
- Il donne un format bien structuré et cohérent qui peut être rapidement traité et analysé par tous les navigateurs Web.
- Les documents XHTML peuvent utiliser des applications telles que des applets et des scripts. Ces applications dépendent du modèle d'objet du document HTML ou du modèle d'objet du document XML. Les documents peuvent être visualisés comme édités et validés à l'aide d'un outil XML.
|
Les principales fonctionnalités prises en charge par HTML5 sont les suivantes :
- Glisser-déposer : permet aux utilisateurs de glisser-déposer des éléments d'un emplacement à un autre sur la même page Web.
- Géolocalisation : Permet aux utilisateurs de partager leur emplacement sur diverses applications Web.
- Server-Sent Events (SSE) : Cette fonction de HTML5 permet aux événements de circuler vers le navigateur Web à partir du serveur Web. Ces événements sont appelés événements envoyés par le serveur (Server sent events).
- Nouveaux éléments : Plusieurs éléments tels que <header>, <footer> et <section> ont été ajoutés.
- Microdonnées : En utilisant cette facilité, les utilisateurs créent leurs vocabulaires au-delà de HTML5 et étendent les pages web avec la sémantique personnalisée.
|
|
Syntaxe
|
Lorsque vous écrivez du code pour le XHTML, tenez compte des points suivants :
Les balises doivent être imbriquées correctement.
Tous les attributs et balises XHTML doivent être en minuscules.
Tous les documents XHTML doivent commencer par la déclaration DOCTYPE.
L'utilisateur doit remplacer un attribut name par un attribut id.
Désapprouvez l'attribut language de la balise script.
|
HTML5 fournit :
- Les noms de balises en majuscules
- Les valeurs des attributs sont facultatives
- La fermeture des éléments vides est facultative
- Les guillemets sont facultatifs pour les attributs.
- Fournit des balises comme :
- Balises de document comme :
|
|
Attributs
|
Quelques attributs associés au XHTML sont présentés ci-dessous :
- Attributs de base : class, id, style et title.
- Attributs de langue : indique la langue utilisée.
Il possède également des attributs propriétaires de Microsoft, notamment accesskey, language, tabindex, hidefocus, etc.
|
Quelques fonctions sont énumérées ci-dessous :
Align : permet d'aligner les balises à droite, à gauche ou au centre.
Hidden (caché) : Spécifie si l'élément doit être caché ou non.
Itemprop : Utilisé pour grouper les éléments
Tabindex : Spécifie l'ordre de tabulation de tout élément
Data-XXXX : Aide à personnaliser les attributs, et permet à l'auteur de définir ses attributs.
|
|
Evennements
|
- Le XHTML fournit des éléments comme <body> et<frameset> ; de tels éléments peuvent être utilisés pour déclencher Javascript.
- Il dispose d'événements de niveau <form> qui se déclenchent lorsque l'élément change, qu'un formulaire est soumis, et plus encore.
- Il prend également en charge les événements liés au clavier.
|
HTML5 prend en charge les gestionnaires d'événements en Javascript et permet aux utilisateurs de les spécifier comme valeur de l'attribut de la balise event. Il prend également en charge des événements tels que le chargement du document, le focus de la fenêtre, etc. |
Conclusion
En conclusion, tous les trois sont des langages de balisage avec juste quelques caractéristiques présentes dans chacun d'eux qui ne sont pas présentes dans les autres. Alors que XHTML a été conçu pour être une meilleure version de HTML4 en intégrant certaines caractéristiques de XML, HTML5 s'est avéré être bien meilleur que les deux et est de loin le langage de balisage le plus utilisé aujourd'hui en raison de l'ajout de nombreuses caractéristiques essentielles. L'essentiel est que tous ces langages ne sont que des versions différentes de la norme HTML des langages de balisage, mais avec des styles et des caractéristiques syntaxiques différents. Si vous débutez dans la conception et le développement de sites Web, nous ne recommandons pas le HTML4 et le XHTML, et il serait judicieux d'apprendre d'abord le HTML5 en raison de sa compatibilité accrue et de son utilisation répandue.
