Cet article sur le HTML explique comment utiliser la balise <area> en présentant sa syntaxe d'utilsation et des exemples.
Description
La balise <area> permet de définir des zones cliquables ou zones actives à l'intérieur d'une carte-image qui sont associées à des hyperliens (ou liens hypertexte). Si vous cliquez sur ces zones, il effectuera une action telle que l'ouverture d'une nouvelle image, une nouvelle URL, etc. Cette balise est toujours utilisée avec la balise <map>.
À l'intérieur d'une image cliquable, différentes zones peuvent être liées par hyperlien vers divers emplacements en utilisant plusieurs éléments <area> dans un seul élément <map>.
L'élément <area> est défini avec les attributs (obligatoires) shape et coords. L'attribut shape spécifie la forme de la zone telle que rectangle, cercle, carré et polygone. L'attribut coords définit les coordonnées des zones cliquables à l'intérieur de l'image.
Qu'est-ce qu'une carte-image ?
Une carte-image est définie comme une image graphique avec des zones actives de sorte que lorsque l'utilisateur clique sur ces zones, elles peuvent être liées à différentes destinations. Pour définir une carte-image, nous avons besoin des éléments suivants :
- Un élément HTML <img> avec l'attribut usemap qui définit un nom de carte valide.
- Un élément HTML <map> avec l'attribut name dont la valeur doit être identique à celle de l'attribut usemap.
- Un ou plusieurs éléments <area> à l'intérieur d'un élément <map> qui créent des zones cliquables dans une carte-image.
Syntaxe
En HTML, la syntaxe de la balise <area> est la suivante :
<area shape="" coords="" href="">
Voici quelques spécifications concernant la balise HTML <area> :
| Affichage |
En bloc |
| Balise |
Uniquement la balise ouvrante (<area>). Pas de balise fermante. |
| Utilisation |
Carte-image |
Attributs
Attributs spécifiques
Voici une liste d'attributs spécifiques à la balise <area> :
| Attribut |
Description |
Compatibilité HTML |
| shape |
Définit la forme de la zone cliquable. Il peut s'agir de l'une des valeurs suivantes : cercle, rect, poly, default.
circle - définit une région circulaire
rect - définit une région rectangulaire
poly - définit une région en forme de polygone
default - définit une région en dehors de toute forme déjà définie. Doit être placé en dernier dans l'élément de la carte-image. |
HTML 4.01, HTML5 |
| coords |
Valeurs de coordonnées pour la zone cliquable qui dépendent de la forme spécifiée
Pour circle : valeurs x, y, r où x, y représentent le centre du cercle et r est le rayon du cercle.
Pour rect : valeurs x1, y1, x2, y2 où x1, y1 représentent les coordonnées du coin supérieur gauche et x2, y2 représentent les coordonnées du coin supérieur droit du rectangle.
Pour poly : valeurs x1,y1,x2,y2,x3,y3,... où chaque paire x, y représente un sommet du polygone. |
HTML 4.01, HTML5 |
| alt |
Spécifie un texte alternatif à afficher si l'image ne peut pas être affichée |
HTML 4.01, HTML5 |
| download |
Indique que le lien hypertexte sera utilisé pour télécharger une ressource. |
HTML5 |
| href |
Définit le lien hypertexte pour la zone cliquable. Cet attribut peut être omis en HTML5. En HTML4, cet attribut doit être une URL valide ou vous devez utiliser l'attribut nohref. |
HTML 4.01, HTML5 |
| hreflag |
La langue de la ressource liée. Vous devez spécifier cet attribut si vous fournissez une valeur pour l'attribut href. |
HTML5 |
| name |
Spécifie le nom de la zone cliquable pour les anciens navigateurs. |
HTML 4.01 |
| nohref |
Utilisez cet attribut pour indiquer qu'aucun lien hypertexte n'existe pour cette zone cliquable en HTML4. |
HTML 4.01 |
| ping |
Spécifie une liste d'URL (séparées par des espaces) auxqulles les requêtes POST avec le contenu PING seront envoyées en arrière-plan par le navigateur lorsque le lien hypertexte a été suivi. Cela peut être utilisé à des fins de suivi. |
HTML 4.01, HTML5 |
| rel |
Définit la relation entre le document et le lien hypertexte si vous fournissez une valeur pour l'attribut href. Il peut s'agir de l'une des valeurs suivantes : alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag. |
HTML5 |
| tabindex |
Définit une valeur numérique indiquant la position de l'index de tabulation de la zone cliquable dans l'ordre de tabulation du navigateur. |
HTML 4.01 |
| target |
Spécifie l'endroit où afficher la ressource liée. Il peut s'agir d'une des valeurs suivantes : _self, _blank, _parent, _top
_self - signifie que le lien sera ouvert dans l'onglet acctuel.
_blank - signifie que le lien sera ouvert dans un nouvel onglet.
_parent - signifie que le lien sera ouvert dans l'onglet acctuel ou la fenêtre actuelle du navigateur.
_top - signifie que le lien sera ouvert dans la fenêtre complète d'origine. |
HTML 4.01, HTML5 |
Remarques
- L'élément HTML <area> se trouve dans la balise <body> et doit se trouver à l'intérieur d'une balise <map>.
- L'attribut usemap de la balise <img> doit être le même que l'attribut name de la balise <map> créant une relation entre ces deux éléments.
Compatibilité avec les navigateurs
La balise <area> est compatible avec les navigateurs suivants :
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- Edge Mobile
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Exemples
Dans cette partie, nous allons explorer quelques exemples d'utilisation de la balise <area> en HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict et XHTML 1.1.
Documents HTML5
Si vous avez créé une nouvelle page Web en HTML5, votre balise <area> pourrait ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 - Balise <area></title>
</head>
<body>
<h1>Exemple d'utilisation de la balise Area en HTML5</h1>
<img src="image.png" width="500" height="500" alt="Programmation Web" usemap="#web">
<map name="web">
<area shape="rect" coords="66,117,131,168" href="https://tutorialsgrey.com/categorie/langage-html/" alt="HTML">
<area shape="circle" coords="199,36,277,85" href="https://tutorialsgrey.com/categorie/css/" alt="CSS">
</map>
</body>
</html>
Dans cet exemple de document HTML5, nous avons créé une carte-image à l'aide du fichier image.png qui comporte deux zones cliquables définies à l'aide de la balise <area>. La première zone cliquable est un rectangle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/langage-html/ . La deuxième zone cliquable est un cercle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/css/.
Document HTML 4.01 Transitional
Si vous avez créé une nouvelle page Web en HTML 4.01 Transitional, votre balise <area> pourrait ressembler à ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional - Balise <area></title>
</head>
<body>
<h1>Exemple d'utilisation de la balise Area en HTML 4.01 Transitional</h1>
<img src="image.png" width="500" height="500" alt="Programmation Web" usemap="#web">
<map name="chemistry">
<area shape="rect" coords="66,117,131,168" href="https://tutorialsgrey.com/categorie/langage-html/" alt="HTML">
<area shape="circle" coords="199,36,277,85" href="https://tutorialsgrey.com/categorie/css/" alt="CSS">
</map>
</body>
</html>
Dans cet exemple de document HTML 4.01 Transitional, nous avons créé une carte-image à l'aide du fichier image.png qui comporte deux zones cliquables définies à l'aide de la balise <area>. La première zone cliquable est un rectangle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/langage-html/ . La deuxième zone cliquable est un cercle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/css/.
Document XHTML 1.0 Transitional
Si vous avez créé une nouvelle page Web en XHTML 1.0 Transitional, votre balise <area> pourrait ressembler à ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Transitional - Balise <area></title>
</head>
<body>
<h1>Exemple d'utilisation de la balise Area en XHTML 1.0 Transitional</h1>
<img src="image.png" width="500" height="500" alt="Programmation Web" usemap="#web">
<map name="chemistry">
<area shape="rect" coords="66,117,131,168" href="https://tutorialsgrey.com/categorie/langage-html/" alt="HTML">
<area shape="circle" coords="199,36,277,85" href="https://tutorialsgrey.com/categorie/css/" alt="CSS">
</map>
</body>
</html>
Dans cet exemple de document XHTML 1.0 Transitional, nous avons créé une carte-image à l'aide du fichier image.png qui comporte deux zones cliquables définies à l'aide de la balise <area>. La première zone cliquable est un rectangle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/langage-html/ . La deuxième zone cliquable est un cercle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/css/.
Document XHTML 1.0 Strict
Si vous avez créé une nouvelle page Web en XHTML 1.0 Strict, votre balise <area> pourrait ressembler à ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict - Balise <area></title>
</head>
<body>
<h1>Exemple d'utilisation de la balise Area en XHTML 1.0 Strict</h1>
<img src="image.png" width="500" height="500" alt="Programmation Web" usemap="#web">
<map name="chemistry">
<area shape="rect" coords="66,117,131,168" href="https://tutorialsgrey.com/categorie/langage-html/" alt="HTML">
<area shape="circle" coords="199,36,277,85" href="https://tutorialsgrey.com/categorie/css/" alt="CSS">
</map>
</body>
</html>
Dans cet exemple de document XHTML 1.0 Strict, nous avons créé une carte-image à l'aide du fichier image.png qui comporte deux zones cliquables définies à l'aide de la balise <area>. La première zone cliquable est un rectangle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/langage-html/ . La deuxième zone cliquable est un cercle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/css/.
Document XHTML 1.1
Si vous avez créé une nouvelle page Web en XHTML 1.1, votre balise <area> pourrait ressembler à ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 - Balise <area></title>
</head>
<body>
<h1>Exemple d'utilisation de la balise Area en XHTML 1.1</h1>
<img src="image.png" width="500" height="500" alt="Programmation Web" usemap="#web">
<map name="chemistry">
<area shape="rect" coords="66,117,131,168" href="https://tutorialsgrey.com/categorie/langage-html/" alt="HTML">
<area shape="circle" coords="199,36,277,85" href="https://tutorialsgrey.com/categorie/css/" alt="CSS">
</map>
</body>
</html>
Dans cet exemple de document XHTML 1.1, nous avons créé une carte-image à l'aide du fichier image.png qui comporte deux zones cliquables définies à l'aide de la balise <area>. La première zone cliquable est un rectangle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/langage-html/ . La deuxième zone cliquable est un cercle qui renvoie à l'adresse https://tutorialsgrey.com/categorie/css/.