De bonnes habitudes à prendre (1/2)

Pour coder

 

Quand vous créez vos pages, il y a quelques choses qu'il faut toujours avoir à l'esprit, une sorte de check-list permanente. Une fois que vous aurez pris ces habitudes, vous pourrez créer des pages et des sites sans y faire attention, et même corriger les mauvaises habitudes des logiciels comme Dreamweaver.

Un principe général : les outils sont conçus avec une finalité. C'est en les utilisant en vue de cette finalité que vous en tirerez le meilleur parti.

 

Séparer contenu et présentation

Ce conseil-là est le plus important de tous. Gardez-le toujours à l'esprit ! Le HTML pour le contenu et la structure de la page, le CSS pour la présentation.

Nous l'avons déjà dit dans notre introduction au HTML mais cela ne sera jamais trop répété : le HTML est fait pour gérer le contenu de votre page, pas sa présentation ! Inversement, le CSS est génial pour traiter tout ce qui concerne le style : couleurs, position, bordures, marges, polices, etc. Ces deux langages ont été conçus comme ça ; c'est en les utilisant dans leur respect de leur finalité première qu'on en tire le meilleur.

Alors ôtez de votre vocabulaire HTML toutes les balises de mise en forme, parmi lesquelles : <font>, <b>, <i>, <center> pour ne citer que les plus horribles. De même, il y a toute une série d'attributs à proscrire, notamment size, border, align … Finies les bêtises. Maintenant que vous savez faire une bordure ou changer la police grâce au CSS, ne le mettez pas pas dans votre HTML.

N'utilisez donc que des balises qui donnent du sens à ce qu'elles encadrent. Par exemple, au lieu de mettre un passage en italique avec <i>, mettez-le entre <em> et </em>, ce qui signifie que le navigateur doit accentuer ce passage (le plus souvent rendu … en italique !).

 

En respectant ce principe fondamental de séparation entre le contenu et sa présentation, non seulement vous aidez les personnes visuellement handicapées, mais vous vous facilitez le travail : il vous suffit de modifier simplement votre fichier CSS pour changer l'apparence de votre site, au lieu de repasser chaque page en revue !

 

Corrolaire : pas de tableau pour la mise en page

Le HTML n'est pas fait pour la mise en page, nous l'avons dit. Donc résistez à la tentation d'utiliser des tableaux pour faire votre mise en page. Si un jour, vous voulez que votre titre de page soit à gauche au lieu d'être centré ? Il faut refaire toutes les pages !

Réservez les tableaux à l'usage qui leur est destiné : présenter des données sous forme de tableau, tout simplement. Ils ralentissent l'affichage si vous les utilisez à des fins de positionnement (layout).

Pour la présentation, on ne le redira jamais assez : CSS !

Vous vous rendrez compte que même certains sites très connus ne respectent pas ce principe (comme Amazon par exemple).

 

Validez !

Valider ? Qu'est-ce que "valider" veut dire ? Il s'agit simplement de vérifier que vos fichiers HTML et CSS respectent la syntaxe correcte de ces deux langages. Il s'agit de vérifier que vos fichiers sont bien écrits, et qu'ils pourront donc être lus et interprétés par tous les navigateurs. Sinon, vous laissez le navigateur corriger lui-même les erreurs et chaque navigateur corrige différemment donc vous prenez des risques …

Heureusement, vous n'êtes pas obligés de vérifier toutes vos erreurs à la main, il existe des outils très bien pour ça. Le validateur de référence est celui du W3C, le groupe qui met aux points les standards du Web tels que le HTML ou le CSS pour s'assurer que tout le monde parle la même langue.

Avec ce validateur, on se rend par exemple compte que la page d'accueil d'Amazon comporte 733 fautes pour 780 lignes, soit près d'une faute par ligne. Autant dire que s'ils avaient suivi ma leçon sur le HTML, ça ne serait pas le cas !

Valider permet de vérifier que vous avez écrit correctement vos fichiers. C'est aussi un excellent moyen d'apprendre. En repérant vos erreurs, vous apprenez à ne plus les faire, c'est très instructif.

Pensez également à valider vos feuilles de styles CSS, bien qu'il y soit plus difficile de faire des erreurs.

 

Indentez votre code

Pensez à utiliser les tabulations pour indenter votre code autant que possible. Il n'en sera que plus facile à relire et à corriger. Et cela permet de faire ressortir la structure de la page, si jamais vous avez des modifications à y apporter.

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French