---
title: <map>
slug: Web/HTML/Element/map
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/map
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML<strong> <code>&lt;map&gt;</code></strong> est utilisé avec des éléments {{HTMLElement("area")}} afin de définir une image cliquable divisée en régions.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div>

<h2 id="Attributs">Attributs</h2>

<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<dl>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>Cet attribut fournit un nom afin que la carte cliquable puisse être référencée. Cet attribut est obligatoire et sa valeur doit être une chaîne de caractères non-vide qui ne contient pas de blancs. La valeur de cet attribut doit être unique pour tous les éléments {{HTMLElement("map")}} du document. Si l'attribut universel <code>id</code> est utilisé, <code>name</code> devra avoir la même valeur que celui-ci.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;map name="primary"&gt;
  &lt;area shape="circle" coords="75,75,75" href="left.html"&gt;
  &lt;area shape="circle" coords="275,75,75" href="right.html"&gt;
&lt;/map&gt;
&lt;img usemap="#primary" src="https://via.placeholder.com/350x150" alt="350 x 150 pic"&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","450","230")}}</p>

<h3 id="Résultat_attendu">Résultat attendu</h3>

<p>L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier)&nbsp;:</p>

<p><em>Pour le lien <code>left.html</code>&nbsp;:</em><br>
 <img alt="" src="screen_shot_2017-02-02_at_10.48.40_pm.png"></p>

<p><em>Pour le lien <code>right.html</code>&nbsp;</em><br>
 <img alt="" src="screen_shot_2017-02-02_at_10.49.04_pm.png"></p>


<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>Tout élément dont <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">le modèle de contenu est transparent</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">du contenu phrasé</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>Aucun.</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLMapElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("html.elements.map")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("a")}}</li>
 <li>{{HTMLElement("area")}}</li>
</ul>