Тег <meter> в HTML — шкала значення у відомих межах

<h3>Використання тегу <code>meter</code></h3>
<p>Заряд акамулятора:</p>
		<meter value = "10" min = "0" max = "100" low = "20" high = "80" optimum = "90">10 зі 100</meter> <br>
		<meter value = "20" min = "0" max = "100" low = "20" high = "80" optimum = "90">20 зі 100</meter> <br>
		<meter value = "30" min = "0" max = "100" low = "20" high = "80" optimum = "90">30 зі 100</meter> <br>
		<meter value = "40" min = "0" max = "100" low = "20" high = "80" optimum = "90">40 зі 100</meter> <br>
		<meter value = "50" min = "0" max = "100" low = "20" high = "80" optimum = "90">50 зі 100</meter> <br>
		<meter value = "60" min = "0" max = "100" low = "20" high = "80" optimum = "90">60 зі 100</meter> <br>
		<meter value = "70" min = "0" max = "100" low = "20" high = "80" optimum = "90">70 зі 100</meter> <br>
		<meter value = "80" min = "0" max = "100" low = "20" high = "80" optimum = "90">80 зі 100</meter> <br>
		<meter value = "90" min = "0" max = "100" low = "20" high = "80" optimum = "90">90 зі 100</meter> <br>
		<meter value = "100" min = "0" max = "100" low = "20" high = "80" optimum = "90">100 зі 100</meter>

HTML

<h4 class="cap">Зони кольору: low=3, high=7, optimum=9</h4>
<div class="row">
    <p><meter value="1" min="0" max="10" low="3" high="7" optimum="9">1 з 10</meter>
        <span class="lab">value=1 — протилежна зона, червоний</span></p>
    <p><meter value="5" min="0" max="10" low="3" high="7" optimum="9">5 з 10</meter>
        <span class="lab">value=5 — сусідня зона, жовтий</span></p>
    <p><meter value="9" min="0" max="10" low="3" high="7" optimum="9">9 з 10</meter>
        <span class="lab">value=9 — зона optimum, зелений</span></p>
</div>

<h4 class="cap">Той самий проміжок, але optimum=1</h4>
<div class="row">
    <p><meter value="1" min="0" max="10" low="3" high="7" optimum="1">1 з 10</meter>
        <span class="lab">value=1 — тепер це добре, зелений</span></p>
    <p><meter value="9" min="0" max="10" low="3" high="7" optimum="1">9 з 10</meter>
        <span class="lab">value=9 — тепер це погано, червоний</span></p>
</div>

<h4 class="cap">Три класичні поломки</h4>
<div class="row bad">
    <p><meter>60%</meter>
        <span class="lab">значення написали текстом — насправді воно нуль</span></p>
    <p><meter value="6">6</meter>
        <span class="lab">забули max: типовий max=1, тому смуга повна</span></p>
    <p><meter value="0.6" style="width:200px;height:26px;background:#fdeeee">60%</meter>
        <span class="lab">ширина, висота й тло слухаються, а колір
            заповнення — ні</span></p>
</div>

<h4 class="cap">meter проти progress — типові розміри</h4>
<div class="row">
    <p><meter value="6" min="0" max="10">6 з 10</meter>
        <span class="lab">meter, типово 80×16</span></p>
    <p><progress value="6" max="10">6 з 10</progress>
        <span class="lab">progress, типово 162×18</span></p>
</div>

<h4 class="cap">Як має бути</h4>
<p><label>Місце на диску: <meter value="0.82" low="0.3" high="0.75"
    optimum="0.1">82% зайнято</meter></label></p>

CSS

.row {
    max-width: 560px;
    padding: 2px 14px 8px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.row.bad {
    border-color: #d64545;
    background: #fdeeee;
}

.row p {
    margin: 10px 0;
}

.lab {
    margin-left: 10px;
    color: #5a6472;
    font-size: .9em;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

label {
    color: #5a6472;
}