Skip to content
Related Articles

Related Articles

Improve Article

What are <progress> and <meter> tags in HTML5 ?

  • Last Updated : 19 Aug, 2021
Geek Week

HTML 5 introduces two new tags namely the <progress> tag and the <meter> tag. In this article, we will discuss both tags.

Progress tag: This tag is used to represent a progress bar on the webpage in order to show the progress of a task. Some uses of the progress bar include showing the file upload/download progress on a website. The progress bar is created using the following syntax.

Syntax:

<progress>....</progress>

Attributes: This tag accepts two attributes as mentioned below.

  • max: It represents the total work is to be done for completing a task.
  • value: It represents the amount of work that is already completed.

 



Example: The progress tag can also be styled using CSS. Let us look at all these attributes and progress bar styling with an example.

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Progress tag</title>
    </head>
    <body>
        <p>Normal Progress bar</p>
        <progress></progress>
        <p>Progress bar with max and value attributes</p>
        <progress value="50" max="200"></progress>
        <p>Progress bar with CSS</p>
        <progress style="width:200px; height:40px;" ></progress>
    </body>
</html>

Output:

Meter Tag: A Meter tag is also known as a gauge and basically defines a scale for the measurement of data within a specified range. The uses of a meter tag may include the fuel left in the tank, the temperature of an object, etc. The meter tag is written as follows.

Syntax:

<meter>....</meter>

Attributes: This tag accepts many attributes which are listed below.

  • form: It defines one or more forms that the meter tag belongs to.
  • max: It is used to specify the maximum value of a range.
  • min: It is used to specify the minimum value of a range.
  • high: It is used to specify the range considered to be a high value.
  • low: It is used to specify the range value that is considered to below.
  • optimum: It is used to specify the optimum value for the range.
  • value: It is used to specify the required or actual value of the range.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Meter tag</title>
    </head>
    <body>
        <p>Normal Meter</p>
        <meter value="0.6"></meter>
        <p>Meter tag with attributes</p>
        <meter value="50" max="200" min="20"></meter>
        <p>Meter tag with CSS</p>
        <meter value="0.4" style="width:200px; height:40px;"></meter>
    </body>
</html>

Output:

Meter tag

Note: If we do not specify the value attribute of the <meter> tag then it will display an empty meter.

Supported Browsers:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Safari
  • Opera
  • Internet Explorer

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :