XHTML : introduction

Préambule

L'XHTML est parfaitement compatible avec tous les navigateurs. N'ayez donc pas peur d'y passer. En effet, en XHTML il faut toujours utiliser les balises "brutes", vides de tout attribut de mise en forme. XHTML est un langage de mise en forme logique de texte, il n'est pas destiné à le mettre en forme visuellement le texte.

Pour information la mise en forme visuelle se fait par le biais de feuilles de styles CSS qu'il convient d'étudier après la mise en forme logique. Ne vous inquiétez donc pas si votre page ne ressemble pas à ce que vous désirez quand vous utilisez les méthodes décrites ci-dessous. Nous nous occuperons de la mise en forme dès que votre code sera logique.

N'hésitez surtout pas à afficher les sources de cette page pour comprendre les balises que j'y utilise et pour avoir des exemples plus concrets. Vous remarquerez que le code est très léger et minimaliste et qu'aucune mise en forme n'est faite. En cas de problème, si vous avez une question n'oubliez pas que le forum vous acceuille. Il n'est pas obligatoire de s'inscrire pour poster ;o)

But de cet article

Cette rubrique n'a pas vraiment pour but de vous apprendre à écrire un code logique, sémantique, depuis le début. Il a plutôt pour but de réparer les erreurs que génèrent les logiciels de création Web. En effet les logiciels soit disant miracle comme FrontPage ou Dreamweaver ne sont pas fait pour générer du bon code. Vous comprendrez petit à petit pourquoi. Cet article devrait vous permettre de modifier votre code actuel pour qu'il devienne propre et logique. Les points que nous verrons ici ne sont qu'une petite partie du standard XHTML mais ce sont les plus utiles et les plus courants. Sortez le bloc note ou tout autre logiciel de texte brut et préparez vous à mettre les main dans le code ! Vous verrez qu'il est très facile d'obtenir la validation XHTML Strict avec un code logique, je dirais même qu'il est bien plus difficile d'avoir la validation HTML 4.01.

Le top du top serait que vous éliminiez toutes les balises HTML de vos pages et que vous refassiez tout. A vous de voir.

Problématique : la sémantique (logique du code)

On pense souvent que le validateur de code du W3 est très pointilleux, trop même. Sachez qu'il n'en est rien. Ce validateur est d'un laxisme sans précédent. Il est presque inutile. Il existe une quantité phénoménale de sites "validés en XHTML par le W3" dont le code est un véritable cauchemard.

Pour bien comprendre les limitaitons énormes de cet outil nous allons prendre un petit exemple imagé. Essayez d'imaginer que l'XHTML soit la langue Française. Vous savez bien que pour écrire correctement il faut maîtriser à la fois l'orthographe et la grammaire. La combinaison parfaite des deux donne des phrases correctes. Problème : le validateur W3 se comporte un peu, à l'égard du code XHTML, comme un simple correcteur orthographique dans un logiciel de traitement de texte.

Voici un petit exemple :

Moi marché allé je suis pomme fruits gentil venir.

Cette phrase ne veut strcitement rien dire. Mais si vous la collez dans votre logiciel de traitement de texte celui-ci va vous annoncer fièrement qu'aucune faute d'orthographe n'a été commise... pour lui la phrase est donc bonne ! Bien sûr vous allez me dire qu'il existe un vérificateur grammatical. Alors nous allons tester ceci :

Tu as vu, il pleut dehors.
- Non, aujourd'hui je ne pleut pas donc je fais beau.

La première phrase passe aussi bien au validateur orthographique que gramatical. Normal, me direz-vous : elle est correcte. Analysez maintenant la réaction des correcteurs sur la 2ème : elle est identique ! Cette phrase ne leur pose aucun problème. Ce qu'il faut comprendre c'est que jamais la machine ne pourra remplacer l'intelligence de l'Homme (celle de la femme est, par contre, déjà largement dépassée ;o) ) : un ordinateur ne peut pas comprendre le sens logique de vos phrases. Il analyse juste les quelques critères pour lequel il a été programmé.
Un logiciel tel que FrontPage ou Dreamweaver ne peut pas savoir à votre place que tel élément est un exemple, tel autre est une liste, tel texte est du code, etc. Un tel programme ne vous offre que la possibilité de "donner l'aparence de".

Ainsi, ni les logiciels de création Web ni le validateur W3 ne peuvent recréer / analyser la logique de votre code. Et pour illustrer mes propos voici un exemple démontrant l'incapacité flagrante des machines à générer du code propre. Le but était d'écrire juste une petite phrase avec un peu de mise en forme logique. Voici le résultat :

<b><font FACE="Arial" SIZE="5">
<p ALIGN="JUSTIFY"></font>

<font color="#008000">
<font face="Tahoma" size="5">35 heures<em>
</font>
<font FACE="Arial" SIZE="5">  : </font>
<font FACE="Arial" size="4">2<sup>ème</sup>

loi:</em>  </b>
<em>le voile se lève !</em></font></font></p>
<div align="center"><center>

Non ce n'est pas une blague, c'est bien le code que FrontPage m'a généré pour une simple phrase. Voici le code valide que j'attendais :

<p>35 heures :
<em>2<sup>ème</sup>loi :
le voile se lève !</em></p>

Non seulement le code FrontPage est archi lourd pour rien (et va donc finir par vous coûter très cher en bande passante et en temps d'affichage) mais en plus il est complètement incorrect.

La solution

Il ne vous reste plus qu'à vous armer de votre bloc-note ou tout autre éditeur de texte et de partir à la chasse aux erreurs provoquées par l'utilisation de logiciels WYSIWYG ou par un codeur ayant une faible connaissance en HTML.
Bon courage :o)

Vous voulez quand même un petit guide ? Voici un reccueil des corrections à apporter aux erreurs les plus courantes :o)

Imprimer cette page | Ajouter aux favoris
Revenir en haut de la page

Besoin d'aide ? Une question ?

N'hésitez pas à venir chercher de l'aide ou des explications spécifiques sur le forum En1heure.
Nous ferons notre possible pour vous aider au plus vite.