- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - high Attribute
HTML high attribute is used mention a value which is consider as high value of the meter element. It displayed differently when value exceed high limit.
This attribute value must be less than the maximum value (max attribute) and also greater than the min and low values (min attribute, low attribute). If it is not specified within the meter element or its value is greater than the max value (max attribute), then the high attribute value will be equal to the max value.
Syntax
<meter high= "number"></meter>
Applies On
Below listed elements allow using of the HTML high attribute
Element | Description |
---|---|
<meter> | HTML <meter> tag is used to render data within the given range. |
Examples of HTML high Attribute
Below examples will illustrate the HTML high attribute, where and how we should use this attribute!
Define high value on meter
In the following example we will create a meter element where we will set the high value at 80.
<!DOCTYPE html> <html lang="en"> <body> <h3>HTML high Attribute</h3> <label for="server-load">Room 1: Server Load</label> <meter id="server-load" value="96" min="0" max="100" low="50" high="90" optimum="0.5"> </meter> </body> </html>
Color of meter tag Depends on value & high
In the following example, we are using the high attribute with the meter tag. In the output if the value of 'value' attribute is between high and low, then result bar will be green.
<!DOCTYPE html> <html lang="en"> <body> <h3>HTML high Attribute</h3> <label for="server-load">Room 1: Server Load</label> <meter id="server-load" value="0.7" min="0" max="1" low="0.3" high="0.8" optimum="0.5"> </meter> <br> <label for="server-load">Room 2: Server Load</label> <meter id="server-load" value="0.9" min="0" max="1" low="0.3" high="0.8" optimum="0.5"> </meter> <br> <label for="server-load">Room 3: Server Load</label> <meter id="server-load" value="0.1" min="0" max="1" low="0.3" high="0.8" optimum="0.5"> </meter> </body> </html>
Manipulating value of meter Element based on high Value.
Considering the another scenario, where we are going to run the script the along with the high attribute. Here user can dynamically increase value to meet target.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML 'high' attribute</title> </head> <body> <!--HTML 'high' attribute--> <p>Example of the HTML 'high' attribute</p> <fieldset> <legend>Meter-high</legend> <label for="">Rahul's Work Load</label> <meter high="70" low="45" min="0" max="100" value="70" id='rahul'> </meter> <br><br> <span id='res'>Average Workload</span> <br><br> <button onclick="Increase()">Add Tasks</button> <p>Add more tasks</p> </fieldset> <script> function Increase() { var h = document.getElementById('rahul'); var work = h.value; h.value = 90; var res = document.getElementById('res'); res.innerHTML = "Your workload has increased from " + work + " to " + h.value; } </script> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
high | Yes 8.0 | No | Yes 6.0 | Yes 6.0 | Yes 11.0 |
To Continue Learning Please Login
Login with Google