Boîte de dialogue

XHTML : structurer le contenu

par Charles Wyke-Smith

CSS 2 : Guide du designer traite de la conception et de la fabrication de pages Web à la fois stylées et professionnelles, intuitives pour les visiteurs, compatibles avec une large palette de navigateurs et d’appareils et dont le contenu peut être facilement mis à jour et distribué à d’autres fins.

Comme tous les artistes, votre capacité à satisfaire votre vision créatrice est gouvernée par vos aptitudes techniques. Dans ce didacticiel, je ne vais pas m’étendre sur tous les rouages du fonctionnement du Web, mais je dirais que sans un certain degré de connaissance technique, vous ne pourrez jamais atteindre vos objectifs de conception Web. Je vais plutôt tâcher de vous donner les informations techniques de base dont vous avez besoin pour satisfaire votre vision créatrice et, je l’espère, vous donner la confiance d’aller encore plus loin à mesure que vous approfondirez vos connaissances. Mais, par-dessus tout, nous allons nous intéresser au design. Et par ceci, j’entends design au sens large, pas seulement l’esthétisme (apparence visuelle), mais également l’ergonomie (organisation logique) et la fonctionnalité (capacités utiles).

Tout dans ce didacticiel est basé sur les normes Web, les règles de comportement des navigateurs définies dans les recommandations du W3C (World Wide Web Consortium), que tous les plus grands développeurs de navigateurs ont accepté de suivre. Comme vous le verrez, les navigateurs conçus sur la base du moteur Gecko, les versions actuelles de Mozilla/Firefox et de Netscape, et ceux conçus sur la base du moteur Konquerer, notamment l’excellent Safari pour Mac, sont bien plus en phase avec les normes que le jadis omniprésent Microsoft® Internet Explorer, lequel n’implémente pas nombre de spécifications CSS.

DESOLE, CNMPDMIE

Vous pourriez penser qu’Internet Explorer est le meilleur navigateur, mais, malgré sa domination actuelle, c’est loin d’être le cas. Bien souvent, je vais mentionner une fonction CSS et ajouter CNAPDIE : ça ne marche pas dans Microsoft Internet Explorer. Internet Explorer est gelé dans un passé sans normes et, en conséquence, perd de nombreuses parts de marché. Parmi les défaillances d’Internet Explorer, il y a des alternatives connues sous le nom d’altérations qui consistent à utiliser CSS pour changer le comportement d’un navigateur afin qu’il voie ou ignore certains styles. La création de ces alternatives est longue et fastidieuse ; il est essentiel qu’Internet Explorer entre dans le rang pour éviter de perdre trop de terrain par rapport à d’autres navigateurs plus compatibles.

Pour nous les concepteurs de sites Web et pour les personnes qui visitent les sites que nous créons, l’existence de normes Web est un gage de cohérence de l’affichage et du comportement des sites, indépendamment du navigateur et de la plate-forme. Nous n’en sommes pas encore là, mais le temps où chaque navigateur prenait en charge un jeu de fonctions différent, avec toutes les incohérences techniques, la frustration et la lenteur que cela pouvait entraîner en termes de développement inter navigateurs et inter plates-formes, semble être en passe de devenir de l’histoire ancienne.

Ainsi, en suivant les règles des normes Web, ce manuel vous montre comment publier du contenu en définissant sa structure avec XHTML, puis sa présentation avec CSS.

1. Le contenu est un terme collectif désignant tout le texte, les images, les vidéos, l’audio, les animations et les fichiers (comme des documents PDF) que vous souhaitez mettre à disposition de votre public.

2. Le langage XHTML (eXtensible HyperText Markup Language) vous permet de déterminer la nature de chacun des éléments de votre contenu. Est-ce un titre ou un paragraphe ? Est-ce une liste d’éléments, un lien hypertexte ou une image ? Vous déterminez tout cela en ajoutant un marquage XHTML à votre contenu. Ce marquage est constitué de balises (dont le nom est entouré de chevrons < >) qui identifient chaque élément de votre contenu. Pour créer un élément XHTML (ci-après appelé simplement élément), vous pouvez soit entourer le contenu d’une balise ouvrante et fermante, comme suit :

<p>Ce contenu de texte est défini par la balise comme un paragraphe</p>

Soit, pour du contenu autre que du texte (une image, dans cet exemple), utiliser une seule balise :

<img src=“images/fido.gif” alt=“une photo de mon chien” />

Ce didacticiel met l’accent sur le langage XHTML et la façon de l’utiliser, mais le plus important à savoir à ce stade est ceci :

le langage XHTML définit la structure d’un document.

3. Les feuilles de style en cascade CSS (Cascading Style Sheets) permettent de définir la présentation de chaque élément marqué sur la page. Est-ce que la police de ce paragraphe est Helvetica ou Times, est-ce qu’elle est en gras ou en italique ? Faut-il appliquer un retrait ou tout aligner avec le bord de la page ? Les CSS contrôlent la mise en forme et le placement de chaque élément de contenu. Pour mettre en forme la taille du texte d’un paragraphe, je pourrais écrire :

p {font-size: 12px;}

Ce qui lui donnerait une hauteur de 12 pixels. La plus grande partie de ce didacticiel est consacrée aux rudiments des CSS, mais le plus important à savoir à ce stade est ceci :

les CSS définissent la présentation d’un document.

Fournir un moyen de séparer la structure d’un document de sa présentation était le principal objectif du développement des normes Web. C’est également la clé du développement de contenu à la fois nomade (qui peut être affiché sur plusieurs appareils) et durable (prêt pour le futur).

LES TEMPS CHANGENT

Pour avoir une idée de la distance qui sépare la plupart des sites Web d’aujourd’hui du respect des normes, il convient de revenir brièvement sur le développement du langage HTML et d’examiner les difficultés auxquelles sont confrontés la plupart des sites.

Début 2005, le marquage type d’un site Web était truffé de marques de présentation destinées aux seules capacités du navigateur pour lequel il était créé (comme Internet Explorer 5 pour Windows ou l’obsolète Netscape 4.0). Dans un monde régi par le transfert des informations, où vous voulez publier votre contenu non seulement sur les navigateurs compatibles d’aujourd’hui mais aussi sur les téléphones portables, les PDA et même les portes de réfrigérateur de votre public, vous pourriez avoir la mauvaise surprise de découvrir que le contenu de votre site Web est étroitement emprisonné dans des pages et des pages de vieux code de présentation.

Des années de bricolage

Le langage HTML avait d’abord été conçu pour agencer des pages de texte contenant des liens hypertexte vers d’autres pages de texte. Il n’était pas destiné à la conception de mises en page complexes de type brochures. Mais dès qu’Internet est sorti des sentiers académiques pour s’ouvrir au grand public, c’est exactement ce que les designers ont voulu en faire. Et le bricolage a fait légion.

Par exemple, si une photographie semblait trop proche du bord de la page, un designer pouvait avoir recours à une image GIF transparente carrée d’1 pixel, en forçait la taille avec un attribut de largeur pour l’agrandir afin de pousser l’image dans la page de manière invisible.

Les tableaux étaient également utilisés de manière très créative. Les tableaux sont un élément HTML conçu pour agencer des grilles de données (comme une feuille de calcul Excel), mais si vous vouliez diviser une page en, disons, une zone de titre, de navigation et de contenu, vous pouviez alors utiliser un tableau pour diviser la page et placer chaque contenu dans une cellule différente du tableau. Globalement, nous étions arrivés à un point où la conception basée sur les tableaux était presque devenue une norme en soi qui était enseignée dans un nombre incalculable de manuels consacrés au Web.

En matière d’utilisation et d’abus du langage HTML, je sais de quoi je parle ; j’ai moi-même eu recours à ces techniques, comme tous les autres développeurs Web dans le monde. Il n’y en avait pas d’autres.

Bien que la fin justifie les moyens, il y avait une conséquence imprévue, ou tout simplement ignorée, qui affecte maintenant la grande majorité des sites Web : le contenu des pages Web du monde entier est truffé de marquage dont le seul but est de fournir la présentation voulue sur un petit groupe de navigateurs Web bientôt obsolètes. Il ne fournit aucune sorte d’informations. Je peux affirmer sans crainte de me tromper que la plupart des pages Web sont constituées à plus de 60 % de marquage de présentation. La conséquence étant que le contenu en tant que tel est pratiquement impossible à extraire pour d’autres fins.

Et puisque nous parlons de ce triste sujet...

Jouons à trouver le contenu !

Prenez ce fragment de marquage de la page d’accueil de Microsoft du 1er juillet 2004 :

<table cellpadding=“0” cellspacing=“0” width=“100%” height=“19” border=“0” ID=“Table5”>
  <tr>
      <td nowrap=“true” id=“homePageLink”><></td>       <td><span class=“ltsep”>|</span></td>
      <td class=“lt0” nowrap=“true” onmouseenter=“mhHover('localToolbar', 0*2+2, 'lt1')“ onmouseleave=“mhHover('localToolbar', 0*2+2, 'lt0')“><a href=“http://go.microsoft.com/?LinkID=508110“>Page d’accueil MSN</a></td>
      <td><span class=“ltsep”>|</span></td>
      <td class=“lt0” nowrap=“true” onmouseenter=“mhHover('localToolbar', 1*2+2, 'lt1')” onmouseleave=“mhHover('localToolbar', 1*2+2, 'lt0')“><a href=“http://go.microsoft.com/?linkid=317769”>S’abonner</a></td>
      <td><span class=“ltsep”>|</span></td>
      <td class=“lt0” nowrap=“true” onmouseenter=“mhHover('localToolbar', 2*2+2, 'lt1')” onmouseleave=“mhHover('localToolbar', 2*2+2, 'lt0')“><a href=“http://go.microsoft.com/?linkid=317027”>Gérez votre profil</a></td>
      <td width=“100%”></td>
  </tr>
</table>

Tout ce code produit juste une ligne de boutons sur cette page (Figure 1) :

Fig. 1 : tout le code ci-dessus génère uniquement les trois liens qui apparaissent sur la ligne en dessous du logo Microsoft.

Le contenu total du code représente 247 caractères sur 956, ou moins de 26 %. Les 74 % restants ne sont que de la sauce au chocolat visqueuse. A part les attributs href, tout ce qui se trouve dans les balises n’est rien d’autre que de la présentation et pourrait être supprimé et converti en quelques brèves définitions dans une feuille de style. Le tableau ne permet pas d’afficher des données, son seul but est de tout aligner. Le reste du code est surtout là pour garantir le fonctionnement des survols avec la souris. Chaque lien requiert une classe qui l’identifie à JavaScript, un attribut nowrap forcé pour que les mots du lien restent groupés et deux appels de fonctions JavaScript sur chaque lien. (Pour info, il est très facile de créer des survols avec CSS à l’aide de deux styles CSS simples.) Notez également qu’une cellule de tableau qui contient une étendue imbriquée doit afficher chaque petite ligne verticale entre les liens.

Ne pensez surtout pas que je m’acharne sur Microsoft, la plupart des sites présentent les mêmes défauts.

De nos jours, avec la standardisation des navigateurs et de beaucoup d’autres périphériques autour de XHTML et CSS, les sites Web non conformes réalisent qu’il est très difficile d’y diffuser leur contenu. Avez-vous vu votre page d’accueil sur un ordinateur de poche dernièrement ?

L’avenir frappe à notre porte

Laissons maintenant de côté notre passé avec ses marquages inutiles et autres tableaux imbriqués, et tournons-nous vers l’avenir. Bien que l’entrée de votre site Web dans la nouvelle ère vous demande un énorme travail, vous pouvez vous consoler en vous disant que, grâce aux nouvelles normes Web, vous le faites une bonne fois pour toutes. Si vous commencez un nouveau site, vous pouvez suivre la bonne voie dès le début.

Dans le Guide du designer, vous apprenez à préparer votre site pour l’avenir en séparant contenu et présentation. Pour ce faire, vous créez des pages de marquages XHTML renfermant uniquement du contenu puis, à l’aide d’une seule ligne de code, vous reliez ces pages à un fichier séparé appelé feuille de style qui contient les règles de présentation déterminant la manière d’afficher le marquage.

Le pouvoir de cette séparation draconienne réside dans le fait que vous pouvez avoir différentes feuilles de style pour les navigateurs, les PDA, les téléphones portables, l’impression, les lecteurs tactiles pour non voyants, etc. Chaque feuille de style permet d’adapter le mieux possible le contenu à chaque usage, mais vous avez besoin d’une seule version du marquage de contenu XHTML. Comme vous le verrez, une page XHTML peut sélectionner automatiquement la feuille de style la plus appropriée en fonction de l’environnement dans lequel elle se trouve. De la sorte, vous rédigez une fois du contenu réutilisable à l’infini qui devient véritablement nomade, flexible et prêt pour toute exigence de présentation que l’avenir nous réserve. Notez toutefois que, comme toute grande vision de l’avenir, il y a toujours un certain nombre de réalités actuelles que nous devons affronter.

XHTML : DEFINITION ET ECRITURE

Comme CSS est un mécanisme permettant d’appliquer des styles au langage XHTML, vous ne pouvez pas vous lancer dans le premier sans avoir de solides bases dans le second. Que signifie XHTML au juste ? XHTML est une reformulation de HTML comme XML. Vous aviez deviné ? Pour faire (très) simple, XHTML est basé sur la structure libre du langage XML, dans lequel le nom des balises permet véritablement de décrire ce qu’elles contiennent. Par exemple, <nomstar>Coluche</nomstar>. Cette fonction très puissante d’XML signifie que lorsque vous développez votre jeu de balises personnalisées pour votre contenu XML, vous devez également créer un deuxième document, appelé DTD (définition de type de document) ou tout autre schéma XML mis en forme de manière similaire, qui explique au périphérique interprétant le contenu XML la manière de gérer ces balises.

XML a été très largement adopté par les entreprises et le fait que cette même lettre X (pour eXtensible) fait maintenant partie de XHTML accentue la marche inaltérable vers la séparation de la présentation et du contenu.

La suite de ce didacticiel est consacrée à la toute dernière, entièrement reformulée, totalement moderne et autrement plus flexible version d’HTML. Mesdames et messieurs, je vous présente XHTML !

Règles de marquage XHTML

Un marquage XHTML bien écrit multiplie les chances que vos pages s’affichent correctement sur une large palette de périphériques pour de nombreuses années. La nature transparente, simple et flexible du langage XHTML produit du code qui se charge rapidement, qui est facile à comprendre lors de l’édition et qui prépare votre contenu à un usage dans une grande variété d’applications.

Vous pouvez déterminer très facilement si votre site est conforme aux normes Web : si votre marquage est un XHTML correct et valide et si votre feuille de style est un CSS valide, alors il est conforme. (Qu’il soit bien conçu ou non est assez subjectif, mais nous aborderons le sujet plus tard.)

Correct signifie que le code XHTML est bien structuré, en fonction des règles de marquage décrites dans ce didacticiel. Valide signifie que le marquage contient uniquement du XHTML, sans balises incompréhensibles, incomplètes ou balises HTML à éviter (dépassées mais toujours opérationnelles). Pour vérifier si votre page respecte ces critères, chargez-la sur un serveur, allez sur http://validator.w3.org et entrez l’URL de la page. Appuyez sur Check et quelques secondes plus tard, vous vous trouvez soit en face d’une liste détaillée des erreurs de la page, soit en face du très satisfaisant message « This Page Is Valid XHTML ! » (Figure 2). De la même manière, vous pouvez valider votre feuille de style CSS en allant sur http://jigsaw.w3.org/css-validator.

Fig. 2 : si votre site respecte les normes Web, vous recevrez le très gratifiant message « This Page Is Valid XHTML » du programme de validation du W3C.

Voici la liste complète (et fort heureusement, courte) des exigences en matière de code pour être conforme au langage XHTML :

1. Déclarez un DOCTYPE. Le DOCTYPE se place avant la balise html d’ouverture en haut de la page et indique au navigateur si la page contient de l’HTML, du XHTML ou un mélange des deux, afin qu’il puisse interpréter correctement le marquage. Il existe trois DOCTYPE principaux :

Strict : tout le marquage est XHTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional : indique que le marquage est un mélange d’XHTML et d’HTML. Nombre de sites utilisent actuellement ce DOCTYPE pour faire en sorte que leur vieux code HTML fonctionne aussi à côté de l’XHTML qu’ils y ajoutent.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

Frameset : ce type est identique au précédent à la différence près que, dans ce cas, les cadres, qui sont obsolètes sous XHTML, sont également acceptés.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

Il est primordial de spécifier un DOCTYPE. Les navigateurs qui ne voient aucun DOCTYPE dans le marquage supposent que la page du site a été codée pour des navigateurs développés bien avant l’apparition des normes Web.

Sans DOCTYPE, la plupart des navigateurs se mettent en mode Quirks, une fonction de rétro-compatibilité prise en charge par Mozilla, Internet Explorer 6 pour Windows et Internet Explorer 5 pour Macintosh. En mode Quirks, le navigateur fait comme s’il ne connaissait pas le DOM (document object model) moderne et prétend n’avoir jamais entendu parler des normes Web. Cette faculté de changer de mode en fonction du DOCTYPE, ou de son absence, permet aux navigateurs d’interpréter au mieux le code des sites conformes et non conformes.

Notez que pour une raison obscure, il n’est pas nécessaire de fermer la balise DOCTYPE avec une barre oblique inversée et que DOCTYPE est toujours en majuscules. Ceci est en contradiction complète avec les règles XHTML 4 et 7 énoncées ci-après. Allez savoir pourquoi.

2. Déclarez un espace de nom XML. Notez que cette ligne est une nouvelle balise html. En voici un exemple :

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“fr” xml:lang=“fr”>

Lorsqu’un navigateur se retrouve devant une page XHTML et veut savoir ce que contient le DTD, qui répertorie et définit toutes les balises XHTML valides, voici où il peut le trouver : perdu sur les serveurs du WC3.

En bref, les déclarations du DOCTYPE et d’un espace de nom garantissent que le navigateur interprète votre XHTML comme vous l’entendez.

3. Déclarez le type de votre contenu. Vous devez placer la déclaration du type de contenu en haut de votre document, avec toute autre balise meta que vous pourriez ajouter. La plus courante est

<meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />

Cette ligne indique simplement le type de codage de caractères utilisé pour le document. ISO-8859-1 correspond au jeu de caractères latin, utilisé par toutes les variantes de l’anglais. Si vous codez pour un public qui utilise l’alphabet et non, par exemple, les idéogrammes chinois ou les caractères Farsi, c’est le jeu de caractères qu’il vous faut. Si votre prochain site sera en cyrillique ou en hébreu, vous pouvez trouver les types de contenu appropriés sur le site de Microsoft (http://msdn.microsoft.com/workshop/author/dhtml/reference/charsets/charset4.asp).

4. Fermez toutes les balises, qu’elles soient enveloppantes ou non.

Les balises enveloppantes renferment un contenu, comme suit :

<p>Ceci est un paragraphe de texte entre des balises de paragraphe. Pour être conforme XHTML, elle doit, et c’est le cas ici, être dotée d’une balise de fin.</p>

Les balises non enveloppantes ne renferment aucun contenu mais doivent néanmoins être fermées à l’aide d’une combinaison espace-barre oblique, comme suit :

<img scr=“images/siamese.jpg” alt=“Mon chat” />

5. Toutes les balises doivent être correctement imbriquées. Si une balise est ouverte avant qu’une balise précédente ne soit fermée, elle doit être fermée avant que cette balise précédente ne le soit. Par exemple :

<p>Il est <strong>très important</strong> d’imbriquer correctement les balises.</p>

Ici, la balise strong est bien placée à l’intérieur des balises <p> ; elle est fermée avant que la balise p qui la contient ne le soit. Lorsqu’une balise est intégrée à une autre de la sorte, on parle de balise imbriquée.

L’exemple suivant illustre une balise mal imbriquée :

<p>L’imbrication de ces balises est <strong>incorrect<p></strong>

Vous pouvez imbriquer plusieurs éléments dans un élément conteneur ; une liste peut imbriquer plusieurs éléments li dans un seul élément ul ou ol, comme suit :

<ul>
  <li>Elément 1</li>
  <li>Elément 2</li>
  <li>Elément 3</li>
</ul>

Comme CSS se base sur une imbrication correcte pour associer les styles aux éléments, vous n’avez pas le droit à l’erreur, car votre code ne serait pas valide.

6. Les balises en ligne ne peuvent pas contenir de balises de type bloc. Les balises de type bloc fournissent la structure visuelle de votre document, comme p (paragraphe) et div (division). Les éléments de type bloc se placent les uns au-dessus des autres sur la page. Si vous avez deux paragraphes, le second apparaît par défaut sous le premier. Aucun saut de ligne n’est requis. A l’inverse, les balises en ligne, comme a (ancre, un lien hypertexte) et em (emphase, généralement affichée en italiques) s’intègrent au flux normal de texte et ne créent aucune nouvelle ligne.

N’oubliez pas que si vous imbriquez un élément de type bloc, comme un paragraphe p, dans un élément en ligne, comme un lien a, votre code ne sera pas valide.

Par ailleurs, certains éléments de type bloc ne peuvent contenir aucun autre élément de type bloc non plus. Par exemple, une balise h1-6 (titre) ne peut pas contenir de paragraphe. Outre la validation, laissez votre bon sens vous guider pour éviter ces problèmes. Vous ne placeriez certainement pas un paragraphe entier dans un titre de paragraphe lorsque vous écrivez sur papier ou dans Word, alors évitez toute chose illogique comme celle-ci dans votre code XHTML et vous serez déjà sur la bonne voie.

7. Ecrivez les balises en minuscules. L’explication va de soi : aucune majuscule. J’ai toujours suivi cette règle, mais si ce n’est pas votre cas, vous pouvez dire adieu à P et le remplacer par p . Désolé.

8. Les attributs doivent avoir une valeur et être entourés de guillemets. Certains attributs de balises ne requièrent aucune valeur en HTML, mais en XHTML, tous les attributs doivent en avoir une. Par exemple, si vous utilisiez la balise select pour créer un menu déroulant dans HTML et souhaitiez choisir l’élément affiché par défaut au chargement de la page, vous auriez pu écrire quelque chose comme ça :

<SELECT NAME=ANIMAUX>
  <OPTION VALUE=Chats>Chats</OPTION>
  <OPTION VALUE=Chiens SELECTED>Chiens</OPTION>
</SELECT>

Ce qui vous aurait donné un menu déroulant avec la valeur Chiens affichée par défaut.

Le code XHTML valide équivalent est le suivant :

<select name=“animaux”>
  <option value=“chats”></option>
  <option value=“chiens” selected=“selected”>Chiens</option>
</select>

Notez que dans cette nouvelle version, tous les noms d’attributs sont en minuscules et que toutes les valeurs sont entourées de guillemets.

9. Utilisez les équivalents codés du chevron ouvrant et de l’esperluette dans le contenu. Lorsque XHTML tombe sur un chevron ouvrant, < (également connu comme le symbole inférieur à), il suppose très logiquement que vous commencez une balise. Mais que faire si vous voulez en fait que le symbole apparaisse dans votre contenu ? La réponse est de le coder à l’aide d’une entité. Une entité est une petite chaîne de caractères représentant un seul caractère. Elle permet à XHTML d’interpréter et d’afficher correctement le caractère et de ne pas le confondre avec du marquage. L’entité qui représente le symbole chevron ouvrant/inférieur à est <. N’oubliez pas que LT signifie « less than » (inférieur à).

Les entités permettent non seulement d’éviter les erreurs de traitement comme celle que nous venons de mentionner, mais aussi d’afficher certains symboles, comme © pour le copyright (©). Chaque entité symbolique commence par une esperluette (&) et se termine par un point-virgule (;). Par conséquent, il n’y a aucune surprise à ce que XHTML considère les esperluettes de votre code comme le début d’une entité. Il vous faut donc aussi les coder sous forme d’entités lorsque vous voulez les faire apparaître dans votre contenu. L’entité de l’esperluette est &.

En règle générale, si le caractère que vous souhaitez utiliser ne figure pas sur les touches de votre clavier (comme ® ou ©), vous devez avoir recours à une entité dans votre marquage.

Il existe quelques 50 000 entités au total, qui représentent les caractères de la plupart des principales langues du globe, mais vous pouvez trouver une liste plus courte des entités les plus couramment utilisées sur le site du Web Design Group (www.htmlhelp.com/reference/html40/entities).

Et j’en ai terminé avec les règles du marquage XHTML. Elles sont relativement simples, mais vous devez scrupuleusement les suivre pour que vous pages soient valides (et c’est certainement votre objectif).

Présentation du marquage

Voici un exemple de page XHTML sans style mais valide qui illustre les règles du langage XHTML (Figure 3) :

Fig. 3 : cette page XHTML sans style mais valide ne présente aucun intérêt visuel, mais elle est tout à fait utilisable.

La page n’a aucun attrait, mais elle est tout à fait utilisable. Et son marquage est pauvre et simple. Il n’y a aucun code de présentation et cet XHTML passe sans problème le test du programme de validation HTML du WC3.

Entrons maintenant plus en détail dans les règles XHTML en observant, ligne par ligne, le marquage qui a permis de créer la page illustrée en Figure 3.

Lignes 1 et 2

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Ici, DOCTYPE est défini sur XHTML 1.0 Strict. Dans ce cas, vous indiquez que le code sera interprété comme du code XHTML pur et non rétro-compatible.

Je me concentre sur les DOCTYPE stricts tout au long de ce didacticiel, ce qui signifie que je n’utilise aucun HTML obsolète. Pour prendre en charge des balises HTML obsolètes, comme les cadres, vous devez utilisez un autre DOCTYPE (reportez-vous à la section « Règles de marquage XHTML », plus haut dans ce didacticiel).

Ligne 3

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“fr” xml:lang=“fr”>

Vient ensuite la balise html de début, qui ne possédait aucun attribut par le passé. Elle comporte maintenant une URL qui pointe vers l’espace de nom (la collection de déclarations et d’attributs XML) de ce document.

Comme je l’ai déjà précisé dans la section « Règles de marquage XHTML », les déclarations de DOCTYPE et d’espace de nom garantissent que le navigateur comprend la nature du langage (X)HTML que vous utilisez pour être en mesure d’interpréter votre code comme vous l’entendez.

Ligne 4

<head>

Cette balise ouvre l’en-tête du document. L’en-tête de votre document, compris entre les balises head et /head, contient des informations qui, à l’exception du titre, n’apparaissent pas à l’écran. Outre les balises head indispensables que je répertorie ci-après (Lignes 5 à 9), d’autres existent, comme les balises meta, qui peuvent renfermer toutes sortes d’informations (descriptions de la page, mots clés, noms des auteurs, etc.) utilisées par les moteurs de recherche ou tout autre logiciel d’indexation qui peuvent se rendre sur votre site.

Vous pouvez également trouver des balises de style qui contiennent du code JavaScript et CSS lié à la page sur laquelle il se trouve et utilisable uniquement avec celle-ci.

Ligne 5

<title>Exemple de document XHTML</title>

D’un point de vue technique, la balise title n’est pas indispensable pour valider votre page, mais si vous ne l’ajoutez pas, le programme de validation vous y encouragera. Et une fois que vous aurez lu l’encadré « A propos des balises title », cela deviendra un automatisme.

Lignes 6 et 7

<meta http-equiv=“Content-type” content=“text/html; charset=iso-8859-1” />
<meta http-equiv=“Content-Language” content=“fr-fr” />

Ces deux balises de tête meta sont indispensables et fournissent des informations qui aident le navigateur et le serveur à gérer et à afficher correctement la page.

XHTML insiste sur l’importance de fournir des informations de codage des caractères, ce qui garantit que le navigateur affiche les pages avec un jeu de caractères approprié. Ici, dans la première balise meta, 8859-1 est le code pour Latin-1, l’alphabet et les symboles associés utilisés pour écrire l’anglais et d’autres langues (reportez-vous à la section « Règles de marquage XHTML », règle n°3 plus haut dans ce didacticiel). Remarquez que, étant des balises non enveloppantes, elles sont toutes les deux fermées par une combinaison espace-barre oblique-chevron.

Vous devez également indiquer des informations relatives à la langue. Dans la deuxième balise meta, j’indique que la langue est le français de France. Si vous choisissez un type de langue comme le Chinois, le navigateur affichera le texte de droite à gauche.

Lignes 8 et 9

<link href=“demo_styles.css” rel=“stylesheet” type=“text/css” />
</head>

La balise link relie le marquage XHTML à une feuille de style CSS, qui est un fichier séparé localisé à l’aide de la balise href. La balise link n’est pas indispensable, mais elle permet de relier une feuille de style à votre marquage et, en insérant le même lien de feuille de style à chaque page de votre site, vous pouvez faire en sorte que les pages partagent toutes le même jeu de styles. La balise @import permet également d’établir un lien avec une feuille de style.

Veillez à fermer l’en-tête du document à l’aide de la balise /head.

Ligne 10

<body>

Commence le corps du document. Le corps renferme le contenu qui s’affiche sur votre page.

Ligne 11

<!--en-tête-->

Il s’agit d’un commentaire. Il n’apparaît pas sur la page. Il permet uniquement de donner des indications sur la signification du code. Remarquez que, en XHTML, vous ne pouvez utiliser que deux tirets, au lieu du nombre illimité autorisé en HTML, au début et à la fin de chaque commentaire.

Ligne 12

<div id=“logo”> <img src=“logo_area.jpg” width=“150” height=“80” alt=“Logo Stylin” />

Les balises div permettent de diviser la page en zones rectangulaires semblables à des boîtes. Ces zones restent invisibles, sauf si vous activez leurs bords ou colorez leur arrière-plan. Cette balise div renferme un attribut id dont la valeur est « logo ». Vous pouvez utiliser ce nom d’identification pour cibler des styles CSS vers cette div afin d’en définir la position, la taille, la couleur d’arrière-plan, etc. Par ailleurs, la balise div vous permet de placer tout son contenu dans un groupe et de cibler les styles sur chaque balise qu’elle renferme.

La balise d’image du logo (img) est un élément non enveloppant. Elle est donc fermée par une barre oblique avant le chevron de fin. Remarquez la balise alt, qui s’affiche si le graphique ne se charge pas ou est énoncé par un lecteur d’écran. Vous devez utiliser des balises alt sur chaque image, même si la valeur est “” (c’est-à-dire deux guillemets sans rien dedans, pas même un espace). N’utilisez cette valeur que si l’image n’a aucun rôle d’information. Vous pouvez laisser les balises alt vierges partout, mais elles seront alors repérées par un programme de validation XHTML. Par ailleurs, ce n’est pas très convivial et n’aide en rien l’accessibilité. Notez que toutes les valeurs d’attributs (comme les valeurs 150 et 80 dans cet exemple) doivent désormais être mises entre guillemets. Oui, vraiment.

Lignes 13 à 15

<h3>un livre New Riders, par Charles Wyke-Smith</h3>
</div>
<!--fin de l’en-tête-->

Un titre de taille 3 est un élément de type bloc. Il se place donc sur une nouvelle ligne ou, plus précisément, sous l’élément précédent. Aucune balise br / n’est requise.

</div>

N’oubliez pas de fermer la division de l’en-tête à l’aide de la balise /div et de préciser que l’en-tête se termine ici.

Lignes 16 à 20

<!--contenu principal-->
<div class=“contentarea”>
  <h1>Passer au XHTML</h1>
  <p>La création de pages XHTML valides vous oblige uniquement à suivre un certain nombre de règles simples. Vous leur reprocherez peut-être dans un premier temps d’être contre-intuitives ou d’accroître votre charge de travail, mais elles ont des avantages non négligeables et facilitent vraiment le codage des sites. En outre, vous pouvez facilement valider le code XHTML en ligne pour vérifier qu’il est bien écrit.</p>
  <p>Voici les conditions clés pour une validation réussie de votre code XHTML.</p>

Ici, la zone de contenu commence par une balise div, qui est un élément de type bloc. Le titre est du texte de taille 1. Viennent ensuite deux paragraphes. Les balises de paragraphes, à l’instar de toutes les balises enveloppantes, doivent être fermées avec une barre oblique. Dans ce cas, </p>. Notez que les paragraphes sont des éléments de type bloc et qu’un espace avant et après chacun d’eux est défini par défaut.

Lignes 21 à 31

<ol>
  <li>Déclarez un DOCTYPE.</li>
  <li>Déclarez un espace de nom XML.</li>
  <li>Déclarez le type de votre contenu.</li>
  <li>Fermez toutes les balises, enveloppantes ou non enveloppantes.</li>
  <li>Toutes les balises doivent être correctement imbriquées.</li>
  <li>Les balises en ligne ne peuvent pas contenir de balises de type bloc.</li>
  <li>Ecrivez les balises en minuscules.</li>
  <li>Les attributs doivent avoir une valeur et être entourés de guillemets.</li>
  <li>Utilisez les équivalents codés pour représenter le crochet ouvrant et l’esperluette.</li>
</ol>

Il s’agit d’une liste ordonnée, chaque élément a un numéro par défaut. (Dans les listes non ordonnées (ul), les numéros sont remplacés par des puces par défaut).

Ligne 32

<a href=“more.htm”>plus d’infos sur ces règles</a>
Il s’agit d’un lien hypertexte vers une page appelée more.htm située dans le même dossier que la page active.
Lignes 33 et 34
</div>
<!--fin du contenu principal-->

Ceci ferme la division de la zone de contenu. Bien entendu, le commentaire est facultatif.

Lignes 35 à 37

<!--navigation-->
<div id=“navigation”>
<p>Voici quelques liens utiles du site Web du <acronym title=“World Wide Web Consortium”>WC3</acronym> (World Wide Web Consortium), l’organisme de régulation en matière de développement Web.</p>

Prenez l’habitude d’appliquer un style aux acronymes qui les différencie du texte qui les entoure. Internet Explorer ne fournit aucun style par défaut pour les acronymes ; Safari les met en italiques (comme dans les Figures 1 et 3). Si vous ajoutez une balise de titre à un acronyme, une info-bulle contenant le texte de l’attribut de titre s’affiche lorsque l’utilisateur passe sa souris dessus. Il est également recommandé d’indiquer la présence de l’info-bulle en soulignant l’acronyme d’une ligne pointillée. Pour ce faire, appliquez un style pointillé à la bordure inférieure de l’élément acronyme. N’utilisez pas de ligne continue, laquelle, par convention, indique plutôt la présence d’un lien. Vous pouvez appliquer les mêmes techniques de marquage à la balise abbr (abréviation).

Lignes 38 à 45

<ul>    <li><a href=“http://validator.w3.org”>Programme de validation XHTML du WC3</a></li>
  <li><a href=“http://jigsaw.w3.org/css-validator/”>Programme de validation CSS du WC3</a></li>   <li><a href=“http://www.w3.org/MarkUp/”>Ressources XHTML</a></li>
  <li><a href=“http://www.w3.org/Style/CSS/”>Ressources CSS</a></li>
</ul>
</div>
<!--fin de la navigation-->

Cette navigation se présente sous la forme d’une liste dont chaque élément est un lien. Tout ce passage est contenu dans un bloc div doté d’un ID qui vous permet de le référencer de manière précise à partir de la feuille de style. Notez qu’il n’y a aucun saut de ligne (ce qui, pour les puristes, relève du pur marquage de présentation) à la fin de chaque lien. Ils ne sont pas nécessaires. Par défaut, les liens apparaissent sur une ligne car ce sont des éléments en ligne. Ici toutefois, comme ils font partie d’éléments de liste, lesquels sont des éléments de type bloc, ils s’affichent les uns au-dessus des autres.

Lignes 46 à 50

<!--pied de page--> <div id=“homepagefooter”>
  <p>© 2004 Charlie Wyke-Smith et New Riders.</p>
</div>
<!--fin du pied de page-->

Le dernier élément de la page est une division qui contient le texte du pied de page à l’intérieur d’une balise de paragraphe.

Lignes 51 à 53

</body>
</html> <!--fin du document d’exemple-->

Il ne vous reste plus qu’à fermer le corps et la page et vous avez terminé. Des questions ? Non ? Bien ! Je continue...

HIERARCHIE DU DOCUMENT : JE VOUS PRESENTE LA FAMILLE XHTML

La hiérarchie du document est un autre concept important qu’il vous faut comprendre avant de passer à CSS. C’est une sorte d’arbre généalogique ou d’organigramme basé sur l’imbrication des balises XHTML d’une page. Une bonne façon de comprendre ce concept est d’extraire une partie du corps de page dont nous venons de parler et d’en supprimer le contenu pour mieux observer l’organisation des balises. Voici ce que cela donne :

<body>
<!--en-tête - c’est juste un commentaire, pas de code-->
<div id=“logo”>
  <img />
   <h3> </h3>
</div>
<!---fin de l’en-tête - le reste des balises a été supprimé pour plus de clarté-->
</body>

Vous pouvez maintenant observer clairement la relation entre les balises. Par exemple, dans le marquage, vous pouvez voir que la balise body contient (ou imbrique) toutes les autres balises. Vous pouvez également voir que la balise div (avec l’ID de « logo ») contient deux balises : une balise image et une balise head 3.

La Figure 4 illustre une autre façon de représenter cette structure : à l’aide d’un organigramme.

Fig. 4 : vous pouvez clairement observer la structure hiérarchique de ce diagramme.

En examinant cette vue hiérarchique, nous pouvons dire que les balises img et h3 sont toutes les deux les enfants de la balise div parce que cette dernière en est le conteneur. A l’inverse, la balise div est le parent des balises img et h3, lesquelles forment une fratrie, car elles ont la même balise parente. Enfin, la balise body est un ancêtre des balises img et h3, car ces dernières en descendent indirectement. De la même manière, les balises img et h3 (ainsi que la balise div, de ce point de vue) sont des descendants de la balise body.
Pour citer Sly Stone : « C’est une histoire de famille... »

En langage CSS, vous écrivez une sorte d’abrégé basé sur ces relations, par exemple
div#logo img {du style CSS ici}

Cette règle CSS cible uniquement les balises img à l’intérieur (ou descendant de) la div dont l’ID est « logo » (le signe # représente un ID en langage CSS). Cette règle signifie « toute image descendant de la div dont l’ID est “logo” ». Les autres balises img de la page ne sont pas affectées par cette règle parce qu’elles ne font pas partie de la division « logo ». De cette manière, vous pouvez ajouter une bordure autour de cette seule image ou définir ses marges afin de l’éloigner des éléments environnants.

Ce qu’il faut comprendre, c’est que chaque élément du corps de votre document est un descendant de la balise body et, en fonction de sa position dans le marquage, un élément peut être un ancêtre, un parent, un enfant ou un frère pour les autres balises de la hiérarchie du document.

En créant des règles qui utilisent (et souvent combinent) des références aux ID, aux classes et à la structure hiérarchique, vous vous donnez les moyens de désigner précisément quelles règles CSS affectent quels éléments XHTML.