 |
| HTML-METER-TAG |
<meter> Tag in HTML5
Introduction of <meter> tag
Syntax of <meter> tag
Attributes of <meter> tag
Introduction of <meter> Tag in HTML5
HTML5's <meter> tag is used to represent or indicate a measurement in a known range. A Known range is called a range that has a minimum value and is a maximum value.
For example, a known range is 0 to 100. You can use the <meter> tag to graphically represent any number of this range. When you use the <meter> tag, a widget is created in the webpage. This widget is like a progress bar which indicates that number in the range.
The <meter> tag should never be used to represent progress like progress bars. You must use the <progress> tag to create a progress bar on the webpage.
The <meter> tag is used to represent the reuse of disk usage or relevancy of the search result query. Any such situation in which there is a maximum value and a minimum value among these you have to represent a measurement then you use <meter> tag.
For example, there is a minimum value of a river's bust which is considered normal. Similarly, there is a maximum value which is considered as dangerous because it indicates the condition of the flood. With the <meter> tag you can show the current status of the river.
One interesting thing about <meter> tag is that with this tag you can also represent fractional values. This increases the more accuracy of data.
Syntax of HTML5 <meter> Tag
The syntax of the <meter> tag is given below.
<meter> Text here </ meter>
in this way, if you are using <meter> tag, the widget will be created, but it will not display any kind of value. You use attributes to represent values. In this tutorial, you can also learn more details about the attributes of the <meter> tag. You can also write text between the opening and closing tags but this text does not show on the webpage.
Attributes of HTML5 <meter> Tag
The attributes of the <meter> tag are as below.
Value
With Value attribute, you can define the value that you want to represent.
In the above example, the value attribute is defined as value .2. When you do not define the value of min and max attributes (range), you represent the value of value attribute by 0 to 1 fractional number. This script generates the given output as below.
 |
| METER-TAG-VALUE-ATTRIBUTE |
Min
By this attribute, you define the range of the minimum value. If the min attribute has not been defined, then the range of minimum value is assumed to be 0.
In the above example, the value of min is defined as 0. But without the maximum value, the range can be defined. The value attribute is defined from 0 to 1. This script generates the output as below.
 |
| METER-TAG-MIN-ATTRIBUTE |
Max
The maximum value of the range is defined by this attribute. If no maximum value is defined, the maximum value is considered 1.
In this example, a range is defined by min and max attributes so any value between 0 and 100 can be represented. This script generates the given output as below.
 |
| METER-TAG-MAX-ATTRIBUTE |
Low
This attribute is used to define the lower value part of the range. When the value attribute is less than the value of the lower attribute, the widget's color changes, which indicates that the value is lower than the lowest value.
In the above example, the value attribute is less than the value of the lower attribute. Therefore, the color of the widget is changed. This script generates the output as below.
 |
| METER-TAG-LOW-ATTRIBUTE |
High
By this attribute, you define the range of high-value part. When the value of the value attribute is greater than the value of the high attribute then the widget's color becomes change, which indicates that the value is greater than the highest value.
optimum
This is the optimum value. This is an ideal value. The optimum attribute value is between the min and max values. With this attribute, you can define the ideal value in the whole range.
This example produces the output below.
 |
| METER-TAG-OPTIMUM-ATTRIBUTE |
form
By this attribute, you can define the name of the form which is related to <meter> tag. <meter> tag supports all global attributes and event attributes.
Previous:- How to use time tag in html5?
Next:- How to use section tag in html5?
Previous:- How to use time tag in html5?
Next:- How to use section tag in html5?
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.