Graphics & VisualsS2C Home « Graphics & Visuals

In this advanced HTML lesson we learn about the <canvas>, <meter> and <progress> tags that were introduced in HTML5.

The Canvas Element

The <canvas> tag and its' closing </canvas> tag are used for creating graphics dynamically in a HTML document using a scripting language such as JavaScript.

The Meter Element

The <meter> tag and its' closing </meter> tag are used to define a scalar measurement with a finite range, or a fractional value; also known as a gauge.

The Progress Element

The <progress> tag and its' closing </progress> tag are used to define a progress bar representing task progress, from commencement through to completion.

Canvas Example


<canvas width="200" height="200">The canvas tag is not supported in your browser!</canvas>
<script>
  const canvas = document.querySelector('canvas'); 
  const ctx = canvas.getContext('2d'); 
  ctx.fillStyle = 'blue'; 
  ctx.fillRect(20, 20, 100, 100);
</script>
The canvas tag is not supported in your browser!

In the example above we are drawing a blue rectangle using some JavaScript.

Alternative text should be provided within the <canvas> element as fallback content and to aid accessibility; this will be rendered within browsers where JavaScript is disabled and also on older browsers not supporting the<canvas> element.

Meter Examples


<label for="volume">Volume</label>
<meter id="volume" value="10" optimum="50" low="20" high="80" min="1" max="100">10%</meter>
<p><label for="fuel_level">Fuel Gauge</label>
<meter id="fuel_level" value="75" low="20" high="80" min="1" max="100">75</meter></p>
<label for="capacity">Seating Capacity</label>
<meter id="capacity" value="126" min="0" max="235" optimum="235">25</meter>
10%

75

25

In the examples above we show three different meters using various attrributes of the <meter> tag.

Use the <label> HTML tag to give the meter/gauge a description and to aid accessibility.

Progress Examples


<p>Predictive progress bar</p>
<label for="quiz">HTML quiz: </label>
<progress id="quiz" value="50" max="100">50</progress>
<p>Unpredictive progress bar</p>
<label for="movie">Movie download: </label>
<progress id="movie" max="100">5</progress>

Predictive progress bar

50

Unpredictive progress bar

5

In the examples above we show two progress bars using various attrributes of the <progress> tag.

Use the <label> HTML tag to give the progress bar a description and to aid accessibility.

Lesson 5 Complete

Play around with the examples in your own HTML editor and add additional attributes to see the results.

Related Tutorials/Quizzes

Graphics & Visuals Quiz

What's Next?

n the next lesson we look at embedding objects into out HTML documents.

HTML5 Reference

The <canvas> canvas tag

The <meter> meter tag

The <progress> progress tag

HTML and CSS Tutorials