can someone help me to understand the difference between the 2 meter and why the colour difference between them although they have the same value ??
<meter low="69" high="80" max="100" value="84">A</meter><span>MDN example</span> <br>
<meter low="30" high="80" max="100" value="84">B</meter></div>
That is because of different low and high values.
Now the meter tag forms three regions:
One from min(0) to low, another from low to high and third from high to max(100).
Default value of optimum is 50. You can set it to whatever value you want. Now in what ever region the optimum lies that is colored green. The neighbour region is colored yellow and the farthest is colored red.
In the first example, default optimum value is 50. If I make low=60 and high=80, then anything between 0 to 60 will be green, between 60 to 80 will be yellow and from 80 to 100 will be red.
In the second example, I have set the optimum=70, keeping the low and high value same. Then anything between 0 to 60 will be yellow, between 60 to 80 will be green and from 80 to 100 will be yellow.
<p>First exmple</p>
<meter low="60" high="80" max="100" value="34">A</meter><br/>
<meter low="60" high="80" max="100" value="65">B</meter><br/>
<meter low="60" high="80" max="100" value="84">C</meter><br/>
<p>Second exmple</p>
<meter low="60" high="80" optimum="70" max="100" value="34">A</meter><br/>
<meter low="60" high="80" optimum="70" max="100" value="65">B</meter><br/>
<meter low="60" high="80" optimum="70" max="100" value="84">C</meter><br/></div>
The color difference is because of the way the meter tag compares the value to the optimum value. The following will make both meters yellow:
<span>MDN example</span><br>
<meter low="69" optimum="80" high="80" max="100" value="84">A</meter><br>
<meter low="30" optimum="40" high="80" max="100" value="84">B</meter>A detailed explanation about this can be found here
</div>