Accueil    HTML    Balise A
 



balise a  Balise A : anchor

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <a> permet de créer un lien hypertexte pointant vers un document en spécifiant l'url de celui-ci au niveau de l'attribut "href". Le tag <a> peut également définir des ancres au sein d'un document et les liens pour y accéder.

La page définie par le lien hypertexte s'affiche dans la page courante si l'attribut target n'est pas spécifié. Ce tag doit être fermé avec le tag </a>. Il n'est pas possible de croiser ou d'insérer deux balises l'une dans l'autre (pour ouvrir un lien dans une nouvelle fenêtre : target="_blank").

Pour personnaliser l'aspect des liens hypertextes, les propriétés de style à modifier sont entre autre l'attribut color pour la couleur du texte et text-decoration pour définir si le lien doit être souligné ou non.



Propriétés pour la balise a :




Propriétés Définition Valeurs
href URL du document cible ouvert lors du clic sur le lien URL
hreflang Langage du document
rel Détaille la relation existante entre le document courant et le document qui sera ouvert par le lien alternate, author
bookmark, help
license, next
nofollow, noreferrer
prefetch, prev
search, tag
target Indique dans quelle page s'ouvre le document (par défaut dans le document courant), si le paramètre vaut "_blank", la page s'ouvrira dans un nouvel onglet ou une nouvelle fenêtre. _blank
_parent
_self
_top
title Texte affiché au survol du lien Texte
D'autres propriétés s'appliquent dans le cadre de l'utilisation de la balise <map>


Exemple d'utilisation de la balise a :




Création d'un lien hypertexte simple :

Allez sur
<a href="http://www.startyourdev.com" title="Start Your Dev" target="_blank">StarYourDev</a>
pour vous perfectionner

Création d'un lien hypertexte appliqué sur une image :

Revenir à l'accueil :
<a href="index-html" title="Accueil HTML"><img src="../images/ico_home_blue.png"></a>

Lien hypertexte avec CSS :

<a href="#" style=#"color:midnightblue; text-decoration:none;">Lien coloré non souligné<a>

Lien avec un style CSS de type bouton :

<style type="text/css">
#lien-bouton{
   color:grey;
   font-family:verdana;
   font-size:12px;
   padding:5px 20px;
   text-decoration:none;
   background-image:url(degrade.png);
   background-repeat:repaet-x;
   background-position:top;
   border:solid 1px grey;
   border-radius:5px;
}
#lien-bouton:hover{
   background-position:bottom;
   border:solid 1px black;
   color:black;
}
</style>
<a id="lien-bouton" href="#">Lien bouton</a>

Exemple d'utilisation de la pseudo-classe ":hover" sur un lien hypertexte :

<style type="text/css">
   .exemple-lien{
      color:silver;
      text-decoration:none;
      font-weight:bold;
      padding-bottom:4px;
      border-bottom:solid 3px black;
   }
   .exemple-lien:hover{
      color:steelblue;
      border-bottom:solid 3px silver
   }
</style>
<a href="#" class="exemple-lien">Texte de mon lien<a>


Création d'un lien hypertexte simple :

Allez sur StarYourDev pour vous perfectionner


Création d'un lien hypertexte appliqué sur une image :

Revenir à l'accueil :



Lien hypertexte avec CSS :

Lien coloré non souligné


Lien avec un style CSS de type bouton :

Lien bouton


Exemple d'utilisation de la pseudo-classe ":hover" sur un lien hypertexte :

Texte de mon lien