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

<p>L'élément HTML <strong><code>&lt;meter&gt;</code></strong> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.</p>

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

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>


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

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

<dl>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, il est à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre.</dd>
 <dt>{{htmlattrdef("high")}}</dt>
 <dd>Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>low</strong></code> est aussi défini, il doit être plus grand que celui-ci.</dd>
 <dt>{{htmlattrdef("low")}}</dt>
 <dd>Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>high</strong></code> est aussi défini, il doit être plus petit que celui-ci.</dd>
 <dt>{{htmlattrdef("max")}}</dt>
 <dd>Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut <code><strong>min</strong></code>.</dd>
 <dt>{{htmlattrdef("min")}}</dt>
 <dd>Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut <code><strong>max</strong></code>.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("optimum")}}</dt>
 <dd>Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si la valeur de <code><strong>optimum</strong></code> est inférieure à <code><strong>low</strong></code>, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à <code><strong>high</strong></code>, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre <code><strong>low </strong></code>et <code><strong>high</strong></code>, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.
 <div class="note">
 <p><strong>Note d'utilisation</strong> : il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p>

 <pre class="brush: html">Utilisation de l'espace de stockage:
&lt;meter value=6 max=8&gt;
  6 blocs utilisés (sur un total de 8)
&lt;/meter&gt;</pre>
 Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</div>
 </dd>
</dl>

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

<h3 id="Exemple_simple">Exemple simple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;Chauffez le four à
  &lt;meter min="100" max="250" value="180"&gt;180 degrés&lt;/meter&gt;.
&lt;/p&gt;
</pre>

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

<p>{{EmbedLiveSample("Exemple_simple", 300, 60)}}</p>

<h3 id="Utilisation_de_high_et_low">Utilisation de <code>high</code> et <code>low</code></h3>

<p>On remarquera ici que l'attribut <code>min</code> est absent (ce qui est autorisé), la valeur minimale sera alors 0.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;p&gt;
  Il a eu
  &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt;
  à son examen.
&lt;/p&gt;
</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample("Utilisation_de_high_et_low", 300, 60)}}</p>
<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu étiquetable</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Contenu autorisé</dfn></th>
   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ne possédant pas d'élément <code>&lt;meter&gt;</code> parmi ses descendants.</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Omission de balises</dfn></th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row"><dfn>Parents autorisés</dfn></th>
   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">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("HTMLMeterElement")}}</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', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

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

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

<ul>
 <li>{{HTMLElement("progress")}}</li>
</ul>