3.4 Liens HTML

<p>
  Pour rechercher quelque chose, visitez <a href="https://www.google.com">Google</a>.
</p>

Les liens constituent l’interaction principale d’une page Web : vous naviguez d’un document à un autre en cliquant sur les liens.

Vous pouvez définir 3 types de cibles.

• ancres cibles, pour naviguer dans la même page
• URL relatives, généralement pour naviguer dans le même site Web
• URL absolues, généralement pour naviguer vers un autre site Web

Ancres  cibles – Anchor targets

Ancre cible pour naviguer dans la même page. En ajoutant votre préfixe avec #, vous pouvez cibler un élément HTML avec un attribut id spécifique.

Par exemple, <a href="#header"> accède au <div id="header"> au sein du même document HTML.
Ce type de href est souvent utilisé pour revenir en haut de la page.

URL relatives – Relative URLs

Si vous souhaitez définir un lien vers une autre page du même site Web, vous pouvez utiliser des URL relatives.

Mais par rapport à quoi ? Eh bien, par rapport à la page en cours.

Prenons un exemple simple où le dossier my-premier-site-web contient 2 fichiers HTML :

• my-premier-site-web
  • accueil.html
  • contact.html

Dans accueil.html, vous souhaitez définir un lien vers contact.html.

Comme les deux fichiers sont dans le même dossier, vous pouvez simplement écrire dans accueil.html :

<p>
  Aller à la <a href="contact.html">page contact</a>.
</p>

Sur un site Web réel, le processus est similaire.

Supposons que vous ayez un site Web appelé https://jadoreleschats.com sur lequel vous avez 2 pages Web : index.html et galerie.html :

• jadoreleschats.com
  • index.html
  • galerie.html

Dans index.html vous pouvez écrire le lien suivant :

<p>
  Visitez la <a href="galerie.html">galerie</a> !
</p>

Rappelez-vous : les sites Web sont hébergés sur des ordinateurs similaires à celui que vous utilisez actuellement. Ils sont simplement appelés «serveurs» car leur seul but est d’héberger des sites Web. Mais ils ont toujours des fichiers et des dossiers semblables à des ordinateurs «normaux».

URL absolues – Absolute URLs

Si vous souhaitez partager la galerie de vos chats avec un ami, vous ne pourrez pas simplement envoyer galerie.html, car cette URL relative ne fonctionne que pour les documents HTML se trouvant sur le même ordinateur ou le même domaine.

Vous avez besoin de l’URL complète de votre document HTML : https://jadoreleschats.com/galerie.html

Cette URL peut être segmentée en 3 parties :

• protocole https:// – dans l’exemple présent – tous les sites ne sont pas « sécurisé », ce protocole peut également être simplement http://
• domaine jadoreleschats.com
• chemin du fichier .html

Cette URL absolue est autonome : peu importe où vous utilisez le formulaire de lien, il contient toutes les informations nécessaires pour trouver le bon fichier, dans le bon domaine, avec le bon protocole.

Vous utilisez généralement des URL absolues définissant un lien de votre site Web vers un autre site Web.

Dans votre fichier https://jadoreleschats.com/galerie.html file, vous pouvez écrire :

<p>
  Trouvez plus d'images de chats sur mon <a href="https://twitter.com/jadoreleschats">compte Twitter</a> !
</p>

Liens relatifs ou absolus ?

Supposons que vous souhaitiez créer un lien entre le premier et le second fichier. L’approche la plus directe consiste à utiliser l’URL absolue. Vous ajoutez donc <a href="https://jadoreleschats.com/galerie.html">visitez la deuxième page</a> dans votre fichier index.html.

Les deux fichiers se trouvant dans le même répertoire, vous pouvez utiliser l’URL relative à l’aide de <a href="premier-article-de-mon-blog.html">. Ceci est utile si vous décidez de déplacer votre répertoire/dossier : vos liens ne seront pas cassés car les cibles de lien sont relatives les unes par rapport aux autres, tant que vous déplacez les deux fichiers simultanément et les conservez dans le même répertoire/dossier.
Cette approche relative est particulièrement utile lors du changement de domaine.