Un élément map définit une carte image côté client à associer à un objet image, ou autre, occupant un espace sur la page. L'élément map a pour seul rôle d'affecter un nom et un contexte de balise à une ou plusieurs définitions d'élément area. Chaque élément area définit la façon dont la page doit réagir lorsqu'il y a interaction entre l'utilisateur et une zone de l'image (ou autre objet).

Une carte image côté serveur peut agir comme un lien d'élément a dans ce sens qu'une zone peut renvoyer vers une cible ou une pseudo-URL javascript: et désigner un autre cadre ou une autre fenêtre comme cible pour l'affichage d'un nouveau document. En fait, dans le modèle d'objet document qui définit le script, un élément area est traité comme un lien. On utilise souvent les cartes images côté client dans les barres de navigation occupant un cadre étroit au sein d'un jeu de cadres. L'auteur dispose ainsi d'une plus grande créativité en matière de conception de menus, tout en ayant la possibilité de désigner comme lien spécial n'importe quel segment d'une image plus grande.

Une seule touche de caractère qui active un élément (dans certains navigateurs) ou active un contrôle de formulaire ou une action de lien. Le navigateur et le système d'exploitation déterminent si l'utilisateur doit appuyer sur une touche de modification (par exemple Ctrl, Alt ou Commande) en même temps que sur la touche d'accès pour activer le lien. Dans IE 4 pour Windows et versions ultérieures ainsi que Netscape 6, il doit obligatoirement s'agir de la touche Alt et celle-ci est insensible à la casse. Dans IE 5 pour Macintosh et versions ultérieures ainsi que Netscape 6, il doit obligatoirement s'agir de la touche Ctrl.

Bien que l'attribut accesskey soit répertorié ici comme attribut largement partagé, ce n'est pas toujours le cas dans toutes les implémentations. HTML 4 et Netscape 6 ne reconnaissent cet attribut que pour les éléments suivants: a, area, button, input, label, legend et textarea. A cette liste, IE 4 ajoute applet, body, div, embed, isindex, marquee, object, select, span, table et td (mais supprime label et legend). IE 5 ajoute tout autre élément affichable, mais attention: à l'exception de l'élément input et d'autres éléments ayant trait aux formulaires, vous devez aussi affecter un attribut tabindex à l'élément dans IE 5 et versions ultérieures (même s'il ne s'agit que d'une valeur de zéro pour tous) pour permettre à la combinaison de touches d'accélération d'activer l'élément.

Les navigateurs non graphiques peuvent utiliser l'attribut alt pour afficher une brève description des zones réactives de l'image (invisible). A un moment donné, on pensait que le message alt pourrait s'afficher par défaut dans la barre d'état du navigateur lorsque la zone serait activée ou que le curseur passerait dessus. A présent, cette fonction est normalement remplie par les scripts et les gestionnaires d'événements onmouseover. N'oubliez pas que les ordinateurs de poche récents sont généralement dotés de navigateurs non graphiques (ou du moins qu'ils permettent la désactivation des fonctions graphiques afin d'améliorer les performances). Tenez toujours compte des situations où les fonctions graphiques ne sont pas prises en charge.

Bien que la définition officielle, élaborée par le W3C, de l'attribut coords d'un élément area précise que cet attribut est facultatif, cela ne veut pas dire que si vous l'omettez la zone area se comportera comme elle le devrait. L'attribut coords vous permet de définir le contour de la zone à associer à un lien ou à une action définie par un script. Certains outils de création de pages Web tiers peuvent vous aider à déterminer les coordonnées d'une zone réactive. Vous pouvez également charger l'image dans un programme graphique qui affiche la position du curseur en temps réel et transfère les valeurs obtenues vers l'attribut coords.

Les coordonnées sont spécifiées sous forme de liste, les valeurs étant séparées par une virgule. Si deux zones se chevauchent, la zone définie en premier à l'aide du code HTML a la priorité.

Adresse URI de la cible d'un lien associé à la zone. Dans un navigateur, lorsque l'adresse URI est un document HTML, le document est chargé dans la fenêtre cible actuelle (par défaut) ou dans une autre fenêtre (en fonction de la fenêtre définie comme fenêtre cible par l'attribut target). Pour certains types de fichier, le navigateur peut charger le contenu cible dans un plug-in ou enregistrer le fichier cible sur l'ordinateur client. Du fait que IE 3 et Navigator (jusqu'à la version 4) traitent les éléments area comme des éléments a, l'attribut href doit être défini dans l'élément area pour que les scripts de l'ancien DOM puissent accéder aux différentes propriétés relatives à l'URL et que les gestionnaires d'événements (tels que onmouseover) puissent opérer.

Description de l'élément. Pour les éléments HTML qui produisent du contenu visible sur la page, IE 4 et versions ultérieures ainsi que Netscape 6 affichent le contenu de l'attribut title sous forme d'info-bulle lorsque le curseur reste un moment sur l'élément concerné. Par exemple, l'élément de colonne col n'affiche pas le contenu, donc son attribut title fournit simplement des informations. Pour générer des info-bulles dans les tableaux, affectez des attributs title aux éléments tels que table, tr, th ou td.

Les propriétés de police et de couleur sont régies par le navigateur et ne peuvent pas être modifiées par script. Dans IE pour Windows, l'info-bulle est le petit rectangle jaune clair standard; dans IE pour Macintosh, l'info-bulle s'affiche comme une bulle de BD, à la manière du système d'aide de MacOS. Dans Netscape 6, les info-bulles s'affichent toujours sous la forme du même petit rectangle quelle que soit la version du système d'exploitation. Si aucun attribut n'est spécifié, l'info-bulle ne s'affiche pas.

Vous pouvez affecter à cet attribut le texte descriptif de votre choix. Etant donné que tout le monde ne le verra pas, n'y placez pas d'informations essentielles. Peut-être les navigateurs conçus pour satisfaire les critères d'accessibilité Web utiliseront-ils les informations de cet attribut pour lire les informations au sujet d'un lien ou d'éléments autres que du texte à des utilisateurs malvoyants. Donc, ne négligez pas cette aide potentiellement utile pour décrire l'objectif d'un élément sur une page.

Bien que les indications de compatibilité pour cet attribut le fassent remonter à l'époque de Microsoft Internet Explorer 3 et HTML 3.2, il est nouvellement affecté à de nombreux éléments à partir de Microsoft Internet Explorer 4 et de HTML 4.0.

Indique au navigateur qu'aucun lien n'est associé à la zone définie par les coordonnées (le même résultat est obtenu si vous ne spécifiez aucun attribut href). Lorsque vous spécifiez cet attribut, les navigateurs gérant les scripts ne traitent plus l'élément comme un lien. lorsqu'un élément area est dépourvu d'attribut href, l'élément ne réagit plus aux événements utilisateur. Dans IE 4 et versions ultérieures, ainsi que Netscape  6, vous pouvez activer et désactiver cet attribut à l'aide d'un script en affectant à la propriété noHref correspondante la valeur true ou false.

Définit la forme de la zone graphique côté client dont les coordonnées ont été spécifiées à l'aide de l'attribut coords. L'attribut shape indique au navigateur à combien de coordonnées il doit s'attendre.

Si le document cible doit être affiché dans une fenêtre ou dans un cadre autre que la fenêtre ou le cadre actuels, vous pouvez préciser l'endroit où il doit s'afficher en associant un nom de fenêtre ou de cadre à l'attribut target. Il faut impérativement affecter un nom aux cadres et aux fenêtres cibles afin de les identifier. Pour attribuer un nom à un nouveau cadre, utilisez les attributs name et id de l'élément frame; pour attribuer un nom à une nouvelle fenêtre, utilisez le second paramètre de la méthode de script window.open( ) . Si vous omettez cet attribut, le document cible s'affiche à la place du document contenant le lien. Cet attribut s'applique uniquement lorsqu'une valeur est affectée à l'attribut href de l'élément.

Un élément area ne peut avoir qu'un seul document de destination et une seule cible. Si vous voulez qu'un lien change le contenu de plusieurs cadres, vous pouvez utiliser le gestionnaire d'événements onclick d'un élément area (le chapitre  9 indique les versions de navigateur prises en charge) ou la pseudo-URL javascript: pour exécuter un script chargeant plusieurs documents. Associez l'adresse URL voulue à la propriété location.href de chaque cadre.

Les DTD strictes pour HTML 4 et XHTML ne prennent en charge l'attribut target d'aucun élément, puisque les cadres et les fenêtres n'appartiennent pas au balisage pur du document. En fait, le jeu de cadres ne sera pas valider dans un environnement strict, d'où l'action des DTD de jeu de cadres séparé pour HTML  4 et XHTML. Si vos documents doivent faire l'objet d'une validation avec ces DTD strictes et que vous souhaitez prendre en charge les cibles, utilisez les scripts pour définir les propriétés target des liens, des cartes images et des formulaires une fois la page chargée.