Poursuivons l'atelier Web avec l’introduction de nouvelles balises et des entités HTML.

Le langage HTML permet de structurer votre texte.

Le langage HTML permet de hiérarchiser et typer votre contenu. Ceci vous aidera dans la mise ne place de l’aspect final, mais cela servira également moteurs de recherches à « comprendre » votre contenu (au sens, où le moteur de recherche sera capable d’en afficher un extrait correspondant à un thème par exemple).

La structuration de votre contenu sera aussi très utile si vous souhaitez mettre en place votre propre programme pour modifier l’affichage de manière dynamique (interaction avec le « visiteur » de la page) et ce dernier point nous correspond au besoin de notre atelier Web.

La balise ≺p≻ – paragraphe

Nous avons vu la balise p qui permet de définir un paragraphe, regardons un peu comment elle fonctionne.

• Exemple

  Supposons le code suivant :

  <p>Ceci est un paragraphe court</p><p>Ceci est un autre paragraphe court</p>
  <p>Ceci est un dernier paragraphe court</p>
  

  Voici ce que ça donne à l’affichage :

  Ceci est un paragraphe court

  Ceci est un autre paragraphe court

  Ceci est un dernier paragraphe court

Les retours à la ligne et les espaces présents dans le code ne sont pas rendus

Les plus curieux d’entre vous auront qu’il est possible d’ajouter autant de saut de ligne ou d’espaces que vous le voulez au sein d’un paragraphe ou d’un titre et qu’ils ne seront jamais affichés dans le navigateur.

Les retours à la ligne en HTML — Balise ≺br≻

Pour effectuer un retour à la ligne en HTML nous allons devoir utiliser l’élément br qui est représenté par une balise orpheline. Une balise orpheline est une balise qu’il n’est pas nécessaire de refermée.

<p>Ligne 1<br />Ligne 2</p>

<p>ou encore</p>

<p>
  Ligne 1<br />
  Ligne 2
</p>

Le nom de l’élément br est l’abréviation de « break », dans le sens de « casser une ligne ». En français on utilise plutôt la notion de « saut de ligne » ou de « retour à la ligne ».

Les espaces en HTML…

Il existe plusieurs solutions permettant d’ajouter des espaces en HTML, ici nous n’évoqueront qu’une partie d’entre-eux : le cas des espaces insécables qui ont un sens (sémantique) en fonction de la langue.

Ce point permet d’introduire les entités du langage HTML.

Ici nous détailleront que les entités liées à la notion d’espace…

• L’entité HTML   (« non breaking space ») va nous permettre d’ajouter une espace simple dit espace « insécable » ;
• L’entité HTML   (« en space ») va nous permettre de créer une espace double ;
• L’entité HTML   (« em space ») va nous permettre de créer une espace quadruple ;
• L’entité HTML   (« thin space ») va nous permettre de créer un espace très fin (demi-espace).

🥇 Exercice 🧠⇝🎓

Entraînez-vous à écrire un texte dans un paragraphe qui contient des sauts de lignes et des espaces. Par exemple en français pour écrire le nombre 1 000 000, les séquences de 3 chiffres doivent être séparées par un espace « insécable ». Mais c’est aussi le cas des nombres et leur unité : 10 °C.

Les balises ≺h1, h2, h3, h4, h5, h6≻

Les balises Hₙ servent à encadrer les titres, axes… des contenus. En effet, afin d’augmenter la clarté et la **compréhension **d’un document, il est préférable de présenter votre texte manière aérer (éviter les “pavés”), hiérarchiser les arguments ou les points abordés.

• Exemple

  Supposons le code suivant :

  <h1>Titre H1 très important</h1>
  <h2>Titre H2 moins important que H1</h2>
  <h3>Titre H3 moins important que H2</h3>
  <h4>Titre H4 moins important que H3</h4>
  <h5>Titre H5 moins important que H4</h5>
  <h6>Titre H6 moins important que H5</h6>
  

  Voici ce que ça donne à l’affichage :

  Titre H1 très important

  Titre H2 moins important que H1

  Titre H3 moins important que H2

  Titre H4 moins important que H3

  Titre H5 moins important que H4

  Titre H6 moins important que H5

🥇 Exercice 🧠⇝🎓

Pour bien comprendre le fonctionnement des balises h1, h2, h3, h4, h5, h6, p et br écrivez un texte utilisant certaine de ces balises.

• Exemple de texte

  Je vous propose les dernières phrases de l’œuvre de Victor HUGO: Les Misérables.

  Victor HUGO

  1802 – 1885

  Épitaphe de Jean Valjean

  Il dort. Quoique le sort fût pour lui bien étrange,
  Il vivait. Il mourut quand il n’eut plus son ange ;
  La chose simplement d’elle-même arriva,
  Comme la nuit se fait lorsque le jour s’en va.

Les balises génériques ≺div≻ et ≺span≻

Ces deux balises sont des conteneurs sont destinés à structurer le contenu, mais elles ont un rôle complémentaire et des règles de rendu différentes. La balise span permet surtout d’associer un style à une partie d’un texte tandis que div sert à agencer le contenu de la page.

Les deux balises doivent avoir une balise de début et de fin, la forme réduite n’est pas reconnue.

<div class="xxx" /><!-- non valide -->

<div class="xxx"></div><!-- valide -->

Regardons ce que ça donne :

<div>ceci est dans une balise div</div><div>ceci est dans une autre balise div</div>
<span>ceci est dans une balise span</span><span>ceci est dans une autre balise span</span>

La balise div (on peut également parler d’élément div) sert de conteneur pour d’autres éléments et permet ensuite d’appliquer facilement les mêmes styles CSS à tous les éléments contenus dans notre div par héritage ou pour les mettre en forme en appliquant un style spécifique au div.

Comme div et span sont des conteneurs plutôt neutre en termes d’affichage, pour mettre en évidence leur fonctionnement nous allons, maintenant, devoir nous intéresser au langage CSS qui permet de modifier le comportement d’un élément.

Références

• Apprendre à coder en HTML et CSS | Cours complet (2020).
• Premiers pas avec le Web, le cours de la fondation Mozilla : Getting started with the Web.
• Un excellant site de référence w3schools.
• HTML 5, plateforme de sites et applications en ligne.
• Les entités en HTML :
  • Caractères spéciaux et entités HTML,
  • Le langage HTML/Entités,
  • MDN Web Docs Glossary: Definitions of Web-related terms Entity.
  • W3Schools: HTML Entities

L’atelier complet

• Liste des billets de l'atelier Web.
• Le billet suivant.

ᦿ