Après une série de billets pour le “grand public”, nous voici dans la nouvelle série consacré aux professionnels du web amenés à écrire des lignes de codes XHTML et CSS. Comme tout ce qui constitue l’outil Internet, faire des lignes de codes est potentiellement donné à toutes les personnes se donnant la peine d’étudier les différents langages de programmations.

Une fois de plus, deux types de personnes vont donc se démarquer : ceux qui font du web “sexy” et les autres.

Ressources

Les ressources à ce niveau ne sont ni chères ni compliquées. Pour les personnes qui préfèrent avoir quelque chose en main, les mémentos XHTML et CSS seront vos plus fidèles alliés. Pour les autres, deux sites internet peuvent par exemple servir de bible à savoir X H T M L et mediabox.

XHTML et CSS, mécékoica ?

Essayons de faire la chose simple en comparant à quelque chose de connue comme Word. Lorsque vous créez un document Word, vous avez deux moyens de faire.

Le premier étant de créer votre document puis de passer sur chacun de vos éléments afin de mettre en page votre document. Bilan : long, fastidieux et pas toujours cohérents du début à la fin. Voici l’exemple du web comme il ne doit plus être, un seul élément pour tout définir le tout, très compliqué à maintenir correctement et peu ouvert aux collaborateurs.

Seconde option, taper votre document au kilomètre sans vous soucier d’autres choses que de la structure. Faire des paragraphes, mettre vos titres de niveau 1, puis 2, puis 3, vos listes et tutiquanti. Une fois l’opération terminée, utiliser les styles du document et les définir pour chacun des éléments de votre document. Enfin, les appliquer. Si vous faites de cette manière, vous voila dans le web actuel, celui que tout le monde devrait faire et divisé en deux parties : la structure (HTML ou XHTML) et le fichier de style (CSS).

Pour un web plus “sexy”

Faire des lignes de codes sexy est une véritable mentalité et un réflexe qui devrait être présent chez chacun des intervenants amenés à écrire une ligne de code. Voici quelques avantages à rendre du code sexy.

Faciliter la lecture du code

Prenons un exemple trouvé lors d’une de mes lectures de la semaine dernière. Le bout de code XHTML suivant se trouve sur le blog des microformateurs. Les microformateurs sont un groupe réunis autour d’un même but, faire découvrir les microformats au plus grand nombre et par la même occasion, la sémantique sur le web.

<div class="vcard">
<div class="fn">Christophe Ducamp</div>
<div class="adr">
<span class="locality">Paris</span>,
<span class="country-name">France</span></div>
</div>

Comme vous pourrez facilement vous en apercevoir, se retrouver dans ce petit code n’est pas forcément facile. La raison : il n’est pas indenté. La première étape vers un code plus sexy est donc l’indentation du code afin de rendre la lecture pour les différents intervenants plus facile. Le même code indenté donne donc la chose suivante :

<div class="vcard">
	<div class="fn">Christophe Ducamp</div>
	<div class="adr">
		<span class="locality">Paris</span>,
		<span class="country-name">France</span>
	</div>
</div>

Ce n’est pas très compliqué non ? Des tabulations correctement placées nous permettent de lire plus facilement le code et de séparer visuellement les différents éléments de la page.

Utiliser les bonnes balises aux bons endroits

Toujours en nous basant sur le code précédent, nous pouvons nous poser la question du balisage XHTML utilisé. Il utilise en l’occurrence la balise div représentant un conteneur générique neutre de type bloc (oui ça se complique). Le balisage utilisé est donc en soit acceptable. Seulement pour ma part et pour beaucoup d’intégrateurs, le choix de l’imbrication de plusieurs div n’est pas forcément une bonne solution, non seulement car cela n’a pas beaucoup de sens mais en plus car cela peut causer bien des problèmes selon les navigateurs employés.

Opter pour un bon balisage permet donc de donner du sens à la structure en l’identifiant d’une manière correcte et significative. Nous pourrions par exemple dans ce cas (une carte de visite) utiliser une liste non-numéroté avec la balise ul et les éléments de liste li. Pourquoi ces balises ? Car une carte de visite n’est après tout qu’un ensemble d’informations listées et utilisées afin de désigner un individu.

<ul class="vcard">
	<li class="fn">Christophe Ducamp</li>
	<li class="adr">
		<ul>
			<li class="locality">Paris</li>
			<li class="country-name">France</li>
		</ul>
	</li>
</ul>

Penser aux autres

Une autre étape dans la mise en place dans code plus sexy est tout simplement l’accessibilité. Par accessibilité nous entendons accessibilité aux informations. Pourquoi ? Car les personnes handicapées représentent tout de même environ 1 personne sur 10 en Europe. Vous vous devez, en tant que professionnel du web penser à ces personnes car ils ont comme tout le monde le droit de visiter votre site internet. Sans tomber dans l’extrême, il est tout simplement utile de noter qu’un site associant XHTML et CSS former autour de bonnes pratiques et de bon balisage répondra environ au trois quarts des demandes du référentiel général d’accessibilité des administrations. Le dernier quart étant essentiellement constitué de problématiques associées à la bonne dégradation du javascript (vive le web 2.0) et les pratiques vraiment spécifiques à l’accessibilité comme l’utilisation des attributs lang, des accesskey ou encore de tabindex (tabindex dont vous pourriez même vous passer en faisant correctement votre travail). Notons que ces attributs spécifiques à l’accessibilité sont tout aussi facile à mettre en place et ne sont donc qu’un simple coup de main à prendre.

Prenons le cas de lang. L’attribut lang est à utiliser lorsque l’on veut spécifier la langue utilisée dans la balise en cours. Elle sert en plus à assister le navigateur dans le choix du type de guillemet ou encore à assister les vérificateurs de grammaire et d’orthographe. Coté accessibilité, l’utilisation de lang permet aux synthétiseurs vocaux d’utiliser la bonne voix et donc la bonne intonation/le bon accent.

Je définis donc dans un premier temps la langue utilisée sur mon site, le Français de France (et non pas le Français du Canada par exemple qui serait fr-CA)

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr-FR">
</html>

Mais dans mon contenu, au grès des articles, je pourrais très bien citer Sir Richard Steele avec la citation suivante en anglais :

<p lang="uk">
	<q>Reading is to the mind what exercise is to the body.</q>
	<cite>Sir Richard Steele</cite>
</p>

Modifier la langue pour qu’un lecteur vocal puisse effectuer son travail correctement ? Parfaitement inutile pour 99% du web. Utile pour le pourcentage restant. Non, très utile pour le pourcentage restant.

Sémantiquement votre

Dernière étape, optionnelle certes, s’ouvrir aux futurs technologies comme celles du web sémantique. Deux possibilité Microformats et RDFa s’offrent donc à vous. Ne rentrons pas dans le débat tout de suite mais occupons nous du principal avantage procuré par ces technologies : l’ouverture.

Utiliser l’une ou l’autre de ces technologies et les mettre en place permet donc de se faire comprendre et de donner un sens sémantique à son contenu. L’exemple le plus concret étant celui du “sac de patate” dont use et abuse les enseignants de mathématiques afin d’obliger les élèves à préciser la nature exacte d’un nombre. Le parallèle peut donc être fait avec le web, reprenons pour cela notre carte de visite qui est donc microformaté (l’une des deux manières de faire) :

<ul class="vcard">
	<li class="fn">Christophe Ducamp</li>
	<li class="adr">
		<ul>
			<li class="locality">Paris</li>
			<li class="country-name">France</li>
		</ul>
	</li>
</ul>

Comme vous pourrez le voir, cette petite carte de visite contiens un nom, un prénom, une ville et un pays. Mais comment le dire à un ordinateur ? Réponse proposée par les microformats, utiliser les classes CSS. Ainsi vcard, fn, adr, locality, country-name sont autant de microformats compris par certains outils comme les moteurs de recherche.

La finalité

Nous avons donc rendu notre code plus lisible, lui avons donné une structure correcte, nous l’avons rendu accessible et enfin, nous lui avons donné un sens. Mais dans quel but ? Réponse simple, le référencement naturel et donc 90% du travail qui permettra de vous faire comprendre par l’ensemble du web et ainsi vous mettre en avant d’une façon correcte et pertinente. Ah ce référencement, un mot tellement simple qui fera plaisir à plus d’un décideur…

Prochaine étape, le CSS…