Guide de Bonne Conduite à l'Usage des Codeurs

Vous êtes codeur ? Du moins, vous avez vocation à l'être, et vous proposez vos services sur certains forums d'entraide, ou encore vous personnalisez vous même votre propre forum avec vos connaissances durement acquises ? Voici un article pour vous rappeler quelques bonnes manières à garder en tête ;)

Introduction

Hello la compagnie !

Depuis que je fournis mes services de codeuse sur certains forums de ForumActif, il m'arrive de jeter un oeil à ce que mes collègues codeurs peuvent produire et de remarquer de petites erreurs de ci de là qui titillent mon esprit professionnel XD Je suis évidemment loin d'être infaillible moi-même, sans oublier que je conserve de mauvaises habitudes en toute connaissance de cause, mais je pense que ça ne serait pas plus mal de faire un petit récapitulatif des trucs à savoir ! Le voici donc !

Deux mots sur les règles de base du XHTML

Le Doctype utilisé par ForumActif est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Cela signifie que les pages sont codées en XHTML Transitionnel. Inutile donc de chercher à vouloir épater la galerie en utilisant du HTML5 ! Le XHTML est une version du HTML4 possédant les caractéristiques du langage XML, en pratique, cela veut dire que de nouvelles règles y ont été ajoutées :

  • Toutes les balises doivent être fermées, y compris les balises 'seules' telles que br ou img qui sont donc désormais fermées par un slash : <br /> <hr /> <img /> <input /> ;
  • L'ordre d'imbrication des balises doit-être strictement respecté ;
  • Les noms de balises et divers attributs doivent toujours êtres en minuscules. Pas de BODY ou autre TABLE ;
  • Les attributs doivent toujours être entre guillemets (pas de <table width=500> mais <table width="500">) ;
  • Il ne doit y avoir qu'une seule définition de document (html » head » /head » body » /body » /html), ce qui sur ForumActif est fait une bonne fois pour toutes via overall_header et overall_footer. Quand vous utilisez un tutoriel trouvé sur internet pour réaliser votre code, pensez bien à en retirer ces balises.

Le XHTML Transitionnal autorise l'usage de balises obsolètes (telles que center ou font). Néanmoins, dans la mesure où elles pourraient être abandonnées à tout moment dans les évolutions du HTML, je vous conseille fortement d'arrêter de vous en servir ;)


Séparer le fond de la forme

Vous savez qu'il est possible d'insérer du CSS directement dans le code HTML via l'attribut style. Néanmoins, cette méthode est à éviter coûte que coûte pour diverses raisons dont la principale est la mise à jour. En effet, imaginons par exemple que vous utilisiez un style indiquant au texte d'être noir, parce que le noir c'est cool. Vous décidez de changer le design de votre forum, et son nouveau fond est noir. Vous devez à présent modifier tous les endroits où vous aviez défini le texte en noir ! Quelle prise de tête !

Bref, prenez l'habitude de toujours séparer la mise en forme du contenu, créez des classes CSS. Y compris, par ailleurs, si vous n'utilisez votre mise en forme qu'à un seul endroit. Pas de CSS dans votre HTML. Attention aussi aux attributs de mise en forme dans certains éléments HTML (le width des tableaux, le border des images...) qui encore une fois sont à éviter ;)


Pensez à la sémantique du document

On l'oublie souvent, mais le HTML est un langage de description qui est supposé être sémantique. Chaque balise possède un sens bien précis : un paragraphe, une citation, un code, un titre, une liste, un élément de liste. Utiliser, par exemple, la balise blockquote pour bénéficier des marges automatiques, c'est un peu comme si vous écriviez "soleil" sur votre mur en espérant qu'il vous réchauffe, ça n'a aucun sens. Votre document doit pouvoir être lu et interprété par un robot : "Ici c'est un titre, ici c'est un paragraphe, ici c'est une citation...". C'est utile pour des tas de choses : moteurs de recherche (référencement), logiciels pour aveugles...

C'est d'ailleurs pour ça que l'on a remplacé les balises bold (b) et italic (i) (dont le sens implique une mise en forme bien spécifique) par strong et emphasise qui sont donc des mises en valeur que vous pouvez redéfinir à votre guise via le CSS. Vous comprendrez donc pourquoi toutes les balises de mise en forme (font, center, b, i, u...) sont désormais obsolètes !

De la même façon, les puristes les plus acharnés rappelleront que les tableaux ne sont pas faits pour de la mise en page. Étant fâchée avec le positionnement CSS, je continue quand même à les utiliser, mais c'est mal x)

Moralité, utilisez les balises titres (h1, h2, ... , h6) pour représenter un titre (et un sous-titre), utilisez les balises paragraphes pour représenter un paragraphe, réservez les fieldset pour les formulaires et les blockquote pour les citations, et n'utilisez les deux balises génériques (alias div et span) que si c'est vraiment nécessaire pour une mise en page (ou pour séparer les blocs les uns des autres, ou pour attribuer un identifiant)

Accessoirement, on ne met jamais de bloc dans un élément inline (pas de div dans un span, pas de paragraphe dans un lien, pas de titre - oui, les balises de titres sont des blocs - dans un span...). Cela reviendrait à... à mettre une boite dans une feuille de papier O_o Par contre, vous pouvez utiliser la propriété CSS display pour transformer un bloc en élément inline et vice versa, quand c'est utile.


Mes conseils

  • Ne vous reposez pas sur vos lauriers, remettez-vous toujours en question !
    Je ne le répèterai jamais assez : non, vous ne savez pas tout, on en apprend tous les jours ! Ca fera bientôt dix ans que je code, je suis donc passée moi-même par toutes les étapes possibles et imaginables (j'ai découvert le CSS sur le tard par exemple XD), et depuis que j'entretiens mes compétences en codant pour les administrateurs de forums, j'ai pu voir passer des choses terrifiantes de la part des codeurs du dimanche, tout comme j'ai pu apprendre des trucs intéressants. Tenez, par exemple, saviez vous qu'il existe une balise acronym en HTML ? Elle vous permet de rajouter la définition d'un acronyme via une bulle d'aide quand vous survolez le terme concerné.

  • Ayez toujours de bonnes références sous le coude
    Outre le Site du Zéro avec lequel j'apprends toujours énormément même maintenant, ma bible de référence est le site W3Schools (malheureusement en anglais), je vous le recommande chaudement ! Ne serait-ce que pour le HTML il explique chaque balise, son utilisation, les attributs associés, l'interopérabilité avec les navigateurs et l'utilisation valide ou non selon le Doctype utilisé. Évidemment, il fait de même pour le CSS - entre autres choses - et surtout chaque définition de balise est accompagnée d'un exemple et d'un éditeur "Try it Yourself" pour tester vous-même et en direct ce que donne un code !

  • Renseignez-vous sur les normes du HTML et du CSS
    Elles ne sont pas là pour faire joli ! Il y a des gens qui font des études très poussées dans le domaine, faites leur un peu confiance au lieu de n'en faire qu'à votre tête ;) Quitte à faire un choix qui va à l'encontre des normes, faites le en toute connaissance de cause et en ayant bien pesé le pour et le contre (comme c'est mon cas pour les tableaux ou pour l'attribut target des liens).

  • Codez clairement : Commentez, écrivez des noms de classes explicites
    En particulier dans le cas où vous codez pour quelqu'un, veillez à faire un code clair et lisible, facile à maintenir pour quelqu'un n'ayant que peu de connaissances dans le domaine. Faites des sauts de ligne, indentez votre code, choisissez des noms de classe clairs et lisibles (plutôt que truc, écrivez BoiteContenu par exemple)

  • Pensez à tout le monde
    Votre connexion est peut être super rapide, vous méprisez peut-être Internet Explorer, vous avez peut-être une super police d'écriture installée sur votre PC, mais ce n'est pas le cas de tout le monde ! Veillez à vérifier que votre code passe sur une majorité de navigateurs (utilisez les kits CSS -moz, -webkit, -o, entre autres), abstenez vous de faire trop de fantaisies avec le javascript (lourd à charger, et lourd visuellement si c'est mal géré), et utilisez des polices d'écriture standard (cherchez 'Font Stacks' sur Google pour avoir des listes de polices similaires sur Mac, Windows, Linux).

Il y aurait certainement beaucoup d'autres choses à dire, mais globalement mon conseil est de simplement toujours savoir ce que vous faites et où vous allez. Savoir copier-coller un code ne fait pas de vous un codeur si vous ne savez pas le modifier en toute connaissance de cause ! Par contre, il n'y a aucune honte à ne pas savoir tout faire, ou à ne pas connaître certaines balises. Sachez simplement vous renseigner dès que vous tombez sur quelque chose de nouveau, ou bien que vous cherchez à obtenir un effet que vous ne maîtrisez pas ;) Il n'y a rien de pire qu'un 'codeur' qui croit maîtriser son sujet et persiste dans des erreurs bêtes par vaine fierté !