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