Mastering HTML Scalar Measurement

Introduction

The HTML <meter> tag is used to display a scalar measurement within a known range. It can represent fractional values as well as scalar values.

In this lab, you will learn how to use the <meter> tag in HTML with its syntax and attributes. You will also see a basic example to illustrate the functionality of the <meter> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70798{{"`HTML Scalar Measurement`"}} html/head_elems -.-> lab-70798{{"`HTML Scalar Measurement`"}} html/forms -.-> lab-70798{{"`HTML Scalar Measurement`"}} end

Set up the HTML file

In this step, create an HTML file called index.html and add the basic HTML structure.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body></body>
</html>

Add the `<meter>` tag to the HTML file

In this step, add the <meter> tag to the HTML file with its value, max, and min attributes.

<meter value="50" min="0" max="100"></meter>

Add a label for the `<meter>` tag

In this step, add a label for the <meter> tag to provide better accessibility.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100"></meter>

Add a low range to the `<meter>` tag

In this step, add the low attribute to specify the range that must be considered as low value.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30"></meter>

Add a high range to the `<meter>` tag

In this step, add the high attribute to specify the range that must be considered as high value.

<label for="meter">My Meter:</label>
<meter id="meter" value="50" min="0" max="100" low="30" high="80"></meter>

Add an optimum value to the `<meter>` tag

In this step, add the optimum attribute to set the optimal value of the gauge.

<label for="meter">My Meter:</label>
<meter
  id="meter"
  value="50"
  min="0"
  max="100"
  low="30"
  high="80"
  optimum="50"
></meter>

Wrap up the HTML file

In this step, wrap up the HTML file by adding a closing tag for the <body> and <html> tags.

<!doctype html>
<html>
  <head>
    <title>HTML Meter Tag Lab</title>
  </head>
  <body>
    <label for="meter">My Meter:</label>
    <meter
      id="meter"
      value="50"
      min="0"
      max="100"
      low="30"
      high="80"
      optimum="50"
    ></meter>
  </body>
</html>

Summary

In this lab, you learned how to use the HTML <meter> tag to display scalar measurements within a known range. You saw how to add the <meter> tag to an HTML file and use its attributes to specify the range of values that should be considered low, high, and optimum. You also added a label to the <meter> tag for better accessibility. Now you can use the <meter> tag to display scalar measurements in your HTML documents.

HTML Scalar Measurement

Introduction

Skills Graph

Set up the HTML file

Add the <meter> tag to the HTML file

Add a label for the <meter> tag

Add a low range to the <meter> tag

Add a high range to the <meter> tag

Add an optimum value to the <meter> tag