HTML & CSS - Le Guide du Débutant - Chapitre 4 - Exploiter la structure du BODY en HTML

Les titres

Les balises titres

Les balises titres en HTML permettent de structurer le contenu d'une page web en définissant des niveaux hiérarchiques. Il existe six niveaux de titres, allant de <h1> à <h6>, où <h1> représente le titre principal et <h6> le titre le moins important.

Les titres sont utilisés pour organiser le contenu, faciliter la lecture et améliorer le référencement naturel (SEO) des pages web. Voici un exemple de structure de titres :

<h1>Titre principal</h1>
<h2>Sous-titre de niveau 1</h2>
<h3>Sous-titre de niveau 2</h3>
<h4>Sous-titre de niveau 3</h4>
<h5>Sous-titre de niveau 4</h5>
<h6>Sous-titre de niveau 5</h6>

Il est important d'utiliser les titres de manière cohérente pour structurer le contenu de la page et aider les utilisateurs à naviguer facilement à travers les différentes sections.

Attention :
Il ne peut y avoir qu'un seul titre de niveau 1 (<h1>) par page web pour garantir une structure claire et optimisée pour le référencement.

Les balises titres ainsi que les balises de paragraphes sont des balises de type block. C'est à dire qu'elles s'affichent toujours sur une nouvelle ligne et occupent toute la largeur disponible de leur conteneur parent.
Il ne sera donc pas possible d'afficher du texte à côté d'un titre ou d'un paragraphe sans utiliser de styles CSS.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les caractères spéciaux

Il sera parfois nécessaire d'afficher des caractères spéciaux en HTML, tels que les accents, les symboles monétaires ou les signes de ponctuation. Pour ce faire, on utilise des entités HTML, qui sont des codes spéciaux représentant ces caractères. Voici quelques exemples courants :

é : é → e accent aigu
è : è → e accent grave
à : à → a accent grave
â : â → a accent circonflexe
" : " → Double quote
& : & → Et commercial
€ : € → Signe Euro
< : < → Chevron ouvrant
> : > → Chevron fermant
© : © → Signe de copyright
: &Tab; → Tabulation (uniquement dans une balise <pre>. Si non, un espace normal sera affiché)

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les commentaires

À quoi servent les commentaires ?

Les commentaires en HTML sont des notes ou des annotations que les développeurs peuvent ajouter à leur code source pour expliquer certaines parties du code, fournir des instructions ou simplement laisser des rappels pour eux-mêmes ou pour d'autres développeurs qui pourraient travailler sur le même projet. Les commentaires ne sont pas affichés dans le navigateur et n'affectent pas le rendu de la page web.

Les commentaires sont utiles pour améliorer la lisibilité du code, faciliter la collaboration entre les développeurs et documenter des sections spécifiques du code. Ils peuvent également être utilisés pour désactiver temporairement des parties du code sans les supprimer.

Créer un commentaire

Pour créer un commentaire en HTML, on utilise la syntaxe suivante :

<!-- Ceci est un commentaire -->

Tout ce qui se trouve entre les balises  sera considéré comme un commentaire et ne sera pas affiché dans le navigateur.

Important :
Il faut sous aucun prétexte mettre quelque chose de compromettant (login et mot de passe par exemple).
Malgré que ce soit un commentaire, il sera visible si on utilise l'inspecteur sur la page dans le navigateur ou qu'on affiche le code source (Ctrl + U).

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les espaces

Comment créer un espace ?

En HTML, les espaces multiples entre les mots ou les éléments sont généralement réduits à un seul espace lors de l'affichage dans le navigateur. Pour afficher plusieurs espaces de manière volontaire, on utilise l'entité HTML  , qui représente un espace insécable (non-breaking space). Voici comment l'utiliser :

Je suis un paragraphe 	 (avec 1 espace normal)
Je suis un paragraphe 	 (avec 1 espace insécable)
Je suis  un paragraphe 	 (avec 2 espaces insécables)
Je suis   un paragraphe 	 (avec 3 espaces insécables)
Je suis    un paragraphe 	 (avec 4 espaces insécables)
Je suis     un paragraphe 	 (avec 5 espaces insécables)

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les sauts de ligne

Comment créer un saut de ligne ?

En HTML, pour créer un saut de ligne à l'intérieur d'un paragraphe ou d'un autre élément de texte, on utilise la balise auto-fermante <br>. Cette balise est de type bloc et indique au navigateur de passer à la ligne suivante sans créer un nouveau paragraphe. Voici un exemple d'utilisation de la balise <br> :

<p>
  Ceci est la première ligne.<br>
  Ceci est la deuxième ligne.<br>
  Ceci est la troisième ligne.
</p>

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Restitution du code source

Comment restituer le code source (balise <pre>) ?

En HTML, pour afficher du code source ou du texte préformaté tout en conservant les espaces, les sauts de ligne et la mise en forme d'origine, on utilise la balise <pre>. Cette balise est particulièrement utile pour afficher des extraits de code ou tout autre contenu où la mise en forme est importante. Voici un exemple d'utilisation de la balise <pre> :

<pre>
  Ceci est un exemple de texte préformaté.
    Les espaces et les sauts de ligne
    sont conservés tels quels.
</pre>

Le texte à l'intérieur de la balise <pre> sera affiché dans une police à chasse fixe (monospace) et respectera la mise en forme telle qu'elle est écrite dans le code source HTML. Cela permet de présenter clairement des extraits de code ou des données structurées. Si cela n'est pas souhaité, il sera nécessaire d'utiliser des styles CSS, par exemple font-family: inherit; pour hériter la police du HTML, pour modifier l'apparence du texte à l'intérieur de la balise <pre>.

Astuce :

Il faut commencer à écrire directement après le chevron fermant de la balise ouvrante <pre> sans retour à la ligne.
Puis il faut écrire sur la ligne suivante sans indentation pour que le texte commence bien tout à gauche.
Enfin, il faut terminer le texte sans faire un retour à la ligne avant la balise fermante </pre> afin d'éviter une ligne vide.
Les espaces et retours à la ligne sont conservés tels quels.
Les tabulations (&Tab;) sont également conservées uniquement à l'intérieur de la balise <pre>. En dehors de cette balise, une tabulation sera affichée comme un espace normal.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Le formatage

La balise gras

La balise <strong> en HTML est utilisée pour indiquer que le texte qu'elle entoure a une importance particulière ou doit être mis en évidence. Par défaut, le texte à l'intérieur de la balise <strong> est affiché en gras par les navigateurs web, ce qui le rend visuellement distinct du reste du contenu. Voici un exemple d'utilisation de la balise <strong> :

<p>
  Ceci est un texte normal, mais <strong>ceci est un texte en gras</strong>.
</p>

Attention :
Il ne faut plus utiliser la balise <b> pour mettre du texte en gras, car elle n'a pas de signification sémantique. La balise <strong> est préférée car elle indique clairement que le texte a une importance particulière, ce qui est bénéfique pour l'accessibilité et le référencement.

La balise italique

La balise <em> en HTML est utilisée pour indiquer que le texte qu'elle entoure doit être mis en emphase. Par défaut, le texte à l'intérieur de la balise <em> est affiché en italique par les navigateurs web, ce qui le rend visuellement distinct du reste du contenu. Voici un exemple d'utilisation de la balise <em> :

<p>
  Ceci est un texte normal, mais <em>ceci est un texte en italique</em>.
</p>

Attention :
Il ne faut plus utiliser la balise <i> pour mettre du texte en italique, car elle n'a pas de signification sémantique. La balise <em> est préférée car elle indique clairement que le texte doit être mis en emphase, ce qui est bénéfique pour l'accessibilité et le référencement.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Séparateur horizontal

La balise séparateur horizontal

La balise <hr> est de type bloc. En HTML, elle est utilisée pour insérer un séparateur horizontal dans une page web. Cette balise est auto-fermante et crée une ligne horizontale qui sert à diviser le contenu en sections distinctes. Voici un exemple d'utilisation de la balise <hr> :

<h2>Section 1</h2>
<p>Contenu de la section 1.</p>
<hr>
<h2>Section 2</h2>
<p>Contenu de la section 2.</p>

Le séparateur horizontal créé par la balise <hr> est souvent utilisé pour améliorer la lisibilité et l'organisation du contenu sur une page web en fournissant une séparation visuelle claire entre différentes sections ou sujets.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Documentation

Pour plus d'informations, il est possible de consulter la documentation officielle sur les balises HTML :
MDN Web Docs - HTML elements