L'attribut HTML a href expliqué avec des exemples

L' attribut fait référence à une destination fournie par un lien. La abalise (anchor) est morte sans l' attribut.

Comment utiliser le tag

Parfois, dans votre flux de travail, vous ne voulez pas de lien en direct ou vous ne connaissez pas encore la destination du lien. Dans ce cas, il est utile de définir l' hrefattribut sur "#"pour créer un lien mort.

L' hrefattribut peut être utilisé pour créer un lien vers des fichiers locaux ou des fichiers sur Internet.

Par exemple:

  Href Attribute Example   

Href Attribute Example

The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth.

L' attribut est pris en charge par tous les navigateurs.

Plus d'attributs HTML:

hreflang : Spécifie la langue de la ressource liée.

target : Spécifie le contexte dans lequel la ressource liée s'ouvrira.

title : Définit le titre d'un lien, qui apparaît à l'utilisateur comme une info-bulle.

Exemples

This is a dead link This is a live link to freeCodeCamp more with a href attribute

Ancres sur la page

Il est également possible de définir une ancre à un certain endroit de la page. Pour ce faire, vous devez d'abord placer un onglet à l'emplacement de la page avec la balise et l'attribut nécessaire «nom» avec une description de mot-clé, comme ceci:

Aucune description entre les balises n'est requise. Après cela, vous pouvez placer un lien menant à cette ancre à n'importe quel endroit de la même page. Pour ce faire, vous devez utiliser la balise avec l'attribut nécessaire «href» avec le symbole # (pointu) et la description du mot-clé de l'ancre, comme ceci:

Go to Top

Liens d'image

Le peut également être appliqué aux images et autres éléments HTML.

Exemple

Quelques autres exemples de href

This gives a base url for all further urls on the page This is a live link to an external stylesheet

Que pouvez-vous faire d'autre?

Plus de personnalisation! Voyons un cas d'utilisation spécifique:

Un lien mailto est une sorte d'hyperlien ( ) avec des paramètres spéciaux qui vous permettent de spécifier des destinataires supplémentaires, une ligne d'objet et / ou un corps de texte.

La syntaxe de base avec un destinataire est:

Some text

Ajouter un objet à ce mail:

Si vous souhaitez ajouter un sujet spécifique à cet e-mail, veillez à ajouter %20ou +partout il y a un espace dans la ligne d'objet. Un moyen simple de s'assurer qu'il est correctement formaté consiste à utiliser un décodeur / encodeur d'URL.

Ajout de corps de texte:

De même, vous pouvez ajouter un message spécifique dans la partie corps de l'e-mail: encore une fois, les espaces doivent être remplacés par %20ou +. Après le paramètre subject, tout paramètre supplémentaire doit être précédé de&

Exemple: Supposons que vous souhaitiez que les utilisateurs envoient un e-mail à leurs amis au sujet de leurs progrès au Free Code Camp:

Adresse: vide

Sujet: Bonne nouvelle

Corps: je deviens développeur

Votre lien html maintenant:

Send mail!

Ici, nous avons laissé mailto vide (mailto :?). Cela ouvrira le client de messagerie de l'utilisateur et l'utilisateur ajoutera lui-même l'adresse du destinataire.

Ajouter plus de destinataires:

De la même manière, vous pouvez ajouter des paramètres CC et Cci. Séparez chaque adresse par une virgule!

Les paramètres supplémentaires doivent être précédés de &.

Send mail!

Plus d'information:

MDN - Liens de messagerie