Texte, liens et images

Ce que tu vas apprendre

• Organiser un texte avec des titres et des paragraphes.
• Relier des pages avec l'élément <a> et ses chemins.
• Insérer une image avec un texte alternatif.

Titres et paragraphes

<h1>Tarte aux pommes</h1>
<p>Une recette simple, prête en une heure.</p>
<h2>Ingrédients</h2>
<p>Pour six personnes.</p>

Les six niveaux de titres vont de <h1> (le plus important) à <h6>. Un titre n'est pas là pour grossir le texte : il annonce un sujet. La taille se règle en CSS.

Deux règles simples :

• Un seul <h1> par page, qui donne son sujet principal.
• Ne saute pas de niveau : après un <h2>, descends vers un <h3>, pas vers un <h5>.

Mettre un mot en valeur

<p>Préchauffe le four à <strong>180 °C</strong>, <em>jamais</em> plus.</p>

Choisis l'élément selon le sens, pas selon l'effet visuel voulu. Si tu veux seulement un texte en gras sans importance particulière, c'est un travail pour le CSS.

Les liens

Un lien (ou hyperlien) emmène vers une autre page. C'est ce qui fait la force du web.

<a href="https://developer.mozilla.org/fr/">Documentation MDN</a>

L'élément <a> (anchor, « ancre ») entoure le texte cliquable. Son attribut href contient la destination.

Un lien qui dit « cliquez ici » ne sert à rien pour quelqu'un qui parcourt la page avec un lecteur d'écran. Écris un texte qui décrit la destination : « Voir la recette de la tarte ».

Les chemins

La valeur de href peut prendre plusieurs formes :

Un chemin relatif part du fichier actuel. Il te permet de déplacer tout le dossier du site sans casser les liens.

Lier vers un endroit de la page

Une ancre pointe vers un élément précis, repéré par son attribut id.

<a href="#preparation">Aller à la préparation</a>
...
<h2 id="preparation">Préparation</h2>

Un id doit être unique dans la page, sans espace. Cliquer sur le lien fait défiler la page jusqu'au titre.

Les liens externes

Pour ouvrir un lien dans un nouvel onglet, ajoute target="_blank" :

<a href="https://developer.mozilla.org/fr/" target="_blank">MDN</a>

Les images

<img src="images/tarte.jpg" alt="Tarte aux pommes dorée sur un plat" width="600" height="400">

<img> est un élément vide : pas de balise fermante. Ses attributs importants :

• src : le chemin du fichier image, exprimé comme pour un lien.
• alt : le texte alternatif, lu à la place de l'image.
• width et height : les dimensions en pixels, pour que le navigateur réserve la place avant le chargement.

Écrire un bon texte alternatif

Le texte alt s'affiche si l'image ne charge pas, et il est lu par les lecteurs d'écran. Décris ce que l'image apporte à la page, en une phrase courte.

Si l'image est purement décorative, écris un alt vide : alt="". Le lecteur d'écran l'ignore alors. N'omets jamais l'attribut : sans lui, certains lecteurs lisent le nom du fichier.

Légender une image

<figure>
  <img src="images/tarte.jpg" alt="Tarte aux pommes dorée" width="600" height="400">
  <figcaption>Ma tarte, à la sortie du four.</figcaption>
</figure>

<figure> regroupe une illustration et sa légende <figcaption>. Utilise-le quand la légende fait partie du contenu.

Pour une page avec beaucoup d'images, ajoute loading="lazy" à celles qui sont plus bas : le navigateur les charge seulement quand on s'en approche.

À retenir

• Les titres <h1> à <h6> décrivent le plan de la page : un seul <h1>, sans sauter de niveau.
• <strong> et <em> expriment un sens, pas seulement un style.
• Un lien s'écrit <a href="...">texte</a>, avec un texte qui décrit la destination.
• Un chemin relatif part du fichier actuel, et une ancre #id mène à un endroit de la page.
• Toute image a un alt : descriptif, ou vide si elle est purement décorative.