Чем тег <meter> отличается от тега <progress>
<span style="background: #ff00ff;"> <meter min="0" max="100" low="20" optimum="10" high="80" value="15"></meter></span><br>
<progress max="100" value="25"></progress>
Тег <meter> используется для показа числа в заданном диапазоне. Статическое значение.
Тег <progress> выводит информацию о степени завершения происходящего процесса. Значение min по умолчанию равно нулю и не меняется. Изменяется с помощью javascript.
Пример использования:
<meter> может показать уровень тепла воды для полива цветов:
<span style="background: #ff00ff;"><meter min="0" max="60" low="30" optimum="10" high="40" value="25"></meter></span><br>
low и hight делят весь диапазон от 0°C до 60°C (градусов цельсия) на три отрезка:
min - low = 0/30 °C
low - hight = 30/40 °C
hight - max = 40/60 °C
Если optium попадает в первый отрезок, то он будет зеленым, второй желтым, а третий красным. (В приведенном примере. В других вариантах и комбинациях последовательность цветов будет другая)
Небольшое интересное дополнение. Если в браузере прописать тег <progress/> в таком виде, то получим динамическое (плавающее в реальном времени значение тега. Прим. автора.)