Table of contents

HTML <meter> Tag: Definition, Syntax, and Examples

What is HTML <meter> Tag?

The HTML meter tag is used to represent a measurable value within a specific range. It is commonly used to show values such as disk usage, test scores, fuel level, or progress level where the value is known and falls within a minimum and maximum range.

The meter tag is important because it provides a visual representation of data and helps users understand values quickly. It is mainly used for measurements, performance indicators, ratings, or statistics. The meter tag is placed inside the body section of an HTML document and should be used only when the value is known and measurable.

Syntax of the HTML <meter> Tag

plaintext
<meter value="current_value" min="minimum" max="maximum">Label</meter>

value represents the current reading, min defines the minimum possible value, and max sets the maximum value for the measurement.

Examples of HTML <meter> Tag

Example 1: Basic HTML Meter Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <p>Storage Used:</p>
  <meter value="40" min="0" max="100">40%</meter>

</body>
</html>

In this example, the meter tag shows that 40% of storage is used out of the total available. It gives a clear visual indication of usage.

Example 2: SEO Optimized Meter Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <p>Scholar247 Website Performance Score:</p>
  <meter value="85" min="0" max="100" low="50" high="80" optimum="90">85/100</meter>

</body>
</html>

This example uses performance scoring for Scholar247. It includes additional attributes like low, high, and optimum to define performance levels, which helps search engines understand the context of the score.

Attributes of the HTML <meter> Tag

The main attributes of the meter tag are:

• value: Represents the current numeric value.
• min: Sets the minimum value of the range.
• max: Sets the maximum value of the range.
• low: Defines a range considered as low.
• high: Defines a range that is considered high.
• optimum: Indicates the ideal or preferred value.
• form: Associates the meter with a form.

Best Practices for HTML <meter> Tag

• Use the meter tag only for known values within a range.
• Avoid using it as a progress bar; use the progress tag instead for tasks in progress.
• Include labels or text to explain what the meter value represents.
• Use the low, high, and optimum attributes for accessibility and better interpretation.
• Provide meaningful values to avoid misleading users.

FAQs About the HTML <meter> Tag

Q1: What is the purpose of the HTML meter tag?

The meter tag is used to display a measurable value within a defined range, such as scores, capacity, or performance levels.

Q2: Is the meter tag the same as the progress tag?

No, the meter tag is for known values within a range, while the progress tag is for ongoing processes where completion is not yet known.

Q3: Can I style the meter tag using CSS?

Yes, the meter tag can be styled using CSS to change its color, size, and appearance based on the value or design requirements.

Q4: Can the meter tag be used to show ratings?

Yes, the meter tag can be used to display ratings, scores, or any measurable numeric data within a fixed range.

Q5: Is the meter tag supported on all browsers?

The meter tag is supported by most modern browsers, but some older browsers may show limited styling support.

HTML

Related Articles