PhpBB Lab Académie

Comprendre le rôle d’un lien hypertexte, créer un lien avec l’élément a et l’attribut href, choisir un texte de lien compréhensible hors contexte et savoir reconnaître une adresse absolue avant d’apprendre, dans une prochaine leçon, à relier plusieurs fichiers de son propre site.

Nous allons rendre notre page réellement navigable

Jusqu’à présent, votre page contient :

- une structure HTML complète ;
- des titres ;
- des paragraphes ;
- des listes.

Mais elle reste isolée : l’utilisateur peut lire le contenu, mais il ne peut encore suivre aucun lien vers une autre ressource.

Les liens sont l’un des principes fondamentaux du Web.

Ils permettent de passer :

- d’une page à une autre ;
- d’un site à un autre ;
- d’une ressource à une autre.

Dans cette leçon, nous allons apprendre la syntaxe fondamentale d’un lien.

Nous resterons volontairement sur un cas simple : un lien vers une adresse web complète.

Dans une prochaine leçon, nous utiliserons cette même syntaxe pour relier plusieurs fichiers HTML de notre propre petit site.

1. Qu’est-ce qu’un lien hypertexte ?

Un lien hypertexte est un contenu que l’utilisateur peut activer pour demander au navigateur d’ouvrir une autre destination.

Sur une page web, un lien peut par exemple conduire vers :

une autre page
un autre site
un document
une ressource précise

Dans notre première leçon, vous avez appris que le mot HTML contient l’idée d’« hypertexte ».

Les liens sont précisément ce qui permet de relier des documents entre eux.

2. L’élément a

En HTML, un lien est créé avec l’élément :

a

Un exemple simple est :

<a href="https://example.com">Découvrir le site Example</a>

Comme pour

p

ou

strong

, nous avons :

- une balise ouvrante ;
- du contenu ;
- une balise fermante.

La balise ouvrante est :

<a href="https://example.com">

Le contenu du lien est :

Découvrir le site Example

La balise fermante est :

</a>

L’ensemble constitue l’élément de lien.

3. Le rôle de href

Dans :

<a href="https://example.com">Découvrir le site Example</a>

vous connaissez déjà le principe d’un attribut.

Ici, l’attribut s’appelle :

href

Sa valeur est :

https://example.com

L’attribut

href

indique la destination du lien.

Vous pouvez donc retenir :

a = crée le lien
href = indique où mène le lien
texte entre <a> et </a> = contenu que l’utilisateur peut activer

4. Lire un lien morceau par morceau

Prenons :

<a href="https://example.com">Découvrir le site Example</a>

Nous pouvons le lire ainsi :

<a = début de l’élément de lien
href = attribut qui indique la destination
"https://example.com" = valeur de la destination
> = fin de la balise ouvrante
Découvrir le site Example = texte du lien
</a> = fin du lien

Il est important de savoir lire cette syntaxe avant d’en écrire plusieurs.

5. Ajouter notre premier lien dans index.html

Reprenez le fichier :

index.html

Conservez tout ce que vous avez déjà construit.

Sous votre contenu actuel, ajoutez une nouvelle section :

<h2>Une ressource à découvrir</h2>
<p>Vous pouvez <a href="https://example.com">visiter le site Example</a>.</p>

Enregistrez avec :

Ctrl + S

Puis actualisez la page.

Vous devez entendre ou voir que :

visiter le site Example

est maintenant un lien.

Si vous l’activez, le navigateur ouvre la destination indiquée dans

href

.

6. Le lien peut être placé dans un paragraphe

Dans l’exemple précédent, l’élément

a

est imbriqué dans un paragraphe :

<p>Vous pouvez <a href="https://example.com">visiter le site Example</a>.</p>

La structure est donc :

p
    a

Vous connaissez déjà cette logique grâce à l’imbrication étudiée auparavant.

L’élément

a

est ouvert puis fermé avant la fermeture de

p

.

7. Comprendre une adresse absolue

La valeur :

https://example.com

est une adresse complète.

On parle ici d’une adresse absolue.

Elle contient notamment :

https://

puis le nom du site :

example.com

Lorsque vous créez un lien vers un autre site, utiliser son adresse complète permet au navigateur de savoir exactement où aller.

Pour le moment, retenez :

https://example.com = adresse complète vers un site

Nous étudierons plus tard une autre manière d’écrire des destinations lorsque les fichiers appartiennent à notre propre site.

8. Pourquoi le texte du lien est important

Comparez ces deux phrases :

<p>Pour découvrir la ressource, <a href="https://example.com">cliquez ici</a>.</p>

et :

<p>Vous pouvez <a href="https://example.com">découvrir le site Example</a>.</p>

Les deux liens peuvent fonctionner.

Mais le deuxième texte est plus informatif.

Avec :

cliquez ici

on ne sait pas, en lisant uniquement le lien, où il mène.

Avec :

Découvrir le site Example

la destination est beaucoup plus claire.

9. Un lien doit rester compréhensible hors contexte

Les utilisateurs de lecteurs d’écran peuvent naviguer directement de lien en lien.

Ils peuvent donc entendre une liste ressemblant à :

Découvrir le site Example
Documentation HTML
Page de contact

Ces textes ont un sens même lorsqu’ils sont entendus sans le paragraphe complet.

Imaginez maintenant une série de liens appelés :

Cliquez ici
En savoir plus
Voir
Lire

Il devient beaucoup plus difficile de savoir lequel choisir.

Nous chercherons donc à écrire des textes de liens qui décrivent clairement leur destination ou leur action.

10. Éviter d’écrire l’adresse comme seul texte lorsque ce n’est pas utile

Vous pourriez écrire :

<a href="https://example.com">https://example.com</a>

Cela fonctionne.

Mais dans un texte courant, un libellé humain est souvent plus agréable et plus compréhensible :

<a href="https://example.com">Découvrir le site Example</a>

L’adresse reste dans

href

.

Le texte visible ou annoncé décrit la destination.

Il existe bien sûr des cas où afficher l’adresse elle-même est utile, mais ce n’est pas nécessaire pour notre exemple.

11. Ne pas oublier href

Regardez :

<a>Découvrir le site Example</a>

Nous avons bien un élément

a

, mais aucune destination n’est indiquée.

Pour créer le lien que nous voulons dans cette leçon, nous devons fournir :

href="..."

Notre version complète est donc :

<a href="https://example.com">Découvrir le site Example</a>

12. Ne pas mettre href dans la balise fermante

L’attribut appartient à la balise ouvrante.

Nous écrivons :

<a href="https://example.com">Découvrir le site Example</a>

et non :

<a>Découvrir le site Example</a href="https://example.com">

Cette règle reprend exactement ce que vous avez déjà appris sur les attributs.

13. Vérifier un lien

Après avoir créé un lien, ne vous contentez pas de regarder son code.

Testez-le.

Pour notre exemple :

1. enregistrez

index.html

;
2. actualisez le navigateur ;
3. repérez le lien ;
4. activez-le ;
5. vérifiez que la destination attendue s’ouvre.

Si le lien ne fonctionne pas, vérifiez notamment :

- que

href

est présent ;
- que la valeur est placée entre guillemets ;
- que l’adresse est correctement écrite ;
- que la balise

a

est bien fermée.

14. Ne pas ouvrir automatiquement une nouvelle fenêtre pour l’instant

Vous trouverez parfois des exemples utilisant :

target="_blank"

pour ouvrir un lien dans un nouvel onglet ou une nouvelle fenêtre.

Nous n’en avons pas besoin ici.

Un lien simple :

<a href="https://example.com">Découvrir le site Example</a>

est suffisant pour apprendre le fonctionnement fondamental.

Nous ajouterons de nouveaux attributs seulement lorsqu’ils auront une utilité réelle.

15. Ajouter une petite section de ressources

Dans votre page, vous pouvez maintenant ajouter :

<h2>Ressources</h2>
<p><a href="https://example.com">Découvrir le site Example</a></p>

Vous pouvez aussi intégrer le lien dans une phrase :

<p>Pour tester un lien externe, vous pouvez <a href="https://example.com">ouvrir le site Example</a>.</p>

Les deux structures sont valides.

Choisissez celle qui correspond au contenu que vous voulez écrire.

16. Ce que nous ne faisons pas encore

Vous pourriez maintenant vouloir créer des liens vers :

apropos.html
contact.html
une autre page de votre dossier

C’est exactement ce que nous ferons bientôt.

Mais cela introduit une nouvelle notion : la manière d’indiquer le chemin vers un autre fichier de notre propre site.

Nous ne mélangeons pas encore les deux sujets.

Aujourd’hui, vous devez maîtriser :

<a href="destination">Texte du lien</a>

et comprendre le rôle de chaque partie.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- ce qu’est un lien hypertexte ;
- le rôle de l’élément

a

;
- le rôle de l’attribut

href

;
- ce qu’est le texte du lien ;
- pourquoi un texte comme « cliquez ici » est souvent moins utile qu’un texte descriptif ;
- pourquoi une adresse complète commençant par

https://

peut être utilisée pour pointer vers un autre site ;
- pourquoi il faut tester le lien après l’avoir créé.

Dans la prochaine leçon, nous apprendrons à ajouter des images et à écrire un texte alternatif adapté.

Prenons ce code :

<p>Consultez la <a href="https://example.com">page de démonstration Example</a> pour tester votre premier lien.</p>

Le paragraphe est :

p

Le lien est imbriqué dans ce paragraphe.

La balise ouvrante du lien est :

<a href="https://example.com">

L’attribut :

href

contient la destination :

https://example.com

Le texte du lien est :

page de démonstration Example

et la fermeture du lien est :

</a>

Si un utilisateur de lecteur d’écran parcourt uniquement les liens de la page, le texte :

page de démonstration Example

reste compréhensible, contrairement à un texte générique comme :

cliquez ici

Reprenez votre fichier

index.html

.

Conservez la structure complète du document et le contenu déjà créé.

Ajoutez une nouvelle section dans

body

.

1. Créez le titre :

Ressource externe

Choisissez le niveau de titre adapté en fonction de la hiérarchie actuelle de votre page.

2. Ajoutez un paragraphe contenant un lien vers :

https://example.com

3. Le texte du lien doit être :

Découvrir le site Example

4. Votre lien doit utiliser correctement :

a

et :

href

5. Enregistrez le fichier.

6. Actualisez la page.

7. Repérez le lien avec votre navigateur ou votre lecteur d’écran.

8. Activez-le et vérifiez que la destination s’ouvre.

9. Revenez ensuite dans votre code et remplacez temporairement le texte du lien par :

Cliquez ici

10. Relisez uniquement le texte du lien et demandez-vous s’il indique encore clairement sa destination.

11. Remettez finalement le texte :

Découvrir le site Example

Pour terminer, expliquez avec vos propres mots la différence entre :

href="https://example.com"

et :

Découvrir le site Example

dans l’élément de lien.

Un lien HTML est créé avec l’élément :

a

La destination est indiquée avec l’attribut :

href

La structure de base est :

<a href="destination">Texte du lien</a>

Exemple :

<a href="https://example.com">Découvrir le site Example</a>

Dans cet exemple :

a = élément de lien
href = attribut contenant la destination
https://example.com = adresse de destination
Découvrir le site Example = texte du lien

Une adresse complète comme :

https://example.com

est une adresse absolue.

Le texte d’un lien doit autant que possible décrire clairement sa destination ou son action.

Un texte comme :

Découvrir le site Example

est généralement plus informatif que :

Cliquez ici

Cette précision est notamment utile aux utilisateurs qui parcourent directement les liens avec un lecteur d’écran.

Dans la prochaine leçon, nous apprendrons à ajouter des images et à leur fournir un texte alternatif adapté.