Conception & Réalisation de sites Web

Un code propre et lisible

Constat de départ

Les navigateurs ne prennent pas en compte les sauts de ligne et les multiples espace que l'on met dans notre code HTML.

Considérons les 2 extraits de code HTML suivant :

<p>         Ma phrase         avec des   espaces
et des sauts
      de ligne
</p>

<p>Ma phrase avec des espaces et des sauts de ligne</p>

Ces deux exemples donneront le même résultat dans votre navigateur, c'est à dire :

Ma phrase avec des espaces et des sauts de ligne

Nous sommes donc libres de mettre en forme notre code HTML comme bon nous semble !

Indenter son code

En plaçant judicieusement des sauts de lignes et des tabulations dans notre code source, nous allons veiller à mettre en évidence les balises ouvrantes et les balises fermantes qui leur correspondent. On dit alors que l'on indente son code.

L'identation permet de relire plus facilement son code, la présentation mettant en évidence les incohérences.

Par exemple, le code suivant contient une erreur et il parait difficile de la détecter :

<html>
<head>      <title>Mon titre         </title>
   <body>   Mon texte ici.</body></html>

Une fois indenté, il est plus facile de voir qu'il manque la fermeture de la balise head :

<html>
   <head>
      <title>Mon titre</title>
   <body>
      Mon texte ici.
   </body>
</html>

Les commentaires

Il est conseillé de mettre des commentaires dans son code HTML afin de faciliter sa compréhension. Ceci sera très appréciable lorsque l'on aura besoin de modifier sa page Web plusieurs mois après son élaboration.

Un commentaire sera donc un texte libre, qui sera lisible dans le code source, mais pas affiché par le navigateur. Un commentaire débute pars les caractères <!-- et se termine par -->

Exemple de commentaires :

<!-- Début du menu -->
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="presentation.html">Presentation</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- Fin du menu -->

Dans votre navigateur vous ne verrez que la liste ul :

Balise Indication donnée au navigateur
<!-- Début d'un commentaire, plus rien ne sera afficher par le navigateur jusqu'à la fermeture du commentaire.
--> Fermeture d'un commentaire.

S'assurer de la validité de son code

Les règles (ou normes) du HTML et du XHTML sont rédigées par le Worlde Wide Web Consortium plus souvent appelé W3C.

Le W3C propose un outil pour vérifier la validité de son code. Il listera vos erreurs jusqu'à temps que vous ayez une page valide : http://validator.w3.org/

Un code valide est le meilleur moyen d'augmenter ses chances d'avoir une page visible correctement sur l'ensemble des navigateurs.

Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!