2. Indentation et Commentaires¶

Maintenant que vous connaissez la théorie du HTML, nous allons coder ! On va voir ici les bonnes pratiques et LA règle à respecter pour avoir un code propre, qui marche.

Indentation¶

La première bonne pratique à respecter est l'indentation. Voyez l'indentation comme un principe de poupées Russes, chaque élément contenu dans des balises doit avoir une tabulation en amont. Ainsi, notre exemple :

<p>Apprendre l'HTML pas à pas</p>

devient :

<p>
    Apprendre l'HTML pas à pas
</p>

De cette manière, votre code sera plus facilement lisible.

Imbrication des balises¶

En HTML, il est possible d'imbriquer les balises. C'est à dire qu'on peut mettre des balises dans des balises. Par exemple, voilà une balise de liste <ul> :

<ul>
</ul>

Dans cette balise de liste, je vais y ajouter un élément liste <li> :

<ul>
    <li>
        Un éléments d'une liste.
    </li>
</ul>

Il est possible d'ajouter autant de balise que l'on veut, avec un niveau d'imbrication illimité. Par exemple, on a ici deux listes imbriquées les unes dans les autres :

<ul>
    <li>
        Un élément d'une liste.
    </li>
    <li>
        Un élément d'une liste contenant une liste.
        <ul>
            <li>
                Un élément d'une liste.
            </li>
            <li>
                Un élément d'une liste.
            </li>
        </ul>
    </li>
    <li>
        Un éléments d'une liste.
    </li>
    <li>
        Un éléments d'une liste.
    </li>
</ul>

Commentaires¶

Rapidement, votre code va compter plusieurs centaines ou plusieurs milliers de lignes. Dans ce cas, il est important de commenter son code pour deux raisons :

Pouvoir s'y retrouver quand, 6 mois plus tard, vous aurez à mettre à jour votre code. Rendre votre code plus accessible à une personne tierce qui aurait à intervenir sur votre site.

Voilà par exemple notre double liste imbriquée commentée :

<!-- Ouverture de la première liste -->
<ul>
    <li>
        Un élément d'une liste contenant une liste.
        <!-- Ouverture de la seconde liste -->
        <ul>
            <li>
                Un élément d'une liste.
            </li>
            <li>
                Un élément d'une liste.
            </li>
        </ul>
        <!-- Fermeture de la seconde liste -->
    </li>
    <li>
        Un élément d'une liste.
    </li>
    <li>
        Un élément d'une liste.
    </li>
</ul>
<!-- Fermeture de la première liste -->

C'est plus clair comme ça, non ? Un commentaire doit être compris entre <!-- et -->. Tout ce qui est compris entre ces deux éléments n'est pas visible par les internautes, donc n'hésitez pas à les utiliser !

Erreurs communes¶

Les deux principales erreurs que je vois chez mes élèves sont les suivantes :

• une balise non fermée,
• des balises croisées.
• Les balises non fermées

Voilà un exemple de balise <p> non fermée :

<p>un paragraphe.

Si vous respectez l'indentation, cela devrait vous sauter au yeux :

<p>
    un paragraphe.
Il manque ici la balise fermante </p>

Les balises croisées¶

Voilà un exemple de balises croisées :

<ul>
<li>
    un paragraphe.
</ul>
</li>

Là encore, si on respecte l'indentation, on voit bien que la balise </ul> est fermée avant la balise </li>, ce qui ne respecte pas le principe d'imbrication :

<ul>
    <li>
        un paragraphe.
</ul>
    </li>

Voilà donc à quoi sert l'indentation : à éviter de faire des erreurs !