Pensez à fermer vos balises... Soyez bavards !

Ce billet est plus destiné aux débutants (quoique !) dans le développement de sites Internet et qui n'ont pas encore acquis les quelques automatismes bien utiles pour ne pas perdre trop de temps.

Trop souvent, on s'aperçoit qu'un mauvais affichage d'une page sur le navigateur vient d'une balise pas fermée ou pas fermée au bon endroit. Avec un peu de discipline, c'est quelque chose qui ne doit plus arriver.

Nous ne prétendons pas détenir la solution miracle, chacun prendra, au fil du temps, ses propres "bonnes habitudes", mais nous proposons un petit coup de main à ceux que ça intéresse.

Pour commencer, la fermeture d'une balise doit devenir un réflexe, un automatisme. Ainsi, lorsque nous commençons à coder :

Ici la déclaration du doctype
<html>
</html>

Ensuite, nous n'avons plus à nous en préoccuper, nous pouvons continuer à insérer les autres balises entre celles-ci :

<html>
<head>
pouf pouf le contenu de l'entête
</head>
</html>

... et nous continuons

<html>
<head>
pouf pouf le contenu de l'entête
</head>
<body>
<div class="notre_class1">
</div><!-- fin de notre_class1 -->
</body>
</html>

STOP ! Avez-vous remarqué ? Il y a un commentaire d'ajouté : <!-- fin de notre_class1 --> ... C'est ce que certains appellent du bavardage. Pour l'exemple ci-dessus, ça peut paraître un peu inutile, mais imaginez une page plus complexe avec des balises "div" imbriquées. Il faudra bien fermer chacune de ces balises et surtout au bon endroit. les commentaires peuvent alors se révèler être d'un grand secours. Ainsi nous aurons :

<html>
<head>
pouf pouf le contenu de l'entête
</head>
<body>
<div class="notre_class1">
<p>bla bla bla le contenu</p>
<div class="notre_class2"> 
<p>bla bla bla le contenu</p> 
</div> <!-- fin de notre_class2 --> 
<div class="notre_class3">
<ul>
<li>bla bla bla item 1 de la liste</li>
<li>bla bla bla item 2 de la liste</li>
</ul>
</div><!-- fin de notre_class3 -->
</div><!-- fin de notre_class1 -->
</body>
</html>

... Ce qui va nous permettre maintenant de réaliser facilement l'indentation du code :

<html>
  <head>
    pouf pouf le contenu de l'entête
  </head>
  <body>
    <div class="notre_class1">
      <p>bla bla bla le contenu</p>
      <div class="notre_class2">
        <p>bla bla bla le contenu</p>
      </div><!-- fin de notre_class2 -->
      <div class="notre_class3">
        <ul>
          <li>bla bla bla item 1 de la liste</li>
          <li>bla bla bla item 2 de la liste</li>
        </ul>
      </div><!-- fin de notre_class3 -->
    </div><!-- fin de notre_class1 -->
  </body>
</html>

Attention, le mieux est souvent l'ennemi du bien, ne soyez pas trop bavard, n'alourdissez pas vos pages de commentaires inutiles.

Complémentaires à ce billet et incontournables

Quelques outils de validation en ligne

Bon développement à toutes et tous ;)

Par Dominique Cocagne - lundi 25 septembre 2006 à 13:35

Astuces - #282 - Lu 5355 fois - Intérêt du billet: 2.8(10) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le lundi 25 septembre 2006 à 13:57, par Maxwell :: site :: #

Un petit rappel qui va surement faire du bien..!

Merci pour les liens.

Le lundi 25 septembre 2006 à 13:58, par Sébastien Billard :: site :: #

Même pour le contenu, il est bon de d'abord mettre ses balises d'ouverture et fermeture, puis de remplir, au lieu de coder linéairement.

D'abord :
<p></p>
Ensuite
<p>Mon paragraphe</p>

Le lundi 25 septembre 2006 à 14:35, par FlorentG :: #

Le mieux est encore un éditeur qui valide en temps réel le code ;)

Le lundi 25 septembre 2006 à 15:22, par Talou :: site :: #

Et c'est juste le moment de signaler que Scite permet de fermer automatiquement les balises (option xml.auto.close.tags=1) et peut même exécuter tidy pour fixer l'indentation (et le code, par la même occasion).
La commande est :
tidy -i -wrap 80 -m nom_du_fichier.html

Le lundi 25 septembre 2006 à 16:01, par Guillaume :: site :: #

@FlorentG

Si tu en connait un je suis preneur ;)

Le lundi 25 septembre 2006 à 16:51, par Yannou :: site :: #

Ce qui peut aider, c'est également d'indenter au fur et à mesure, et pas à la fin. Ou d'utiliser un éditeur qui le fait automatiquement.

Le lundi 25 septembre 2006 à 17:09, par QuentinC :: site :: #

Un rappel qui ne sera pas des plus inutiles je pense.
Personnellement, j'ai pris l'habitude, dès que j'écris <balise>, d'écrire également directement </balise> après, et ensuite seulement inscrire ce qui y doit.
Ceci dit, il est vrai que quand on code un truc en php, c'est plus aussi évident à garder comme habitude...
Merci pour les divers liens vers quelques validateurs que je ne connaissais pas.

Le lundi 25 septembre 2006 à 20:16, par FlorentG :: #

@Guillaume

jEdit avec le plugin XML permet de le faire :)

Le mardi 26 septembre 2006 à 08:23, par jerboa :: site :: #

je voulais juste dire aussi fermer vos balises unique.. <br /> <hr /> .. enfin merci des ces petit rapeles toujours bien venus.

Le mardi 26 septembre 2006 à 09:15, par Christophe :: site :: #

Les commentaires et annotations de code ont été à juste titre longuement sollicités par les intervenants au ParisWeb2006. Il s'agit là d'une des règles de la production qualitative et des bonnes habitudes du web à placer parmi les standards ! :)

Le mardi 26 septembre 2006 à 10:09, par suze :: #

on se croirait dans le jeu des sept erreurs. cependant je n'en ai vu qu'une :
<body>
</html>

Le mardi 26 septembre 2006 à 11:01, par 6clicks :: #

hihi c'est vrais ca la balise body de la fin est pas fermée.... bhein bravo... :-)

Le mardi 26 septembre 2006 à 11:03, par cynic- :: #

Bien vu suze ;)

Le mardi 26 septembre 2006 à 11:25, par dominique :: site :: #

Bonjour à vous :)

Ca prouve qu'il y en a au moins UN qui a tout lu... Merci suze ;)

J'ai corrigé l'erreur, oupsss !
Merci pour vos commentaires.

dominique

Le mardi 26 septembre 2006 à 11:53, par Stéphane Carpentier :: #

Merci pour le rappel des fondamentaux !
Pour ma part les commentaires de fin de div : <!-- fin de notre_class2 -->
doivent être plus simples.
Je trouve que des commentaires de fermeture de style:
<!-- /#notre_div -->
et
<!-- /.notre_class2 -->
sont plus visuels pour s'y repérer dans le code.

Le mardi 26 septembre 2006 à 12:13, par xavier :: site :: #

Bonjour,

Un commentaire sur les commentaires : c'est effectivement une bonne idée d'ajouter un commentaire à la fermeture d'un élément lorsqu'il permet de repérer facilement le lieu de l'ouverture de l'élément en question. Pour ce faire un tel commentaire peut s'appuyer sur le contenu d'un attribut id, mais pas sur celui de l'attribut class (il risque sinon d'induire la confusion lorsqu'une classe définie à bon escient (cad ne remplaçant pas un id) se voit utilisée plusieurs fois.

Le mardi 26 septembre 2006 à 20:15, par aNou :: site :: #

Bonjour,
Très bonne habitude. C'est comme la porte du frigo, on doit y penser absolument.
À propos, une question de fermeture :
Pour les balises uniques, type <br />, l'espace entre br et / est-il obligatoire ou c'est juste une convention ?

Le mardi 26 septembre 2006 à 23:00, par Felipe :: site :: #

@aNou: ce billet sur Blog & Blues de Laurent Denis répondra à ton interrogation je pense :) (trouvé via le sujet <br/> source de problèmes d'affichage du Forum)

Le vendredi 29 septembre 2006 à 17:51, par aNou :: site :: #

>Felipe : merci ;-)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.