What are <progress> and <meter> tags in HTML5 ?
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:
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