Spread the love

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:-



Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *