What are <progress> and <meter> tags in HTML5 ?
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.
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.
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.
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.
Note: If we do not specify the value attribute of the <meter> tag then it will display an empty meter.
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- 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.