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>Portez ce vieux whisky au juge blond qui fume.</p>
				
			

devient :

				
					<p>
						Portez ce vieux whisky au juge blond qui fume.
					</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 élement d'une liste.
						</li>
					</ul>
				
			

Notez que les balises li sont elles aussi indentées. Cela permet de bien visualiser l'imbrication des balises les unes dans les autres ; et d'éviter les erreurs.

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 élement d'une liste.
						</li>
						<li>
							Un élement d'une liste conteant une liste.
							<ul>
								<li>
									Un élement d'une liste.
								</li>
								<li>
									Un élement d'une liste.
								</li>
								<li>
									Un élement d'une liste.
								</li>
							</ul>
						</li>
						<li>
							Un élement d'une liste.
						</li>
						<li>
							Un élement 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 exempe notre double liste imbriquée commentée :

				
					<!-- Ouverture de la première liste -->
					<ul>
						<li>
							Un élement d'une liste conteant une liste.
							<!-- Ouverture de la seconde liste -->
							<ul>
								<li>
									Un élement d'une liste.
								</li>
								<li>
									Un élement d'une liste.
								</li>
								<li>
									Un élement d'une liste.
								</li>
							</ul>
							<!-- Fermeture de la seconde liste -->
						</li>
						<li>
							Un élement d'une liste.
						</li>
						<li>
							Un élement 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 !
Et n'oubliez pas, on ne croise jamais les effluves !