Progress & Meter Elements — Free HTML Tutorial

Learn Progress & Meter Elements in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

✓ 100% Free ✓ No Login Needed ✓ NCERT / CBSE Aligned ✓ Download as PDF

TL;DR: Learn Progress & Meter Elements in HTML with a free, beginner-friendly tutorial, examples and practice for Indian students on Syllab.in.

Written & reviewed by the Syllab.in Academic Team (CBSE/NCERT subject experts) · Updated Sep 17, 2026

🤖 Stuck on any question? Ask Syllab's free AI Tutor for a step-by-step explanation — instant, unlimited, no login.

Progress & Meter Elements in HTML

<progress> shows task progress: 0-100%. Attributes: value (current), max (total). Example: <progress value="70" max="100"></progress>.

<meter> shows a scalar measurement (0-100%): volume, disk usage, temperature. Attributes: value, min, max, low, high, optimum.

Use CSS to style both. Both are accessible without JavaScript.

Progress & Meter Elements — Syntax

<progress value="70" max="100"></progress>  <!-- 70% complete -->
<meter value="7" min="0" max="10">7/10</meter>  <!-- Rating -->

Learn Progress & Meter Elements step by step with Syllab's free interactive HTML tutorial — runnable code examples, practice exercises and instant AI feedback, all free with no signup. Explore the full HTML course →