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

Last Updated : 19 Aug, 2021

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>