Les liens et hyperliens

Sans liens, le HTML ne serait que du simple texte isolé sur la toile. Il existe deux natures de liens qui nous permettent de relier les pages entre elles, les liens <link> et les liens hypertextes <a>. Contrairement à ce que cela fût le cas avec le protocole gopher, le protocole HTTP permet des liens de manière directe, sans détours ni empilage.

Les liens

Un document peut avoir des relations  avec un, ou plusieurs, autres documents, et ce, de différentes manières. Par exemple, diverses feuilles de styles CSS peuvent venir compléter un document HTML en se liant à lui, et ce de différentes manières. Certaines peuvent l’être de manière directe, mais d’autres peuvent l’être de manière alternatives ou encore de manière contextuelle en fonction du périphérique de lecture.

Pour définir, ou affiner, ces divers types de liaisons, nous avons accès à divers types d’attributs :

• rel qui décrit le type de relation entre le document lié et le document hôte,
• href qui pointe vers l’adresse URL du document lié
• type qui précise le type MIME du document lié
• media qui va décrire le contexte de liaison en fonction de certaines requêtes de média.
• title, attribut très important car il va déclencher l’accès à des sources liées qui sont alternatives

<link rel="stylesheet" type="text/css" href="styles.css" title="Source de base par défaut" />
<link rel="alternate stylesheet" href="autre-styles.css" title="Source CSS alternative" /> 
<link rel="stylesheet" href="styles.css" media="screen and (min-color-index: 256) and (orientation: portrait)" />

Une fois dans le navigateur il sera donc possible d’accéder à une bascule entre les diverses sources alternatives. Depuis Firefox c’est natif, rendez vous dans le menu Affichage > Style de la page > … où l’ensemble des styles liés au document seront accessibles et permutables. Sous Chrome il faut passer par une extension, Style Chooser, ou encore Alt CSS… qui proposeront l’ajout de ce menu de permutation.

Une autre utilité de la liaison entre documents se retrouve au moment de la localisation des pages en diverses langues. Il est souvent important de spécifier au moteurs de recherche l’équivalence de contenu mais en langues différentes. Là encore, on peut également associer deux documents en usant de la relation alternative et cette fois ci en s’appuyant sur l’attribut hreflang..

<link rel="alternate" href="document-es.html" hreflang="es" type="text/html" title="Versión española">
<link rel="alternate" href="document-uk.html" hreflang="en" type="text/html" title="English version">

Il peut également y avoir de relations de chronologie entre plusieurs documents. Qui vient avant, qui vient après ?… Et cela peut avoir son importance au moment de l’impression de plusieurs pages. Prenons un exemple, si nous avons 4 pages, nommées respectivement de page-1.html à page-4.html, et si nous regardons le code d’entête de la page-3.html, nous pourrions avoir:

<link rel="Index" href="sommaire.html" />
<link rel="Next" href="page-4.html" /> 
<link rel="Prev" href="page-2.html" />

Les hyperliens

Les hyperliens s’utilisent au travers d’une balise <a> à laquelle nous allons ajouter quelques attributs pour affiner les informations, avec pour principaux :

• href, l’attribut primordial qui va pointer vers la page liée. Le chemin d’URL peut être sous forme relative au document (location situé en rapport du document en cours de lecture, par exemple, ../dossier/fichier.html), relative à la racine du site (location située en rapport du dossier principal dans lequel est déposé le site. À la différence du chemin relatif au document, celui-ci démarre forcément par un /, par exemple /dossier/fichier.html) et enfin absolue (location complète de l’adresse, par exemple, http://serveur/dossier/fichier.html).
• target, qui permet de préciser dans quelle fenêtre, ou cadre du navigateur, la page appelée devra s’afficher. A moins d’user d’un jeu de cadre (frameset, qui n’a plus cours aujourd’hui), les principales valeurs seront par défaut :
  • _self (cadre actuel, la page chargée prend la place du document en cours),
  • _blank (une nouvelle fenêtre, ou onglet, est ouvert pour chaque chargement de nouvelles pages, même si celle-ci est chargée plusieurs fois), et
  • _new (qui n’est pas standard en soit, et qui pourrait être remplacé par new tout simplement pour rester valide. Cette valeur va permettre de n’ouvrir qu’une seule et unique nouvelle fenêtre de chargement portant le même nom… à noter que par convention, on utilise new… mais nous aurions pu tout aussi bien user d’un tout_autre_mot).
• title, est un attribut qui a souvent porté à confusion, car celui-ci n’est en fait aucunement en relation avec la page courante, mais plutôt avec la page qui va être chargée, dont il rapporte le titre (entendre par titre, la balise <title> de la page qui sera chargée).

Les liens ne pointent pas uniquement et exclusivement vers des adresses usant du protocole http://. Un lien peut tout aussi bien pointer vers tout type de format de document (html, php, asp, pdf, zip, xls…), ou vers d’autres types de protocoles comme gopher://, mailto://, ftp:// … Si le navigateur interprète ce format de document, ou ce type de protocole, la navigation se poursuivra au sein même du navigateur. Sinon, l’application appropriée, et définie comme application par défaut pour ce type de protocole, se lancera, après validation par l’internaute.

<a href="mailto:comment@puce-et-media.com">Envoyez nous un commentaire</a>

Il est également possible, de pouvoir cibler un emplacement précis dans une page web, qu’il s’agisse de la page en cours, ou de tout autre page présente sur le web. Pour cela, il suffit d’ajouter un paramètre à l’URL, qui précise l’identifiant de l’élément qui doit être ciblé dans la page. L’identification de cet élément se fait sur son attribut id ou name. La syntaxe d’URL utilise alors un # placé au terme du lien. Le plus simple est de consulter l’exemple ci-dessous :

<a href="#article-b">Atteindre l'article B</a>
<article id="article-a">Article A: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</article>
<article name="article-b">Article B: Phasellus suscipit nunc ac enim sollicitud.</article>

De ce fait lorsque l’utilisateur clique sur un tel lien, le navigateur atteint la page en question et positionne l’ancre sur la partie visible haute de la fenêtre. De tels types de liens peuvent également être employés entre des pages distinctes, et pas seulement au sein de la même page.

<a href="page-precedente.html#article-b">Atteindre l'article B de la page précédente</a>