HTML
Ancres et Hyperliens

Introduction

Syntaxe

• <a href="URL or anchor">Link Text</a>

Paramètres

Lien vers un autre site

Ceci est l'utilisation de base de l' élément <a> ( un élément nchor) :

<a href="http://example.com/">Link to example.com</a>

Il crée un lien hypertexte vers l'URL http://example.com/ comme spécifié par l' href (référence hypertexte), avec le texte d'ancrage "Lien vers exemple.com". Cela ressemblerait à quelque chose comme ceci:

Lien vers example.com

Pour indiquer que ce lien mène à un site Web externe, vous pouvez utiliser le type de lien external :

<a href="http://example.com/" rel="external">example site</a>

Vous pouvez créer un lien vers un site qui utilise un protocole autre que HTTP. Par exemple, pour créer un lien vers un site FTP, vous pouvez le faire,

<a href="ftp://example.com/">This could be a link to a FTP site</a>

Dans ce cas, la différence réside dans le fait que cette balise d'ancrage demande au navigateur de l'utilisateur de se connecter à example.com à l'aide du protocole FTP (File Transfer Protocol) plutôt qu'au protocole HTTP (Hypertext Transfer Protocol).

Cela pourrait être un lien vers un site FTP

Ouvrir le lien dans un nouvel onglet / une nouvelle fenêtre

<a href="example.com" target="_blank">Text Here</a>

L'attribut target spécifie où ouvrir le lien. En le définissant sur _blank , vous indiquez au navigateur de l'ouvrir dans un nouvel onglet ou une nouvelle fenêtre (selon les préférences de l'utilisateur).

VULNÉRABILITÉ DE SÉCURITÉ AVERTISSEMENT!

Utiliser target="_blank" donne au site d’ouverture un accès partiel à l’objet window.opener via JavaScript, ce qui permet à cette page d’accéder et de modifier le window.opener.location de votre page et de rediriger les utilisateurs vers des sites malveillants ou des sites de phishing.

Chaque fois que vous utilisez ceci pour les pages que vous ne contrôlez pas, ajoutez rel="noopener" à votre lien pour empêcher l'objet window.opener d'être envoyé avec la requête.

Actuellement, Firefox ne supporte pas noopener , vous devrez donc utiliser rel="noopener noreferrer" pour un effet maximum.

Lien vers une ancre

Les ancres peuvent être utilisées pour accéder à des balises spécifiques sur une page HTML. La balise <a> peut pointer sur tout élément ayant un attribut id . Pour en savoir plus sur les identifiants, consultez la documentation sur les classes et les identifiants . Les ancres sont principalement utilisées pour accéder à une sous-section d'une page et sont utilisées conjointement avec des balises d'en-tête.

Supposons que vous ayez créé une page ( page1.html ) sur de nombreux sujets:

<h2>First topic</h2>
<p>Content about the first topic</p>
<h2>Second topic</h2>
<p>Content about the second topic</p>

Une fois que vous avez plusieurs sections, vous pouvez créer une table des matières en haut de la page avec des liens rapides (ou des signets) vers des sections spécifiques.

Si vous avez attribué un attribut id à vos sujets, vous pouvez alors y accéder

<h2 id="Topic1">First topic</h2>
<p>Content about the first topic</p>
<h2 id="Topic2">Second topic</h2>
<p>Content about the second topic</p>

Maintenant, vous pouvez utiliser l'ancre dans votre table des matières:

<h1>Table of Contents</h1>
    <a href='#Topic1'>Click to jump to the First Topic</a>
    <a href='#Topic2'>Click to jump to the Second Topic</a>

Ces ancres sont également attachées à la page Web sur laquelle elles se trouvent ( page1.html ). Vous pouvez donc vous connecter sur le site d'une page à l'autre en référençant le nom de la page et de l' ancre.

 Remember, you can always <a href="page1.html#Topic1">look back in the First Topic</a> for supporting information.

Lien qui exécute JavaScript

Il suffit d'utiliser le protocole javascript: pour exécuter le texte en JavaScript au lieu de l'ouvrir comme un lien normal:

<a href="javascript:myFunction();">Run Code</a>

Vous pouvez également obtenir la même chose en utilisant l'attribut onclick :

<a href="#" onclick="myFunction(); return false;">Run Code</a>

Le return false; est nécessaire pour empêcher votre page de défiler vers le haut lorsque le lien vers # est cliqué. Assurez-vous d'inclure tout le code que vous souhaitez exécuter avant, car le retour arrêtera l'exécution de code supplémentaire.

À noter également que vous pouvez inclure un point d'exclamation ! après le hashtag afin d'empêcher la page de défiler vers le haut. Cela fonctionne car tout slug invalide ne fera pas défiler le lien n'importe où sur la page, car il ne pouvait pas localiser l'élément auquel il fait référence (un élément avec id="!" ). Vous pouvez également utiliser un slug non valide (tel que #scrollsNowhere ) pour obtenir le même effet. Dans ce cas, return false; n'est pas requis:

<a href="#!" onclick="myFunction();">Run Code</a>

Devriez-vous utiliser l'un de ces éléments?

La réponse est presque certainement non . L'exécution de JavaScript en ligne avec l'élément comme celui-ci est une mauvaise pratique. Envisagez d'utiliser des solutions JavaScript pures qui recherchent l'élément dans la page et y associent une fonction. Écouter un événement

Pensez également à savoir si cet élément est réellement un bouton plutôt qu'un lien . Si oui, vous devriez utiliser <button> .

Lien vers une page sur le même site

Vous pouvez utiliser un chemin relatif pour créer un lien vers des pages du même site Web.

<a href="/example">Text Here</a>

L'exemple ci-dessus irait à l' example fichier dans le répertoire racine ( / ) du serveur.

Si ce lien se trouvait sur http://exemple.com , les deux liens suivants amèneraient l'utilisateur au même emplacement

<a href="/page">Text Here</a>
<a href="http://example.com/page">Text Here</a>

Les deux ci-dessus iraient au fichier de la page dans le répertoire racine de example.com .

Lien qui exécute le client de messagerie

Utilisation de base

Si la valeur de l' href commence par mailto: il essaiera d'ouvrir un client de messagerie sur le clic:

<a href="mailto:[email protected]">Send email</a>

Cela mettra l'adresse e-mail [email protected] comme destinataire du nouvel e-mail créé.

Cc et Bcc

Vous pouvez également ajouter des adresses pour les destinataires cc ou bcc en utilisant la syntaxe suivante:

<a href="mailto:[email protected][email protected]&[email protected]">Send email</a>

Sujet et texte du corps

Vous pouvez également renseigner le sujet et le corps du nouvel email:

<a href="mailto:[email protected]?subject=Example+subject&body=Message+text">Send email</a>

Ces valeurs doivent être encodées en URL .

En cliquant sur un lien avec mailto: essaiera d'ouvrir le client de messagerie par défaut spécifié par votre système d'exploitation ou il vous demandera de choisir quel client vous souhaitez utiliser. Toutes les options spécifiées après l'adresse du destinataire ne sont pas prises en charge par tous les clients de messagerie.

Lien qui compose un numéro

Si la valeur de l' href commence par tel: :, votre appareil composera le numéro lorsque vous cliquez dessus. Cela fonctionne sur les appareils mobiles ou sur les ordinateurs / tablettes exécutant des logiciels - tels que Skype ou FaceTime - qui peuvent faire des appels téléphoniques.

<a href="tel:11234567890">Call us</a>

La plupart des appareils et des programmes inviteront l'utilisateur à confirmer le numéro qu'il va composer.