HTML <meter> Tag
In this blog you will learn about HTML <meter> Tag.
The HTML <meter> Tag is used to measure data within a given range. It defines a scalar measure with range. It is also known as a gauge.
It should be used to display disk usage, polling the population, etc.
The HTML meter tag is new in HTML5 so you should use a new browser.
Example1:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Meter Tag</title>
</head>
<body>
<h1>This is HTML Meter Tag</h1>
<meter value="80" min="1" max="100"> </meter><br>
<meter value="0.2"> </meter>
</body>
</html>
Output:-
Example2:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Meter Tag</title>
</head>
<body>
<h1>This is HTML Meter Tag</h1>
<meter value="80" min="1" max="100" style="height: 50px;width: 250px; "> </meter><br>
<meter value="0.2" style="height: 50px;width: 250px; "> </meter>
</body>
</html>
Output:-
HTML Progress Tag
HTML <progress> Tag
HTML <progress> Tag is used to display the progress of a task. It provides an easy way for web developers to create a progress bar on the website. It is mostly used to show the progress of the file being uploaded on the web page.
HTML <progress> Tag is new in HTML5 so you should use new browser.
Note:- <progress> Tag should only be used to represent the progress of a task, not just a gauge (disk speed usage). For such purpose you are used <meter> Tag.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML progress tag</title>
</head>
<body>
<h1>This is HTML progress Tag Example</h1>
<progress></progress>
<progress value="43" max="100"></progress>
</body>
</html>
Output:-