41Mag - Comment faire un lien en HTML5 – Balise <a>

Comment faire un lien en HTML5 – Balise <a>

Dans cet article, nous allons voir comment faire un lien en HTML5. Les liens hypertexte permettent de surfer en passant de pages en pages. Ils peuvent pointer vers un autre site web, vers d’autres pages de votre site ou pointer vers un endroit précis d’une même page.

Pour créer un lien hypertext en HTML5, on utilise la balise <a>. Elle se referme en utilisant la balise </a>. (comprendre le principe de balise imbriqué en HTML5)

[cadreHTML5]

I. Faire un lien hypertext en HTML5

En utilisant le principe de balise imbriqué, on va donc « entouré » le lien avec les balises <a> et </a>.

1
<a>Ceci est un lien</a>

Il est important de noter qu’un lien peut contenir plusieurs mots. Dans l’exemple ci-dessus, la phrase entière est un lien. Elle est donc cliquable.

Notre lien fonctionne, vous pouvez le tester pourtant il ne vous emmènera vers aucune page. Logique, nous ne lui avons donné aucune adresse. Pour indiquer une page ou un site vers le quel votre lien doit pointer on utilise un attribut.

Qu’est-ce qu’un attribut ? Un attribut est un élément qui permet de renseigner différentes informations à la balise auquel il appartient. Toutes les balises ont des attributs. Certains sont obsolètes, d’autres recommandés fortement.

Pour indiquer à notre balise <a> l’adresse du lien, on utilise l’attribut HREF.

1
<a href="http://www.google.fr">Faire une recherche</a>

Dans l’exemple ci-dessus, si on clique sur le texte : « faire une recherche », on changera de page pour aller sur la page d’accueil de Google. Tout comme les balises, les attributs et leur valeurs n’apparaissent pas à l’écran. Elles servent uniquement aux navigateurs.

Pour faire un lien vers une page du même site, l’adresse peut-être écris entièrement ou de façon raccourcis. Par exemple, si nous sommes sur la page d’accueil (index.html) et que nous souhaitons faire un lien vers la page de contact (contact.html), nous pourrons l’écrire comme dans l’exemple suivant :

1
<a href="contact.html">Nous contacter</a>

http://www.mon-site.fr/contact.html est l’adresse complete de la page. Mais lorsque nous sommes sur le même site, nous pouvons raccourcir l’adresse par : contact.html.

Attention, cela ne vaut que pour le cas ou la page est dans le même dossier que la page vers qui le lien se destine. Par défaut il sont à la racine du site web (tout en haut de la hiérarchie). Pour mieux comprendre, prenons l’exemple suivant : depuis votre page d’accueil vous souhaité faire un lien vers la page maxime.html qui se trouve dans le dossier PROFIL.

  • L’adresse de la page d’accueil est donc : http://www.mon-site.fr/index.html
  • L’adressse de la page de maxime est donc : http://www.mon-site.fr/PROFIL/maxime.html

Pour faire un lien vers une page du même site appartenant à un dossier (maxime.html), depuis une autre page (index.html) on écris le lien de la manière suivante :

1
Consulter le profil de <a href="PROFIL/maxime.html">Maxime</a>

En cas de doute, mieux vaut écrire l’adresse complète :

1
Consulter le profil de <a href="http:www.mon-site.fr/PROFIL/maxime.html">Maxime

Astuce : Pour positionner votre site web lors de requête sur les moteurs de recherches, ces derniers analyses vos pages des plusieurs façons. Parmi elles, figure l’importance des mot-clés. Il est donc préférable de glisser un maximum de mot-clés dans la page (sans en faire trop, google le verrais et vous pénaliserais …).

Pour un lien éfficace vers un site de jardinage par exemple, il est conseillé d’utiliser le deuxième exemple ci-dessous :

1
2
3
4
5
<!-- Mauvais lien -->
<a href="http://www.mon-site.fr">Cliquez ici</a>
 
<!-- Lien optimiser  -->
<a href="http://www.mon-site.fr">La boutique du jardinage</a>

Il arrive parfois lors de la création d’un site web d’ajouter certains liens par avance mais dont on ne connait encore pas l’adresse. Par sécurité, on ajoute comme valeur le symbole # (dièse) à l’attribut HREF de la balise <a>.

1
<a href="#"&gt;Lien sans adresse</a>

II. Les attributs de la balise <a>

Nous venons de voir que la balise <a> possède l’attribut HREF qui sert à indiquer l’adresse vers laquelle le lien doit pointer. Cette balise possède d’autre attribut fonctionnant de la même façon.

AttributValeurDescription
hrefURLIndiquez l’adresse de la page vers laquelle pointe le lien
hreflanglanguage_codeIndiquez la langue de la page vers laquelle pointe le lien
media Newmedia queryIndiquez le type de document vers laquelle pointe le lien. La valeur par défaut est : all
relalternate
author
bookmark
external
help
license
next
nofollow
noreferrer
prefetch
prev
search
sidebar
tag
Indiquez la relation entre le document actuel et celui vers lequel pointe le lien
target_blank
_parent
_self
_top
framename
Indiquez l’emplacement d’ouverture du lien
type Newmime_typeIndiquez le Type MIME du document vers lequel pointe le lien

En se référant au tableau ci-dessus, si nous souhaitons ouvrir notre lien dans un nouvel onglet du navigateur, on utilisera donc l’attribut TARGET auquel on donnera la valeur _BLANK. Ce qui nous donnera :

1
<a href="http://www.mon-site.fr" target="_blank">Nouvel onglet</a>

III. Lien vers une boite Mail

Vous aurez peut-être remarquez en cliquant sur certain lien, notamment une adresse mail, s’ouvrait votre client mail (Outlook, Thunderbird, Mail ….). Une fois ouvert, certain champs sont même deja renseigner (destinataire, sujet …).

Pour faire un lien qui ouvre le client mail, on utilise l’attribut HREF que vous connaissez deja. A la place de lui ajouter l’adresse d’une page ou d’un site, on écris MAILTO suivit de l’adresse mail du destinataire.

1
<a href="mailto:mon@adresse.fr">Ecrivez-moi</a>

Pour indiquer le sujet , on ajoute SUBJECT à la fin de l’adresse mail en le reliant par le symbole ? (point d’interrogation). NE JAMAIS METTRE D’ESPACE DANS LE SUJET. On remplace les espaces par les symbole %20.

1
<a href="mailto:mon@adresse.fr?subject=Mon%20sujet">Ecrivez-moi</a>

On peut éajouter un destinataire en copie ou en copie caché afin que personne ne le sache …

1
2
3
4
5
<!-- Destinataire en copie -->
<a href="mailto:mon@adresse.fr?cc=autre@adresse.fr">Ecrivez-moi</a>
 
<!-- Destinataire en copie caché  -->
<a href="mailto:mon@adresse.fr?bcc=autre@adresse.fr">Ecrivez-moi</a>

Ecrire le corps du message (toujours sans espace – remplacé par %20)

1
<a href="mailto:mon@adresse.fr?body=bonjour%20cher%20client">Ecrivez-moi</a>

Ou en combinant plusieurs champs : (on ajoute le symbole & entre les champs à définir)

1
<a href="mailto:mon@adresse.fr?subject=abonnement&amp;cc=autre@adresse.fr">Ecrivez-moi</a>

IV. Les ancres : liens interne à la page

En HTML 4.01, la balise <a> pouvait soit être un lien hypertexte soit un lien vers une ancre. En HTML5, cette balise sera uniquement un lien hypertexte, mais si elle n’a pas l’attribut href, elle reste un espace réservé pour un lien hypertexte.

HTML5 a quelques nouveaux attributs, et certains attributs HTML 4.01 ne sont pas pris en charge dans HTML5. (les attributs suivant ne sont plus supporté en HTML5 : charset, coords, name, rev, shape)

Article du même thême : ....

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.