Pensez à fermer vos balises... Soyez bavards !

Actualité par (webmestre, Courdimanche)
Créé le , mis à jour le (16240 lectures)

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 ;)

Commentaires

Maxwell a dit le

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

Merci pour les liens.

Sébastien Billard a dit le

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>

FlorentG a dit le

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

Talou a dit le

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

Guillaume a dit le

@FlorentG

Si tu en connait un je suis preneur ;)

Yannou a dit le

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.

QuentinC a dit le

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.

FlorentG a dit le

@Guillaume

jEdit avec le plugin XML permet de le faire :)

jerboa a dit le

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

Christophe a dit le

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 ! :)

suze a dit le

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

6clicks a dit le

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

cynic- a dit le

Bien vu suze ;)

dominique a dit le

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

Stéphane Carpentier a dit le

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.

xavier a dit le

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.

aNou a dit le

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 ?

Felipe a dit le

@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)

aNou a dit le

>Felipe : merci ;-)