new repository

1 files changed, 198 insertions, 0 deletions

diff --git a/devdocs/html/element%2Fmeter.html b/devdocs/html/element%2Fmeter.html
new file mode 100644
index 00000000..74d5fe58
--- /dev/null
+++ b/devdocs/html/element%2Fmeter.html
@@ -0,0 +1,198 @@
+<header><h1>&lt;meter&gt;: The HTML Meter element</h1></header><div class="section-content"><p>The <code>&lt;meter&gt;</code> <a href="../index">HTML</a> element represents either a scalar value within a known range or a fractional value.</p></div>
+<h2 id="try_it">Try it</h2>
+<div class="section-content">
+<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/meter.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, labelable content, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#phrasing_content">Phrasing content</a>, but there must be no <code>&lt;meter&gt;</code> element among its descendants. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/structural_roles#structural_roles_with_html_equivalents">meter</a></code></td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>No <code>role</code> permitted</td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></td> </tr> </tbody> </table></div></figure>
+</div>
+<h2 id="attributes">Attributes</h2>
+<div class="section-content">
+<p>This element includes the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="value"><a href="#value"><code>value</code></a></dt> <dd> <p>The current numeric value. This must be between the minimum and maximum values (<code>min</code> attribute and <code>max</code> attribute) if they are specified. If unspecified or malformed, the value is <code>0</code>. If specified, but not within the range given by the <code>min</code> attribute and <code>max</code> attribute, the value is equal to the nearest end of the range.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Unless the <code>value</code> attribute is between <code>0</code> and <code>1</code> (inclusive), the <code>min</code> and <code>max</code> attributes should define the range so that the <code>value</code> attribute's value is within it.</p> </div> </dd> <dt id="min"><a href="#min"><code>min</code></a></dt> <dd> <p>The lower numeric bound of the measured range. This must be less than the maximum value (<code>max</code> attribute), if specified. If unspecified, the minimum value is <code>0</code>.</p> </dd> <dt id="max"><a href="#max"><code>max</code></a></dt> <dd> <p>The upper numeric bound of the measured range. This must be greater than the minimum value (<code>min</code> attribute), if specified. If unspecified, the maximum value is <code>1</code>.</p> </dd> <dt id="low"><a href="#low"><code>low</code></a></dt> <dd> <p>The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (<code>min</code> attribute), and it also must be less than the high value and maximum value (<code>high</code> attribute and <code>max</code> attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the <code>low</code> value is equal to the minimum value.</p> </dd> <dt id="high"><a href="#high"><code>high</code></a></dt> <dd> <p>The lower numeric bound of the high end of the measured range. This must be less than the maximum value (<code>max</code> attribute), and it also must be greater than the low value and minimum value (<code>low</code> attribute and <code>min</code> attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the <code>high</code> value is equal to the maximum value.</p> </dd> <dt id="optimum"><a href="#optimum"><code>optimum</code></a></dt> <dd> <p>This attribute indicates the optimal numeric value. It must be within the range (as defined by the <code>min</code> attribute and <code>max</code> attribute). When used with the <code>low</code> attribute and <code>high</code> attribute, it gives an indication where along the range is considered preferable. For example, if it is between the <code>min</code> attribute and the <code>low</code> attribute, then the lower range is considered preferred. The browser may color the meter's bar differently depending on whether the value is less than or equal to the optimum value.</p> </dd> <dt id="form"><a href="#form"><code>form</code></a></dt> <dd> <p>This optional attribute is used to explicitly set a <a href="form"><code>&lt;form&gt;</code></a> owner for the <code>&lt;meter&gt;</code> element. If omitted, the <code>&lt;meter&gt;</code> is associated with its ancestor <code>&lt;form&gt;</code> element or the form association set by the <code>form</code> attribute on another ancestor element, such as on a <a href="fieldset"><code>&lt;fieldset&gt;</code></a>, if any. If included, the value must be the <a href="../global_attributes/id"><code>id</code></a> of a <code>&lt;form&gt;</code> in the same tree.</p> </dd> </dl>
+</div>
+<h2 id="examples">Examples</h2>
+
+<h3 id="simple_example">Simple example</h3>
+<div class="section-content">
+<h4 id="html">HTML</h4> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="ic/tVZIoOKqzf9hhKRU+V8ra719/91AQQw4/Ku9LKO8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+  Heat the oven to <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meter</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>350<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>350 degrees<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>meter</span><span class="token punctuation">&gt;</span></span>.
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <h4 id="result">Result</h4>
+<div class="code-example" id="sect2">
+
+<iframe class="sample-code-frame" title="Simple example sample" id="frame_simple_example" width="300" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/meter/runner.html?id=simple_example" loading="lazy"></iframe>
+</div> <p>On Google Chrome, the resulting meter looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfgAAABKBAMAAAClc1uGAAAAJ1BMVEXv7+/Ly8sPfBD////q6urj4+P5+fnV1dVJkkTZ2dmWtpJsome5xLjq2SPCAAABl0lEQVR42u3bv07DMBAG8ENKhRgtAeHf5FeghDlCBTFWoO4o8AARE2vfgKl7J2YmZibEU3GJQrCLwxgjf9+NyfSr7TvHvsopcAjxxBNPPPHEE088BL6YrUyy8XRb/YW/r03SkV8O4x9M8rEYwp8ZgLgJ44saAZ9XQXxpIGI3hJ+2rz7f7JghI0Y2e26JFwF8O/Av1iaL17h2h142Bn5s+9h4uXKG3sHf6dNjmzpe5src/4XXVH+yTB8/aRL+Jr6p8R82fbyUfa0Xb9YvEfCTft7/4OcxVnwMfLPq93x8ob/HGgO/rdTKw0/jzPoY+Oy72PX4c2OOLAZedJ/36OE13x2g4Msu44mzt31HwW91O1xxkv0aBb/Tpfser+vgFQWvlf7Qw9dxkn0sfO7hNf1bFHxT64hHxAtHngmPpQ57kwO9vYX+sIH+pIU+zIA+xoI+wMQ5us4CR9fQlxbQ11XYF5XQV9TQzQkIbSmrwbYU6IYk7FY06CZE7PZT7MZj7JZz/tOCeOKJJ5544oknnnjiiSeeeOL/f3wBq/zMPETkfsUAAAAASUVORK5CYII=" alt="A screenshot of the meter element in Google Chrome" width="504" height="74" loading="lazy"> </p>
+</div>
+<h3 id="high_and_low_range_example">High and Low range example</h3>
+<div class="section-content">
+<p>Note that in this example the <a href="#min"><code>min</code></a> attribute is omitted. This is allowed, as it will default to <code>0</code>.</p> <h4 id="html_2">HTML</h4> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="jIuNcu8JP2Is9t87tZGpBrFJgNQ+rzNj1BVdLO/0JiA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
+  He got a <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meter</span> <span class="token attr-name">low</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>69<span class="token punctuation">"</span></span> <span class="token attr-name">high</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>84<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>meter</span><span class="token punctuation">&gt;</span></span> on the exam.
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <h4 id="result_2">Result</h4>
+<div class="code-example" id="sect3">
+
+<iframe class="sample-code-frame" title="High and Low range example sample" id="frame_high_and_low_range_example" width="300" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/meter/runner.html?id=high_and_low_range_example" loading="lazy"></iframe>
+</div> <p>On Google Chrome, the resulting meter looks like this:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfIAAABGBAMAAADFkws0AAAALVBMVEXv7+/Ly8vXOgL////q6urj4+P5+fnV1dXdYUDZ2dnboJHRvbjZRx3eeV7egmmSFlynAAABnElEQVR42u3bPU7DQBAF4EFyhChXAsyPRLFXIJjaQgFRRqD0yHAAi4o2N6BKn4qaClHmCFQch7VjZ23HBpd43pvS3Zddz4x3J3KOGkI55ZRTTjnllFOuRB5NFkZtvNwnnfLH1KiO8LpD/mTUx6xVfmEA4q5FHqUI8jDZlscGIva35OP8+ef3yg45pDuCyWtOvGrK8yV/swMP+TVuq4su1SUfPPwPudxUFr2UP7hHZ1a7XKaOeViXu8R+OtcvH2XpvSbPavmH1S+XeFPTxW/2OYJ8tNnuhXyq4i3vIc/e9IOKPHK/xBJDvuuoiZePlWz2HvKgrGtr+aUxJxZDLq6Te/Zyl+COUORxkeKkbF3fUeQ7RQMrZWpfosj3iuS+lru9/4UidxX92MtTJam9pzz0cpfpVyjyrKzV5JZy7XJpykF3O26Gw61quJ0MbveK+8WC+5WKezKBexqFewKJc+ocNE+dcW8acG+XgG8UcW+RcScHEKZFFu3TIrgTQsBTYbiTgMDTn8ATv8BT3vxPA+WUU0455ZRTTjnllP/L+AFRr1+X/KW5rAAAAABJRU5ErkJggg==" alt="red meter in Google Chrome" width="498" height="70" loading="lazy"> </p>
+</div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element">HTML Standard <br><small># the-meter-element</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<th><code>meter</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>form</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>high</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>low</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>max</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>min</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>optimum</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+<tr>
+<th><code>value</code></th>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-yes">≤18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">6</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">11</td>
+<td class="bc-supports-yes">10.3</td>
+<td class="bc-supports-yes">1.0</td>
+</tr>
+</tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li><a href="progress"><code>&lt;progress&gt;</code></a></li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter</a>
+  </p>
+</div>