• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

HTML5 Meter Tag

March 15, 2014 //  by Krishna Srinivasan//  Leave a Comment

The <meter> tag is used to represent the scalar value within the given range. It is used to measure the maximum and minimum range of the scalar value. The range is been written between the start and end tag of <meter> tag. There is another element called <progress> tag which gives us completion rate ⁄ degree of progress. It is different from <meter> tag in the sense that it is used to mark up the completion rate ⁄ degree of progress of an “in progress” task through a progress bar. Whereas <meter> tag is used to represent a gauge. We can think like progress tag represents dynamic data whereas meter represents static data. It is an inline element where it can be used within another element like header or paragraph.

Syntax of Meter Tag

<meter> Known range </meter>

Attributes of <meter> Tag

  • value : This attribute specifies the value of the measured range.
  • min : This attribute specifies the lower value of range. The default value is 0.
  • low : This attribute specifies the lower value of the range.
  • max : This attribute specifies the upper value of the range. The default value is 1.
  • optimum : This attribute represents the optimum value and this value is between min and max.

HTML5 Meter Tag Example

Let us see some examples below on how to use the <meter> tag:

No value

<!DOCTYPE html>
<html>
<body>
   <b>Meter with No Value</b>
   <meter></meter><br><br>
   <b>Meter with Value</b>
   <meter value="0.1"></meter><br><br>
   <b>Meter with Min Max attributes</b>
   <meter value="0.9" min="0.5" max="1"></meter><br><br>
   <b>Meter with optimum attribute</b>
   <meter value="0.5" min=".05" max="1" optimum=".20"></meter><br><br>
   <b>Meter with high less than value attribute</b>
   <meter value="0.9" high="0.6"></meter><br><br>
</body>
</html>

This above example shows you different scenarios of using the <meter> tag. The titles in bold are self explanatory.

Example Application Test

  • Save the file as meter_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :
HTML5 Meter Tag

Category: HTMLTag: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Fibonacci Number Generation in Java
Next Post: HTML5 Output Tag »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact