Pensez à fermer vos balises... Soyez bavards !

Actualité

Publié par le , mis à jour le (24115 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

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>

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

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.

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.

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

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

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

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.

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.

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 ?

Commentaires clos