Télécharger le PDF du cours
Les bonnes pratiques sont là pour nous aider à coder plus proprement et plus lisiblement, donc pour nous faciliter la vie, pas le contraire !
Nous allons dans cette partie parler d’indentation et de commentaires HTML.
Retours à la ligne et indentation
Indenter correspond à créer des retraits en début de ligne dans votre éditeur de façon cohérente et logique.
Vous l’avez certainement remarqué dans les codes précédents : j’accentue plus au moins le retrait à gauche de chacune de mes lignes de code.
Indenter va nous permettre d’avoir un code plus propre et plus lisible, donc plus compréhensible. Indenter permet également de plus facilement détecter les erreurs potentielles dans un code.
Le but de l’indentation est de nous permettre de discerner plus facilement les différents éléments ou parties de code. Regardez plutôt les deux exemples suivants.
Sans indentation :
Avec indentation :
J’espère que vous serez d’accord pour dire que le second code est plus clair que le premier.
Concernant l’indentation, il n’y a pas de règle absolue, notamment par rapport à la taille du retrait de chaque ligne et différents éditeurs peuvent d’ailleurs posséder différentes règles par défaut sur ce sujet.
Pour ma part, je me contente de retourner à la ligne et d’effectuer une nouvelle tabulation à chaque fois que j’ouvre un nouvel élément dans un autre, ce qui correspond sur mon éditeur à un retrait de 4 espaces.
Par exemple, ci-dessus, vous pouvez voir que j’ai utilisé une tabulation avant d’écrire la balise ouvrante de mon élément head qui est contenu dans mon élément html.
J’ai ensuite effectué une nouvelle tabulation à l’intérieur de l’élément head pour écrire mon élément title.
En revanche, je n’ai pas créé de nouvelle tabulation pour l’élément meta étant donné que cet élément n’est pas contenu dans title (ce n’est pas un élément enfant de l’élément title) mais est au même niveau hiérarchique que lui (on parle d’élément frère).
Vous pouvez observer la même chose avec les éléments head et body par rapport à l’élément html : j’ai décalé head et body avec le même écart par rapport à html car ces deux éléments sont frères (aucun des deux ne contient / n’est contenu dans l’autre).
Au final, indenter permet de créer une hiérarchie dans le code et l’un des buts principaux de l’indentation en HTML va être de comprendre très rapidement quels éléments sont imbriqués dans quels autres dans notre page pour avoir une meilleure vue d’ensemble de notre code et faciliter sa compréhension.
Note : Les retours à la ligne et l’indentation créés dans l’éditeur n’affectent pas le résultat final dans le navigateur. Nous aurons l’occasion de reparler de cela un peu plus tard dans ce cours.
Définition et utilité des commentaires en HTML
Les commentaires vont être des lignes de texte que l’on va écrire au milieu de notre code, afin de donner des indications sur ce que fait le code en question.
Les commentaires ne seront pas affichés par le navigateur lorsque celui-ci va afficher la page : ils ne vont servir qu’aux développeurs créant ou lisant le code.
Les commentaires vont pouvoir être très utiles dans trois situations :
- Dans le cas d’un gros / long projet, afin de bien se rappeler soi-même pourquoi nous avons écrit tel ou tel code, ou encore pour se repérer dans le code ;
- Si l’on souhaite distribuer son code, ou si l’on travaille à plusieurs, cela fait beaucoup plus professionnel et permet aux autres développeurs de comprendre beaucoup plus rapidement et facilement le code distribué ;
- Pour « neutraliser » une certaine partie d’un code sans toutefois le supprimer. Il suffit en effet de placer toute la partie du code en question en commentaire afin que celui-ci soit ignoré par le navigateur.
Syntaxe et écriture des commentaires en HTML
Les commentaires peuvent être mono-ligne (c’est-à-dire écrits sur une seule ligne dans l’éditeur) ou multi-lignes (écrits sur plusieurs lignes dans l’éditeur).
A la différence de nombreux autres langages informatiques utilisant également des commentaires, la syntaxe utilisée pour créer un commentaire mono-ligne va être la même que celle pour créer un commentaire multi-lignes en HTML.
Voici comment s’écrit un commentaire en HTML :
See the Pen Cours HTML CSS 2.4 by Pierre (@pierregiraud) on CodePen.
Les commentaires en HTML vont prendre la forme d’une balise orpheline très particulière, avec un chevron ouvrant suivi d’un point d’exclamation suivi de deux tirets au début, du commentaire en soi puis à nouveau de deux tirets et d’un chevron fermant (sans point d’exclamation cette fois, attention !).
Même si vous ne voyez pas forcément l’intérêt de commenter dès maintenant, je vous garantis que c’est souvent ce qui sépare un bon développeur d’un développeur moyen. Faites donc l’effort d’intégrer cette bonne pratique dès à présent, cela vous sera bénéfique dans le futur.
Mise en garde : ne placez pas d’informations sensibles en commentaire !
Vous vous rappelez lorsque je vous ai dit que vos commentaires n’étaient pas affichés aux yeux de vos visiteurs ?
C’est vrai, mais faîtes bien attention, car cela ne veut pas dire qu’il est impossible pour un visiteur de voir ce que vous avez écrit en commentaire.
En effet, tous vos visiteurs peuvent voir à tout moment, s’ils le souhaitent, non seulement le contenu de vos commentaires mais aussi l’intégralité de votre code HTML.
Pour cela, il suffit simplement d’activer les outils pour développeurs dont dispose chaque navigateur puis de faire un clic droit sur la page et « d’inspecter l’élément ».
Cela est valable pour n’importe quel site. Regardez par exemple avec le site Wikipédia. Une fois les outils pour développeurs activés, il suffit d’un clic droit…
…et le contenu HTML de la page est affiché dans une console !
Faîtes donc bien attention à ne jamais écrire d’informations sensibles au sein de vos commentaires, comme des codes ou mots de passe par exemple.
