Чем тег <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/> в таком виде, то получим динамическое (плавающее в реальном времени значение тега. Прим. автора.)