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

<h2 id="Sumari">Sumari</h2>

<p>L'<strong>Element HTML <code>&lt;meter&gt;</code></strong> representa un valor escalar dins d'un rang conegut o un valor fraccionari.</p>

<div class="note">Llevat que l'atribut <code>value</code> està entre <code>0</code> i <code>1</code> (inclosos), els atributs <code>min</code> i <code>max</code> haurien de definir el rang de manera que el valor de l'atribut <code>value</code> estigui dins d'ell.</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, contingut etiquetable, content, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Phrasing_content">Phrasing content</a>, però no ha d'haver cap element <code>&lt;meter&gt;</code> entre els seus descendents.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">
    <p>Interfície DOM</p>

    <p> </p>
   </th>
   <td>{{domxref("HTMLMeterElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>El valor numèric actual. Això ha d'estar entre els valors màxim  i mínim (atribut <code>min</code> i atribut <code>max</code>) si s'especifiquen. Si no s'especificat o és incorrecte, el valor és 0. Si s'especifica, però no dins del rang donat per l'atribut <code>min</code> i l'atribut <code>max</code>, el valor és igual a l'extrem més proper del rang.</dd>
 <dt>{{htmlattrdef("min")}}</dt>
 <dd>El límit numèric inferior del rang mesurat. Aquest ha de ser menor que el valor màxim (atribut <code>max</code>), si s'especifica. Si no s'especifica, el valor mínim és 0.</dd>
 <dt>{{htmlattrdef("max")}}</dt>
 <dd>El límit numèric superior del rang mesurat. Aquest ha de ser major que el valor mínim (atribut <code>min</code>), si s'especifica. Si no s'especifica, el valor mínim és 1.</dd>
 <dt>{{htmlattrdef("low")}}</dt>
 <dd>El límit numèric superior de l'extrem inferior del rang de mesurat. Aquest ha de ser més gran que el valor mínim (atribut <code>min</code>), i també ha de ser menor que el valor alt i valor màxim (l'atribut <code>high</code>  i l'atribut <code>max</code>, respectivament), si s'especifica algun. Si no s'especifica, o si és menor que el valor mínim, el valor <code>low</code> és igual al valor mínim.</dd>
 <dt>{{htmlattrdef("high")}}</dt>
 <dd>El límit numèric inferior de l'extrem superior del rang de mesurat. Aquest ha de ser més petit que el valor màxim (atribut <code>max</code>), i també ha de ser més gran que el valor baix i valor mínim (l'atribut <code>low</code>  i l'atribut <code>min</code>, respectivament), si s'especifica algun. Si no s'especifica, o si és més gran que el valor màxim, el valor <code>high</code> és igual al valor màxim.</dd>
 <dt>{{htmlattrdef("optimum")}}</dt>
 <dd>Aquest atribut indica el valor numèric òptim. Ha d'estar dins del rang (definit per l'atribut <code>min</code> i l'atribut <code>max</code>). Quan s'usa amb l'atribut <code>low</code> i l'atribut <code>high</code>, es dóna una indicació d'on al llarg del rang es considera preferible. Per exemple, si està entre l'atribut <code>min</code> i l'atribut <code>low</code>, llavors el rang inferior es considera preferit.</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>Aquest atribut associa l'element amb un element <code>form</code> que té la propietat de l'element <code>meter</code>. Per exemple, un <code>meter</code> podria estar mostrant un rang corresponent a un element <code>input</code> de <code>type</code> <em>numèric</em>. Aquest atribut s'utilitza únicament si l'element <code>meter</code> està sent utilitzat com un element de formulari associat; fins i tot llavors, pot ser omès si l'element apareix com un descendent d'un element <code>form</code>.</dd>
</dl>

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

<h3 id="Exemple_senzill"><span class="short_text" id="result_box" lang="ca"><span>Exemple</span> <span>senzill</span></span></h3>

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

<pre class="brush: html">&lt;p&gt;Heat the oven to &lt;meter min="200" max="500" value="350"&gt;350 degrees&lt;/meter&gt;.&lt;/p&gt;
</pre>

<h4 id="Sortida">Sortida</h4>

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

<p>  <span id="result_box" lang="ca"><span>A Google</span> <span>Chrome</span><span>, el mesurador</span> <span>resultant</span> <span>s'assembla a</span> <span>això</span><span>:</span></span></p>

<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>

<h3 id="Exemple_de_rang_High_i_Low">Exemple de rang High i Low</h3>

<p><span id="result_box" lang="ca"><span>Tingueu</span> <span>en compte que en</span> <span>aquest exemple</span> <span>no s'inclou l'atribut</span> <strong><span>min</span></strong><span>;</span> <span>això està</span> <span>permès,</span> <span>ja que el valor</span> <span>de</span> <span>0</span></span></p>

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

<pre class="brush: html">&lt;p&gt;He got a &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt; on the exam.&lt;/p&gt;
</pre>

<h4 id="Sortida_2">Sortida</h4>

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

<p><span id="result_box" lang="ca"><span>A Google</span> <span>Chrome</span><span>, el mesurador</span> <span>resultant</span> <span>s'assembla a</span> <span>això</span><span>:</span></span></p>

<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.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>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>6.0</td>
   <td>{{CompatGeckoDesktop("16.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>20<sup>[1]</sup></td>
   <td>11.0</td>
   <td>5.2</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Edge Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("16.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>20<sup>[1]</sup></td>
   <td>11.0</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Veure la <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/meterelement">Pàgina Estat de la Plataforma de Microsoft Edge</a>.</p>

<h2 id="Veure">Veure</h2>

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