Les attributs de la balise <a>

Somaire

La balise a et ses attributs

LES BALISES HTML

Nous allons voir dans ce document :

Sommaire

L’attribut charset
L’attribut coords
L’attribut href
L’attribut hreflang
L’attribut media Nouveau
L’attribut name
L’attribut rel
L’attribut rev
L’attribut shape
L’attribut target
L’attribut type Nouveau


L’attribut charset 

 

Appui de navigateurs

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut charset n'est pris en charge dans aucun des principaux navigateurs.
Définition et utilisation
L’attribut charset de la balise <a> n'est pas pris en charge en HTML5.
L'attribut charset spécifie le jeu de caractères du document lié (le document référencé dans l'attribut href).

Syntaxe

<a charset="valeur">

Valeurs de l’attribut character

Valeur Description
character_set le jeu de caractères du document lié :
UTF-8 – encodage pour les caractères Unicode
ISO-8859-1 - encodage pour les caractères pour l’alphabet Latin
 

Exemple :
<a charset="UTF-8" href=" http://www.oujood.com">apprendre comment créer un site</a>


L’attribut coords

 

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut coords n'est compatible qu'avec Firefox et Opera.
Définition et utilisation
L’attribut coords de la balise <a> n'est pas pris en charge en HTML5.
L'attribut coords est utilisé avec l'attribut shape pour spécifier la taille, la forme et la mise en place d'un lien dans un élément <object> ou <img>.
Les coordonnées du coin supérieur gauche sont 0,0.
Astuce : Pour créer des images interactives qui fonctionne dans tous les navigateurs, utilisez l'élément  <area> !

Syntaxe

<a coords="valeur">

 

Valeurs d'attribut coords

 
Valeur Description
x1,y1,x2,y2 Utilisé si l’attribut shape est sur  "rect" , il spécifie : x1.y1 les coordonnées du coin haut gauche et x2,y2 les coordonnés du coin bat droit du rectangle.
x,y,rayon Utilisé si l’attribut shape est sur  "circle" , il spécifie : x,y les coordonnés du centre du cercle et son rayon.
x1,y1,x2,y2,..,xn,yn Utilisé si l’attribut shape est sur "poly",  il spécifie les coordonnés des coins du polygone.
 

Exemple :
Dans cette exemple nous avons une image qui représente le Soleil et deux planètes (mercure et mars) comme suit.
planétes
Nous voulons que quand on click sur l’un d’eux il revoie à un article qui parle de lui.
Nous avons mis le soleil dans un rectangle de coordonnés (0,10,90,280) , la planète mercure dans un cercle de rayon 10 pixels dont les coordonnés du centre sont (124,150) et la planète mars dans un cercle de rayon 30 pixels et les coordonnés du centre (210,150) ; tous cela grâce à l’attribut shape.
Et nous avons utilisé les éléments <object> et <map> pour afficher l’image.

  Sélectionner le code

<!DOCTYPE html>
<html>
<body>
<p>Click sur le soleil ou sur une des planetes:</p>
<object data="http://www.oujood.com/balises/images/planetes.gif" alt="Planets" type="image/gif"
usemap="#Map">
 <map name="Map">
   <a href="http://fr.wikipedia.org/wiki/Le_Soleil_(Qu%C3%A9bec)"
shape="rect" coords="0,10,90,280">The Sun</a>
   <a
href="http://fr.wikipedia.org/wiki/Mercure_(plan%C3%A8te)"shape="circle"
coords="142,150,10">Mercury</a>
   <a href="http://fr.wikipedia.org/wiki/Mars_(plan%C3%A8te)"
shape="circle" coords="210,150,30">Venus</a>
 </map>
</object>
<p><b>Note:</b> L'attribut coords est supporté
uniquement dans Firefox et Opera.</p>
</body>
</html>

L’attribut href

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut href est pris en charge dans tous les principaux navigateurs.
Définition et utilisation
L'attribut href spécifie l'URL de la page sur laquelle le lien pointe.
Si l'attribut href n'est pas présent, la balise <a> n'est pas un lien hypertexte.
Différences entre HTML 4.01 et HTML5
En HTML5, si la balise <a> n'a aucun attribut href, c'est un espace réservé pour un lien hypertexte.

Syntaxe

<a href="URL">

Valeurs de l'attribut href

Valeur Description
URL C’est l’URL du lien.
Valeurs possible:
un URL absolu – en général il pointe sur un autre site (exemple : href="http://www.example.com/index.htm")
un URL relative – pointe toujours sur une page du même site (exemple :  href="default.htm")
un URL ancre  - pointe sur une section dans la même page web (exemple :  href="#top")

L’attribut hreflang

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut hreflang est pris en charge dans tous les principaux navigateurs.
Définition et utilisation
L'attribut hreflang spécifie la langue du document lié.
Cet attribut est utilisé uniquement si la valeur de l'attribut href existe.
Remarque : Cet attribut est purement consultatif.
Différences entre HTML 4.01 et HTML5
AUCUN.

Syntaxe

<a hreflang="language_code">

 

Valeurs d'attribut hreflang

Valeur Description
language_code Spécifie les deux lettres de  la langue comme FR pour le français.

L’attribut media

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut media est pris en charge dans tous les principaux navigateurs.
Définition et utilisation
L'attribut media spécifie pour quel médias/périphérique le document lié est optimisé.
Cet attribut est utilisé pour spécifier que l'URL cible est conçu pour des dispositifs spéciaux (comme l'iPhone)… .
Cet attribut peut accepter plusieurs valeurs.
Utilisé uniquement si l'attribut href est présent.
Remarque : Cet attribut est purement consultatif.
Différences entre HTML 4.01 et HTML5
L'attribut media est une nouveauté en HTML5.

Syntaxe

<a media="valeur">

Opérateurs possibles
Valeur Description
and Spécifie un opérateur AND (et)
not Spécifie un  opérateur NOT (non)
, Spécifie un opérateur OR (ou)
 

Dispositifs

Valeur Description
all Par défaut. Tout dispositif
aural Synthétiseurs de parole
braille Dispositifs de rétroaction de braille
handheld Appareils de poche (petit écran, bande passante limitée)
projection Projecteurs
print Mode imprimante ou page à imprimer
screen Ecrans de PC
tty Télétypes et similaires utilisant une grille de caractères fixe
tv Dispositifs de type télévision (basse résolution, capacité de défilement limité)
 

Valeurs

Valeur Description
width la largeur de la zone d'affichage ciblé.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
<a href=”url” media="screen and (min-width:500px)" >
height Spécifie la hauteur de la zone d'affichage ciblé.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
<a href=”url” media="screen and (max-height:700px)">
device-width Spécifie la largeur de l'affichage sur cible papier.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
 media="screen and (device-width:500px)"
device-height Spécifie la hauteur de l'affichage sur cible papier.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
 media="screen and (device-height:500px)"
orientation Spécifie l'orientation de l'affichage sur cible papier.
Valeurs possibles: "portrait" ou "landscape" (« portrait » ou « paysage »)
Exemple :
 media="all and (orientation: landscape)"
aspect-ratio Spécifie le rapport largeur/hauteur de la zone d'affichage ciblé.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
 media="screen and (aspect-ratio:16/9)"
device-aspect-ratio Spécifie la ratio de dispositif-largeur/dispositif- hauteur de l'affichage sur cible papier.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
 media="screen and (aspect-ratio:16/9)"
color Spécifie les bits par couleur d'affichage cible.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
media="screen and (color:3)"
color-index Spécifie le nombre de couleurs de  l'affichage que la cible peut gérer.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
media="screen and (min-color-index:256)"
monochrome Spécifie les bits par pixel dans un frame buffer monochrome.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
media="screen and (monochrome:2)"
resolution Spécifie la densité de pixels (dpi ou dpcm) de l'affichage sur cible papier.
les préfixes « min-» et « max-» peuvent être utilisés.
Exemple :
media="print and (resolution:300dpi)"
scan Spécifie méthode de balayage d'un écran de télévision.
Les valeurs possibles sont « progressiste » et « entrelacé ».
Exemple :
media="tv and (scan:interlace)"
grid Spécifie Si le périphérique de sortie est grille ou bitmap.
Les valeurs possibles sont « 1 » pour la grille et « 0 » dans le cas contraire.
Exemple :
media="handheld and (grid:1)"

L’attribut name

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut name est pris en charge dans tous les principaux navigateurs.
Définition et utilisation
L’attribut name de la balise <a> n'est pas pris en charge en HTML5. Utilisez l'attribut id.
L'attribut name spécifie le nom du point d'ancrage.
L'attribut name est utilisé pour créer une référence dans un document.
Astuce : En XHTML, l'attribut name de la balise <a> est désapprouvé et sera supprimé. Utilisez l'attribut id.

Syntaxe

<a name="valeur">


L’attribt rel

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut rel est pris en charge dans tous les principaux navigateurs.
Remarque: les navigateurs n’utilisent pas cet attribut. Cependant, les moteurs de recherche peuvent utiliser cet attribut pour obtenir plus d'informations sur un lien.
Définition et utilisation
L'attribut rel spécifie la relation entre le document actif et le document lié.
L'attribut rel est utilisé uniquement si l'attribut href est présent.
Différences entre HTML 4.01 et HTML5
Certaines valeurs sont supprimées, et des nouvelles valeurs sont ajoutées.

Syntaxe

<a rel="valeur">

Valeurs de l'attribut rel

Valeur Description
alternate Liens vers une autre version du document (page à imprimer, traduite ou miroir)
author Lien vers l’auteur du document
bookmark Permanent URL used for bookmarking
help Lien vers l’aide du document
license Lien vers le copyright du document
next Lien vers le document suivant
nofollow Liens vers un document non appuyé par le Web master , comme un lien payé.
(« nofollow » est utilisé par Google, pour spécifier que le robot de search Google ne doit pas suivre ce lien)
noreferrer Spécifie que le navigateur ne devrait pas envoyer  un en-tête HTTP referer si l'utilisateur suit le lien hypertexte
prefetch Spécifie que le document cible doit être mis en cache
prev Lien vers le document précédent
search Liens vers un outil de recherche pour le document
tag Un tag (mot clé) pour le document actif
 

L’attribut rev

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari


L'attribut rev est pris en charge dans tous les principaux navigateurs.
Remarque: les navigateurs n’utilisent pas cet attribut en quelque sorte. Cependant, les moteurs de recherche peuvent utiliser cet attribut pour obtenir plus d'informations sur un lien.
Définition et utilisation
L’attribut rev de la balise <a> n'est pas pris en charge en HTML5.
L'attribut rev spécifie la relation entre le document lié et le document en cours.
L'attribut rev est l'inverse de l'attribut rel .

Syntaxe

<a rev="valeur">

Les valeurs de l'attribut rev sont presque les mêmes que l’attribut rel.

L’attribut shape

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut shape est pris en charge uniquement par Firefox et Opera.
Définition et utilisation
L’attribut shape de la balise <a> n'est pas supporté en HTML5.
L'attribut shape est utilisé avec l'attribut coords pour spécifier la taille, la forme et la mise en place d'un lien dans un élément <object> ou <img>.
Astuce : Pour créer des images-interactives qui fonctionne dans tous les navigateurs, utilisez l'élément de  <area>  !

Syntaxe

<a shape="Valeur">

Valeurs de  l'attribut shape

Valeur Description
default Spécifie the entire region
rect Définit une région en forme d’un rectangle
circle Définit une région en forme d’un cercle
poly Définit une région en forme d’un polygone
 

Voir l’exemple en haut de la page


 L’attribut target

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut target est pris en charge dans tous les principaux navigateurs.
Définition et utilisation
L'attribut target spécifie l'endroit où ouvrir le document lié.

Syntaxe

<a target="_blank|_self|_parent|_top|framename">

Valeurs d'attribut

Valeur Description
_blank Ouvre la page liée dans une nouvelle fenêtre
_self Ouvre le document lié dans le même cadre (frame), où il a été activé ( par défaut)
_parent Ouvre le document lié dans le frame parent
_top Ouvre le document lié dans le corps entier de la fenêtre
framename Ouvre le document lié dans un frame nommé

L’attribut type

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

L'attribut type est pris en charge dans tous les principaux navigateurs.
Définition et utilisation

L'attribut type spécifie le type MIME du document lié.

Cet attribut est utilisé uniquement si la valeur de l'attribut href existe.

Remarque : Cet attribut est purement consultatif.
Différences entre HTML 4.01 et HTML5

L'attribut type est nouveau pour la balise <a> en HTML5.

Syntaxe

<a type="MIME_type">

Valeurs de l'attribut type

Valeur Description
MIME_type Le type MIME du document lié.
Voir les types MIME IANA pour une liste complète des types MIME standard

Retour à l'accueil du site

Par carabde 10 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Les balises et attributs

    Les balise en html sont les éléments qui servent à coder le contenue d'une page Web, ils ont été créés de manière à étre simples à utiliser.

    Balise addresse

    Définit les coordonnées de l'auteur / propriétaire d'un document

    Organisation du texte

    Comment créer le contenu de page web. • Comment rédiger des paragraphes • La façon dont fonctionnent les titres • Comment souligner certains mots de son texte • Etc......



    Rentabilisez efficacement votre site