2.6 Formatage HTML

18 octobre 2018

Quand les espaces n’ont pas d’importance

Il existe une différence entre ce qui est écrit dans votre code HTML et ce qui est affiché dans le navigateur. Comme nous l’avons déjà vu, les balises HTML telles que  ne sont lues que par le navigateur (pour savoir quel type de contenu est écrit), mais ne sont pas affichés par le navigateur.

Nous avons également vu comment il est possible d’écrire des commentaires HTML dans votre code, pour aider l’homme à lire le code, sans que ces commentaires ne soient affichés par le navigateur.
Un autre type de code écrit ignoré par le navigateur est l’espace, qui comprend :

sauts de ligne
lignes vides
tabulations (ou indentation)

Sauts de ligne

Les sauts de ligne et les lignes vides (qui sont une succession de sauts de ligne) dans le code HTML sont ignorés par le navigateur. Ils ne représentent qu’un seul espace.

<blockquote>
L'idée originelle du web fût que cela devait être un espace


collaboratif


dans lequel nous pourrions communiquer par le partage de l'information.
</blockquote>

Pour forcer un saut de ligne, vous devez utiliser l’élément HTML   :

<p>A son meilleur, la vie est complètement<br>imprévisible.</p>

Tabulations

Une tabulation est un caractère spécial obtenu en appuyant sur la touche “Tab”. Il déplace généralement le curseur à la tabulation suivante, mais est parfois converti en 2 espaces.

Quoi qu’il en soit, comme un espace normal, une tabulation est invisible. Elle est également ignoréz par le navigateur :

<p>
  Poussons      ce texte
  avec des tabulations.
</p>

Si vous souhaitez ajouter de l’espace avant un mot, vous devez utiliser CSS.

Si vous souhaitez fermer un élément HTML, vous devez d’abord fermer tous ses éléments enfants.

« Format d’arborescence »

Les éléments HTML pouvant être imbriqués les uns dans les autres, l’ordre dans lequel ils ont été ouverts affecte l’ordre dans lequel ils sont fermés.

<article><p>Ce code est écrit sur une <strong>seule et même</strong> ligne.</p></article>

Comme il peut être difficile de suivre l’ordre dans lequel les éléments HTML ont été ouverts, il est recommandé d’écrire HTML dans un format d’arborescence :

<article>
  <p>
    Ce code est écrit sur
    <strong>plusieurs</strong>
    lignes mais sera néanmoins
    affiché sur une
    <em>seule</em>
    .
  </p>
</article>

Le format d’arborescence permet de reproduire visuellement les niveaux d’imbrication de votre code HTML. Il est donc facile de voir que :

<article> est l’ancêtre
 est le parent de et 
 et  sont frères et sœurs

Ecrire du code HTML à lire

Les tabulations, les lignes vides, les espaces successifs et les sauts de ligne sont ignorés par l’ordinateur et sont tous convertis en un seul espace.

Un document HTML est écrit et lu par un humain, mais uniquement par un ordinateur. Étant donné que les tabulations, les espaces et les sauts de ligne n’affectent pas la façon dont un navigateur lit et affiche ensuite votre page Web, vous pouvez également formater votre document de la manière la plus lisible pour vous.

Il n’existe pas de règles spécifiques concernant le formatage HTML, mais il existe des conventions implicites, notamment :

utiliser des tabulations pour aider à visualiser comment les éléments HTML sont imbriqués
place les balises d’ouverture et de fermeture des éléments de niveau bloc sur leur propre ligne
écrire des éléments en ligne sur une ligne (y compris les balises d’ouverture et de fermeture)