HTML 5 vs XHTML 2
Deux approches, deux standards
Eden Turbide
De 2004 à 2009, deux standards HTML concurrents sont en développement : le HTML 5 créé par le WHATWG et le XHTML 2 conçu par le W3C. Les groupes partagent la même mission (la compatibilité et l’interopérabilité), mais proposent des solutions divergentes. Le présent texte s’intéresse à l’impact de leurs approches opposées sur l’évolution du HTML à travers l’analyse de quelques différences entre le HTML 5 et le XHTML 2.
,WHATWG,W3C,XHTML,XML,HTML

Introduction

De 2004 à 2009, deux standards concurrents sont développés pour remplacer le HTML 4 et le XHTML 1 en tant que format pour représenter les pages web. D’un côté, le XHTML 2, développé par le World Wide Web Consortium (W3C), qui souhaite faciliter le travail futur en recherchant une certaine pureté théorique. De l’autre, le HTML 5, développé par le Web Hypertext Application Technology Working Group (WHATWG), qui désire assister les développeurs dans le présent en prenant en considération leur expérience concrète. Ce texte s’intéresse à l’impact de ces deux approches opposées sur le développement d’un standard – le HTML – à travers l’analyse de quelques différences entre le HTML 5 et le XHTML 2.

Le HTML

Le HTML (HyperText Markup Language) est un langage de balisage créé par Tim Berners-Lee à partir du langage de structuration des documents normalisé SGML (Standard Generalized Markup Language) (Mille 2014). C’est un format ouvert, c’est-à-dire que ses spécifications sont accessibles à tous1.

La description sémantique

Le HTML opère une distinction entre le fond et la forme (Boulétreau et Habert 2014). En effet, il est descriptif, en ce sens où il décrit le contenu pour que les navigateurs puissent l’interpréter, puis le représenter sous forme de page web. La description est sémantique et ne prend pas en considération la mise en forme. Ainsi, le contenu n’est pas lié à une apparence donnée et peut s’adapter, par exemple, selon l’écran d’affichage (p. ex., ordinateur, tablette, cellulaire). À noter cependant, le HTML est souvent utilisé conjointement aux feuilles de style en cascade (CSS : Cascading Style Sheets) pour lui conférer une présentation précise.

Le balisage

Pour décrire, le HTML emploie des balises ouvrantes (<>) et fermantes (</>). Ces dernières contiennent des éléments (« HTML Elements » s. d.) et des attributs (« HTML Attributes » s. d.) qui viennent spécifier la nature du contenu encadré. Par exemple :

<abbr title="HyperText Markup Language">HTML</abbr>

Ici, l’élément <abbr> (« HTML abbr tag » s. d.) nous dit que le contenu « HTML » est une abréviation (abbreviation en anglais) et l’attribut <title> nous précise qu’elle a la valeur « HyperText Markup Language ».

La structuration hiérarchique

Le HTML décrit les contenus à l’aide de balises emboîtées qui déterminent la structure hiérarchique du document. De base, un document contient trois boîtes : le prologue et les éléments racines <head> (en-tête) et <body> (corps du texte). D’autres boîtes formées de balises s’y insèrent et se suivent selon un ordre logique. Voici un document HTML dans sa forme la plus simple (« HTML Elements » s. d.) :

<!DOCTYPE html>
  <html>

  <head>
  <title>Titre de la page</title>
  </head>

  <body>
  <h1>Titre de premier niveau</h1>
  <p>Texte d’un paragraphe</p>
  </body>

  </html>

Outre le prologue qui déclare le type du document (p. ex., <html>), on a un document html dans lequel s’emboîte les éléments racines <head> et <body>. Dans le <head>, on retrouve l’élément <title>. Dans le <body>, on retrouve un <h1> et un <p>. Les deux éléments sont logiquement à l’intérieur du corps du texte et sont donc entre les balises ouvrantes et fermantes du <body>. Le <h1> précède le <p>, puisqu’il signale le titre du paragraphe, qui apparaît nécessairement avant celui-ci.

La petite histoire du HTML

La création du HTML

En 1989, Tim Berners-Lee formule les principes fondateurs du World Wide Web2, cette « toile d’araignée mondiale » bâtie sur Internet qui relie les hypertextes (pages web) entre elles grâce à des hyperliens (Magué 2014). En 1990, le langage de balisage HTML est développé par le même homme pour permettre la représentation des pages web (Mille 2014).

En 1993, l’Internet Engineering Task Force (IETF) dont fait alors partie Berners-Lee publie la première proposition de normalisation du HTML3. Quand la draft expire au début de l’année 1994, l’IETF crée un HTML Working Group, dont le travail mène en 1995 à la première version standardisée de HTML, HTML 2 (« HTML » 2020).

Le W3C

L’IETF met officiellement fin à son groupe de travail en 1996 (« HTML » 2020). Le développement de la norme HTML passe donc entre les mains du W3C. L’organisme à but non lucratif est fondé en octobre 1994 à l’initiative de Tim Berners-Lee afin de maintenir les standards du Web, ce qui inclut évidemment le HTML. Les évolutions HTML 3 (début 1997) et HTML 4 (1997-2000) sont développées exclusivement par le W3C.

Après le HTML 4 ne vient pas le HTML 5, mais le XHTML 1 en 2000, une variation du HTML 4 qui se base sur la syntaxe du métalangage XML (Extensible Markup Language), d’où son nom (XML + HTML).

Le W3C vs le WHATWG

En 2002, le W3C commence le développement de XHTML 2 (Sire 2017).

En 2004, Ian Hickson, ingénieur pour Netscape puis Opera, suggère de former un groupe au W3C pour discuter de la possibilité de développer une nouvelle version du HTML, notamment pour combler le vide laissé par Flash4 en ce qui concerne les fonctions d’animation et d’interactivité. Tim Berners-Lee refuse, préférant se concentrer sur le XHTML 2.

En conséquence, Hickson fonde la même année le WHATWG avec des membres d’Apple, de Mozilla et d’Opera, vite rejoints par Google en 2005. Le groupe débute de son côté le développement du futur HTML 5.

Jusqu’en 2009, année où le XHTML 2 est complètement abandonné – notamment en raison de dysfonctionnements et de controverses – au profit du HTML 5, il y a donc deux standards concurrents en développement.

Voyons en quoi les philosophies opposées de Hickson et de Berners-Lee, du WHATWG et du W3C, ont influé sur l’évolution du HTML.

Le HTML 5 : conçu pour le présent

Développé par le WHATWG en collaboration avec le W3C, le HTML 5 est le standard actuel pour la représentation des pages web depuis 2014 (Boulétreau et Habert 2014). C’est toutefois en 2007 que sont formulés pour la première fois ses principes (« HTML Design Principles » 2007).

La compatibilité descendante et ascendante

Le HTML 5 adopte une approche pragmatique; il pense avant tout à l’utilisateur actuel. En ce sens, le WHATWG conçoit pour le présent. Dans cette lignée, le WHATWG se préoccupe tout autant de la compatibilité du HTML 5 avec les outils actuels (compatibilité descendante ou rétrocompatibilité5) que de la compatibilité avec les outils à venir (compatibilité ascendante6).

C’est pourquoi, d’une part, le groupe préconise l’abandon des versions numérotées, qui implémentent un grand nombre de changements d’un seul coup, au profit de l’adoption d’un « standard vivant » (Living Standard), qui fait des modifications et des ajouts au fur et à mesure que la communauté en manifeste le besoin (« Hypertext Markup Language » 2020). Une évolution en douceur et constante du format garantit sa compatibilité avec ses « versions » (non numérotées) antérieures et ultérieures, puisque les variations entre elles sont relativement mineures (« HTML Design Principles » 2007).

D’autre part, le HTML 5 assure l’interopérabilité en étant indulgent envers les erreurs qui seront inévitablement commises par les développeurs. En étant tolérant, les versions passées pourront supporter les nouvelles fonctions et les versions futures les fonctions désuètes. Sinon, par indulgent, il faut comprendre qu’une page html s’affiche toujours même si :

Elle ne comporte pas de déclaration du Document Type Definition (DTD) (« HTML Elements Valid DOCTYPES » s. d.).

<!DOCTYPE html>

Les éléments <html>, <head>, <title> et <body> ne sont pas tous spécifiés (les fureteurs les infèrent dans ce cas).

<!DOCTYPE html>

  <head>
  <title>Titre de la page</title>
  </head>
  <body>
  </body>

Une balise est mal emboîtée.

<strong><em>Texte</strong></em>

Un élément n’est pas refermé (« HTML Elements » s. d.).

<p>Paragraphe

Les éléments et les attributs sont écrits en majuscules (non sensible à la casse) (« HTML Elements » s. d.).

<body>
  <P>Paragraphe </P>
  </body>

Les guillemets anglais qui doivent encadrés la valeur d’un attribut ont été oubliés (« HTML Attributes » s. d.).

<img src=NomDeLaPhoto.png alt=Représentation par écrit de la photo>

Un attribut est minimisé, c’est-à-dire que la valeur d’un attribut n’a pas été spécifiée.

<option selected> plutôt que <option selected="selected">

L’expérience concrète

Le HTML 5 tient compte dans son design des pratiques répandues chez les développeurs. Par exemple, bien que les éléments <b> et <i> pour mettre du texte en gras ou en italique relèvent de la présentation et contreviennent donc à l’idée d’une séparation entre le fond et la forme, le HTML 5 les conservent puisqu’ils sont couramment utilisés. En effet, « it is better to give them good default rendering for various media including aural than to try to ban them » (« HTML Design Principles » 2007).

Aussi, le standard favorise les solutions simples. Par conséquent, un élément, un attribut ou autre qui fonctionne sera préférablement gardé tel quel, même s’il pourrait être raffiné ou que son appellation n’est pas strictement représentative de son usage.

Pour cette raison, aucune modification n’a été apportée à l’élément <p> pour qu’on puisse y emboîter, par exemple, des éléments de liste (<ol> pour ordered list; <ul> pour unordered list; <li> pour les items de la liste).

<p>Début du paragraphe</p>
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  <p>Fin du paragraphe</p>

Ici, bien que la liste fasse théoriquement partie du paragraphe, ce dernier doit être divisée en 3 boîtes (<p> </p>; <ul> </ul>; <p> </p>) plutôt que de comporter une boîte <p> dans laquelle il y aurait une boîte <ul> (<p><ul> </ul></p>). On maintient cette façon de faire, car les développeurs s’en accommodent parfaitement bien.

De même, l’élément <hr> (pour horizontal rule) (« HTML hr tag » s. d.) est conservé tel quel même si son abréviation peut porter à confusion. Bien qu’il peut être mépris pour un élément de présentation (pour faire une ligne de séparation) plutôt que structurel (pour effectuer un changement thématique), le <hr> marche comme il est.

Selon la même logique, le HTML 5 maintient les balises numérotées pour les niveaux de titre (<h1> à <h6>). Ceux-ci peuvent ainsi être spécifiés même si un développeur n’utilise pas le nouvel élément <section> (« HTML5 Differences from HTML4 » 2014) ou d’autres éléments structurels.

<body>
  <h1>Titre de niveau 1</h1>
  <p>Paragraphe d’introduction générale</p>
  <p>Paragraphe d’introduction à la section</p>
  <h2>Titre de niveau 2</h2>
  <p>Paragraphe</p>
  <h2>Titre de niveau 2</h2>
  <p>Paragraphe</p>
  </body>

Le XHTML 2 : conçu pour le futur

Le XHTML est un HTML qui adopte la syntaxe XML. Le XML est un sous-ensemble du SGML à la syntaxe moins complexe, mais plus stricte. Le format est entre autres :

L’extensibilité et la compatibilité ascendante

Avec le XHTML 2, le W3C souhaite se concentrer sur l’extensibilité (W3C s. d.) (Pemberton 2009), soit la capacité et la facilité d’un système à s’adapter lorsqu’on ajoute de nouvelles composantes8. Ainsi, moins un système est affecté par une modification ou un ajout, plus il est considéré comme extensible. On peut donc dire que le W3C, avec ce standard, conçoit surtout pour le futur. C’est dans cette optique qu’il faut envisager le XHTML 2 et les objectifs de son design (« XHTML™ 2.0 - Introduction » 2010).

Dans cet ordre d’idées, le W3C privilégie la compatibilité ascendante. Afin d’obtenir éventuellement le format le plus extensible possible, l’organisme propose une révolution du standard. Comme les changements apportés par le XHTML 2 sont assez radicaux, le standard n’est pas rétrocompatible avec les versions précédentes de HTML. Selon le W3C, ce n’est pas un problème, puisque le langage XML peut être lu par la majorité des fureteurs (plus de 95 % en 2010). Ainsi, le XHTML 2 devrait fonctionner de facto avec la plupart des outils.

Le but est d’assurer l’interopérabilité future en forçant les développeurs à produire des documents « bien formés ». En effet, le XML est strict, c’est-à-dire qu’il n’autorise pas les erreurs. En conséquence, un document xhtml ne s’affichera que s’il respecte à la lettre les règles suivantes (W3C s. d.) :

La déclaration du Document Type Definition (DTD) de même que l’attribut xmlns sont obligatoires.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">

Les éléments <html>, <head>, <title> et <body> sont obligatoires.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>
  <title>Titre de la page</title>
  </head>

  <body>
  </body>

  </html>

Les balises doivent être correctement emboîtées.

<strong><em>Texte</em></strong>

Un élément ouvert doit toujours être refermé, y compris les éléments vides9.

<p>Paragraphe</p>

Les éléments et les attributs doivent absolument être en minuscules.

<body>
  <p>Paragraphe</p>
  </body>

La valeur d’un attribut doit toujours être spécifiée entre des guillemets anglais.

<img src="NomDeLaPhoto.png" alt="Représentation par écrit de la photo">

La minimisation d’attribut est interdite, c’est-à-dire qu’il faut toujours spécifier la valeur d’un attribut (même si le nom de l’attribut et de la valeur est le même).

<option selected="selected">

La pureté théorique

Afin d’atteindre ses objectifs, le XHTML 2 recherche la pureté théorique afin d’obtenir éventuellement un format idéal et donc définitivement stable (Sire 2017). Par exemple, il élimine tous les éléments de présentation, ce qui inclut notamment le <b> et le <i>, le tout pour une séparation complète entre le fond et la forme (« XHTML™ 2.0 - Introduction » 2010). À présent, tout ce qui relève de l’apparence est l’affaire des feuilles de style CSS.

Le XHTML 2 effectue de nombreux changements pour permettre une description plus pointue de la structure et de la sémantique d’un document. Ainsi, des éléments, des attributs et des fonctions sont modifiés/ajoutés ou renommés pour une plus grande précision.

Par exemple, l’élément <p> permet maintenant d’y emboîter des tableaux et des listes (« XHTML™ 2.0 - XHTML Structural Module » 2010).

<p>Texte
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  </p>

L’élément <hr>, quant à lui, est renommé <separator> pour qu’il ne soit pas confondu avec un élément de présentation (« XHTML™ 2.0 - Introduction » 2010).

Enfin, les niveaux de titre <h1> à <h6> sont abandonnés au profit d’un élément global <h> à utiliser conjointement avec le nouvel élément <section> (« XHTML™ 2.0 - XHTML Structural Module » 2010). C’est alors la manière dont s’emboîtent les éléments qui détermine le niveau d’importance des titres.

<body>
  <h>Titre de niveau 1</h>
  <p>Paragraphe d’introduction générale</p>
  <section>
  <p>Paragraphe d’introduction à la section</p>
  <h>Titre de niveau 2</h>
  <p>Paragraphe</p>
  <h>Titre de niveau 2</h>
  <p>Paragraphe</p>
  </section>
  </body>

Conclusion

L’objectif du HTML, à la base, est de créer un standard pour la représentation des pages web capable d’assurer la compatibilité et l’interopérabilité entre les infrastructures (Sire 2017) (« W3c Mission » s. d.) (Maignien 2014). Le WHATWG et le W3C partagent cette mission, mais leurs approches divergentes les amènent à proposer des solutions différentes.

Le WHATWG conçoit pour le présent. Afin de garantir la compatibilité descendante et ascendante, le HTML 5 préconise une évolution progressive du standard en fonction des besoins et des pratiques de la communauté des développeurs. Pour cette raison, le HTML 5 est tolérant des erreurs et conserve les éléments, les attributs, etc. tels qu’ils sont lorsque possible. Par exemple, il garde les éléments de présentation <b> et <i> parce qu’ils sont très utilisés et n’apportent aucun changement aux éléments <p>, <hr> et <h1> à <h6>, car ils fonctionnent comme ils sont.

Le W3C conçoit pour le futur. Le XHTML 2 favorise l’extensibilité et la compatibilité ascendante. Pour être plus précis, le XHTML 2 cherche à atteindre une pureté théorique, ce qui implique de changer la pratique en obligeant les développeurs à produire des documents sans erreurs et de révolutionner le standard dans le but d’atteindre une version ultimement stable.

Ainsi, des éléments et des attributs sont éliminés, modifiés et ajoutés pour permettre un balisage sémantique plus net et complet. Par exemple, on supprime les éléments de présentation comme <b> et <i> à dessein d’une parfaite séparation entre le fond et la forme; on permet l’emboîtement de listes et de tableaux dans les éléments <p>; on renomme l’élément <hr> en <separator> pour que son tag corresponde mieux à son usage correct; on remplace les <h1> à <h6> par un élément général <h> dont l’importance est dictée par son imbrication avec des éléments <section>.

Tout cela dit, pour obtenir une meilleure comparaison des deux standards, une étude plus poussée du HTML 5 et du XHTML 2 est nécessaire. Davantage d’éléments (p. ex., le traditionnel <br> vs l’adoption du <l>), d’attributs (p. ex., les éléments <ins> et <del> vs l’attribut <edit>) et de fonctions (p. ex., les HTML Forms vs les XForms) doivent être analysées.

Bibliographie

« Adobe Flash ». 2020. Wikipédia. https://fr.wikipedia.org/w/index.php?title=Adobe_Flash&oldid=176659776.
« Backward Compatibility ». 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Backward_compatibility&oldid=992399725.
Boulétreau, Viviane, et Benoît Habert. 2014. « Les formats ». In Pratiques de l’édition numérique, 145‑59. Parcours numériques. Montréal: Presses de l’Université de Montréal. http://www.parcoursnumeriques-pum.ca/les-formats.
« Extensibility ». 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Extensibility&oldid=979679842.
« Forward Compatibility ». 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=Forward_compatibility&oldid=955847189.
« HTML ». 2020. Wikipedia. https://en.wikipedia.org/w/index.php?title=HTML&oldid=991040534.
« HTML abbr tag ». s. d. W3Schools. Consulté le 12 décembre 2020. https://www.w3schools.com/tags/tag_abbr.asp.
« HTML Attributes ». s. d. W3Schools. Consulté le 12 décembre 2020. https://www.w3schools.com/html/html_attributes.asp.
« HTML Design Principles ». 2007. W3c. https://www.w3.org/TR/html-design-principles/.
« HTML Elements ». s. d. W3Schools. Consulté le 12 décembre 2020. https://www.w3schools.com/html/html_elements.asp.
« HTML Elements Valid DOCTYPES ». s. d. W3Schools. Consulté le 12 décembre 2020. https://www.w3schools.com/tags/ref_html_dtd.asp.
« HTML hr tag ». s. d. W3Schools. Consulté le 12 décembre 2020. https://www.w3schools.com/tags/tag_hr.asp.
« HTML5 Differences from HTML4 ». 2014. W3C. https://www.w3.org/TR/html5-diff/.
« Hypertext Markup Language ». 2020. Wikipédia. https://fr.wikipedia.org/w/index.php?title=Hypertext_Markup_Language&oldid=177131547.
Magué, Jean-Philippe. 2014. « Les protocoles d’Internet et du web ». In Pratiques de l’édition numérique, 129‑44. Parcours numériques. Montréal: Presses de l’Université de Montréal. http://parcoursnumeriques-pum.ca/les-protocoles-d-internet-et-du-web.
Maignien, Yannick. 2014. « Les enjeux du web sémantique ». In Pratiques de l’édition numérique, 77‑93. Parcours numériques. Montréal: Presses de l’Université de Montréal. http://parcoursnumeriques-pum.ca/les-enjeux-du-web-semantique.
Mille, Alain. 2014. « D’Internet au web ». In Pratiques de l’édition numérique, 7‑11. Parcours numériques. Montréal: Presses de l’Université de Montréal. http://parcoursnumeriques-pum.ca/d-internet-au-web.
Pemberton, Steven. 2009. « An Introduction to Xhtml2 ». W3c. https://www.w3.org/MarkUp/2009/xhtml2.html.
Sire, Guillaume. 2017. « Gouverner le HTML ». Réseaux n° 206 (6):37‑60. https://doi.org/10.3917/res.206.0037.
W3C. s. d. « HTML Versus XHTML ». W3Schools. Consulté le 8 décembre 2020. https://www.w3schools.com/html/html_xhtml.asp.
« W3c Mission ». s. d. W3c. Consulté le 12 décembre 2020. https://www.w3.org/Consortium/mission.
« XHTML™ 2.0 - Introduction ». 2010. W3C. https://www.w3.org/TR/xhtml2/introduction.html#s_intro.
« XHTML™ 2.0 - XHTML Structural Module ». 2010. W3C. https://www.w3.org/TR/xhtml2/mod-structural.html#edef_structural_h.

  1. Par exemple, voir le site du WHATWG pour la dernière version.↩︎

  2. Tandis qu’il travaille pour l’Organisation européenne pour la recherche nucléaire (CERN), Tim Berners-Lee écrit « Information Management: A Proposal » en mars 1989. Il redistribue le document en mai 1990.↩︎

  3. Voir « Hypertext Markup Language (HTML): A Representation of Textual Information and MetaInformation for Retrieval and Interchange ». À noter, il existe à l’époque une draft concurrente par Dave Raggett : « A Review of the HTML+ Document Format ».↩︎

  4. Adobe Flash est un logiciel désuet qui permettait de créer des contenus multimédias. Les sites animés et interactifs créés avec Flash deviennent illisibles si le logiciel n’est pas maintenu. Sa mort complète est prévue en 2020 (« Adobe Flash » 2020).↩︎

  5. L’interopérabilité d’un système avec ceux qui le précèdent (p. ex., les versions antérieurs de HTML). Pour en savoir plus sur la rétrocompatibilité ou compatibilité descendante, voir la page Wikipedia anglophone sur la « Backward compatibility » (« Backward Compatibility » 2020).↩︎

  6. La capacité d’un système à admettre des fonctionnalités conçues pour des versions ultérieures (p. ex., un élément ou un attribut qui serait créé pour un XHTML 3 hypothétique). Voir la page Wikipedia anglophone sur la « Forward compatibility » (« Forward Compatibility » 2020) pour en savoir plus sur le sujet.↩︎

  7. Pour mieux comprendre, opposons-le au format docx : celui est dépendant du logiciel Word pour fonctionner. Le XML, au contraire, est indépendant, puisqu’il fonctionne avec la majorité des machines, des logiciels, des fureteurs…↩︎

  8. Voici une définition plus précise, mais en anglais : « Extensibility is a measure of the ability to extend a system and the level of effort required to implement the extension » (« Extensibility » 2020).↩︎

  9. Un élément vide est un élément qui ne comprend qu’une seule balise, puisqu’il n’a pas de contenu à baliser (« HTML Elements » s. d.). Par exemple, le <hr> (« HTML hr tag » s. d.).↩︎