Experts en commerce électronique et solutions Web

Depuis quelques années, XHTML 2 et HTML 5 se livraient la guerre pour déterminer quel serait le prochain langage utilisé pour les documents sur Internet. En juillet 2009, le W3C a annoncé sa décision de laisser tomber le développement du standard XHTML 2 pour concentrer tous ses efforts sur le développement de HTML 5.

 

Dans le fond, qu’est-ce que le HTML5 ?

Pour commencer, voici une petite bande dessinée expliquant assez bien le combat entre les amateurs du XHTML 2 et ceux du HTML 5 :  http://media2.smashingmagazine.com/wp-content/uploads/images/xhtml2-html5/comic-960px.jpg.  Maintenant que XHTML 2 est mort et enterré, longue vie au HTML 5 ! HTML 5, un rêve, une réalité ? Aurons-nous la chance de pouvoir mettre en application ces nouvelles pratiques ? Parce que si les standards du HTML et du W3C évoluent, ils restent cependant dépendants de ceux qui les supportent : c’est-à-dire les navigateurs et les développeurs.

 

Ce qui va changer

Voici donc sans attendre les nouveautés du HTML 5 :

  • De nouvelles balises sémantiquement plus significatives pour organiser le contenu : header, footer, section, article, nav et aside. La balise nav servira à indiquer que le contenu correspond à de la navigation alors qu’aside pourra être utilisé pour des contenus parallèles ou relatifs.
  • De nouveaux éléments interactifs permettront un peu plus d’interaction directe sans programmation. Par exemple progress nous donnera accès à une barre de progression, details à une zone d’information supplémentaire sur demande. Le contrôle datagrid permettra de présenter de façon interactive des données en listes, tableaux ou même en arbre (treeview). (Je parle bien d’un contrôle HTML et non d’un d’ASP.NET).
  • De nouvelles balises audio et video seront ajoutées afin de pouvoir diffuser des formats de média ouvert sans plugins.
  • La balise canvas permettra d’afficher dynamiquement des contenus en 2d sur la page.
  • Beaucoup d’améliorations au niveau des formulaires, le champ input aura maintenant plusieurs autres valeurs possibles : (datetime, range, number, email, url, color, etc.)

 

Et le lien avec les doctype?

La déclaration de Doc Type n’est plus vraiment utilisée en HTML5, toutefois elle doit être incluse pour éviter que le contenu soit interprété en QuirkMode, donc un doctype très simple est utilisé. Voici une liste beaucoup plus exhaustive des nouveautés : http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html.  Finalement, si vous voulez tout savoir, voici le document de référence pour la norme HTML 5, directement du W3C : http://dev.w3.org/html5/spec/Overview.html (version en développement). Je vous propose également un petit tutoriel rapide permettant de voir comment un blogue pourrait être monté en HTML 5. Il y est également question de CSS3 (un autre post peut-être?) : http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Vous avez peut-être déjà vécu la situation suivante : vous avez une page HTML qui s’affiche relativement bien et vous décider d’ajouter une déclaration de DocType au début du document pour respecter le standard W3C. Soudainement, plusieurs éléments ne s’affichent plus correctement, pourtant rien n’a changé dans la source HTML à part cette petite ligne au début.

Une question de compatibilité

La raison est que lorsqu’aucun doctype n’est présent le navigateur utilise généralement le mode Quirks pour rendre la page, tandis que lorsqu’un doctype est présent le mode de comptabilité standard est utilisé. Dans Firefox, voici comment savoir quel mode de compatibilité est utilisé pour l’affichage :
Right-click dans la page > Page Info : vous ouvrira le pop-up suivant :
 

 

Surmonter les guéguerres de navigateurs

L’origine du mode Quirks remonte à l’époque de la guerre des navigateurs où Internet Explorer et Netscape avaient chacun leur standard. Le mode Quirks permet donc aux navigateurs récents de supporter du HTML/CSS qui ne répond pas aux standards en essayant de faire un affichage décent. De nos jours, une déclaration de DocType devrait toujours être incluse et les pages devraient toujours être intégrées en fonction du mode de compatibilité standard. De cette façon il y a beaucoup plus de chance que l’affichage soit constant d’un navigateur à l’autre (dans les navigateurs récents), même si c’est loin d’être une garantie d’une compatibilité complète.

Voici quelques exemples courants d’éléments interprétés différemment en quirks mode :
- Les largeurs et padding du box model
- Certaines balises ont le droit ou pas d’être inclues dans d’autres balises (Ex : des LI sans UL)
- Les espaces blancs ou retour de ligne entre les balises peuvent avoir un impact sur l’affichage

Vous pensez avoir tout compris et ce n’est pas si compliqué que ça finalement? Sachez qu’il existe aussi un Almost standard mode (http://www.quirksmode.org/css/quirksmode.html). Vous y trouverez plus de détails l’histoire du mode quirks ainsi que les différences entre les interprétations des modes quirks et standard et almost standard. Également, l’arrivée du HTML 5 va remettre le concept de doctype en question.

Pour plus d’information, la référence ultime sur le sujet est le site http://www.quirksmode.org/

 

Articles connexes

 
La liste des différences entre le mode standard et quirks dans Firefox
https://developer.mozilla.org/En/Mozilla_Quirks_Mode_Behavior
La liste des doctypes qui font que Firefox va rendre la page en Strict, Almost-Strict, Quirks
https://developer.mozilla.org/en/Mozilla’s_DOCTYPE_sniffing
Les “Améliorations” (hors standards) d’Internet Explorer 6 qui ont fait suer la plupart des intégrateurs
http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

On parle  souvent de doctype, de l’impact que ça a sur l’affichage d’une page, des différences d’interprétation entre les navigateurs, des versions du HTML… mais en bout de ligne c’est quoi un doctype ?

 

C’est un interprète pour le W3C

Un doctype c’est en fin de compte une sorte de grammaire qui indique au navigateur comment interpréter le code HTML de la page. C’est également cette grammaire qui servira au validateurs du W3C pour déterminer si votre document respecte le standard. Voici un exemple de doctype :

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

 ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

La seconde ligne de la balise pointe vers la grammaire en question. De façon régulière, ce document est hébergé sur le site du W3C, mais notez que vous pourriez faire pointer cette adresse sur un de vos serveurs sans problème. En fait le navigateur n’utilise pas la DTD pour valider le fichier HTML/XHTML donc il ne télécharge pas la DTD.  Donc le doctype suivant est aussi valide bien qu’il ne référence pas l’URL du fichier de DTD.

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>

Un parser XHTML ou un validateur, lui, se servira généralement de la DTD pour valider la forme du fichier. (Le W3C éprouve d’ailleurs des problèmes car plusieurs logiciels téléchargent inutilement les DTD causant du trafic inutile : http://www.w3.org/2005/06/blog/systeam/2008/02/08/w3c_s_excessive_dtd_traffic )

 

C’est un guide pour le navigateur

La ”grammaire” du doctype indique au navigateur tout ce qu’il doit savoir sur le document :

  • Les événements supportés :

<!ENTITY % events

 ”onclick     %Script;       #IMPLIED

  ondblclick  %Script;       #IMPLIED

  onmousedown %Script;       #IMPLIED

  onmouseup   %Script;       #IMPLIED

  onmouseover %Script;       #IMPLIED

  onmousemove %Script;       #IMPLIED

  onmouseout  %Script;       #IMPLIED

  onkeypress  %Script;       #IMPLIED

  onkeydown   %Script;       #IMPLIED

  onkeyup     %Script;       #IMPLIED”

  >

  • Les types de listes :

<!ENTITY % lists “ul | ol | dl | menu | dir”>

  • La liste des attributs acceptés par une balise et les valeurs par défaut :

<!ELEMENT iframe %Flow;>

<!ATTLIST iframe

  %coreattrs;

  longdesc    %URI;          #IMPLIED

  name        NMTOKEN        #IMPLIED

  src         %URI;          #IMPLIED

  frameborder (1|0)          “1″

  marginwidth %Pixels;       #IMPLIED

  marginheight %Pixels;      #IMPLIED

  scrolling   (yes|no|auto)  “auto”

  align       %ImgAlign;     #IMPLIED

  height      %Length;       #IMPLIED

  width       %Length;       #IMPLIED

  >

Il existe des tonnes de doctypes (http://www.w3.org/QA/2002/04/valid-dtd-list.html) qui indiqueront à votre navigateur les règles à suivre pour comprendre votre document.