Les attributs de la balise <a>

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

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

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.

Exemple : Copier le code

<!DOCTYPE html>
<html>
<body>
<p>Click sur le soleil ou sur une des planetes:</p>
<object data="https://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

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

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

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

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

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

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

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

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

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

Les attributs de la balise <a>

Balises HTML

Plus...

La balise a et ses attributs

L’attribut charset

Valeurs de l’attribut character

L’attribut coords

Valeurs d'attribut coords

L’attribut href

Valeurs de l'attribut href

L’attribut hreflang

Valeurs d'attribut hreflang

L’attribut media

L’attribut name

L’attribt rel

Valeurs de l'attribut rel

L’attribut rev

L’attribut shape

Valeurs de l'attribut shape

L’attribut target

Valeurs d'attribut

L’attribut type

Valeurs de l'attribut type

Voir aussi nos tutoriel :