Figures, Dates, Highlights and Progress Bars

Use the small, meaningful HTML elements that make content richer: figure and figcaption for captioned media, time for dates, mark for highlights, and progress and meter for bars.

Lesson 31 of 44Intermediate15 min read

Beyond headings, paragraphs and lists, HTML has a set of small elements that each describe one specific kind of content. They take seconds to learn, they make pages clearer for every reader, and they give browsers, search engines and assistive technology information that plain <div> and <span> elements can't.

In this lesson you'll learn <figure> and <figcaption> for images, charts and code with a caption, <time> for machine-readable dates and times, <mark> for highlighted text such as search matches, and two bar elements that are easy to confuse: <progress> for how far through a task you are, and <meter> for a measurement within a known range.

Each of these works without any CSS or JavaScript, and each can be styled to match your design. Used well, they turn ordinary pages into pages that communicate exactly what they mean.

figure and figcaption

HTML
<figure>
  <img src="chart.png" alt="Bar chart of monthly sales, rising from 120 in January to 310 in June">
  <figcaption>Figure 1: Sales doubled in the first half of the year.</figcaption>
</figure>
  • <figure> wraps self-contained content that's referred to from the main text: images, diagrams, charts, code listings, quotes or videos.
  • <figcaption> is the visible caption, placed first or last inside the figure.
  • The caption doesn't replace the image's alt text: alt describes the image; the caption adds context.

time and mark

  • <time datetime="2026-03-14">14 March 2026</time>: the visible text can be written any way you like, while datetime holds a standard, machine-readable value.
  • Formats include a date (2026-03-14), a time (19:30), both (2026-03-14T19:30), with a time zone (2026-03-14T19:30Z), or a duration (PT2H30M for 2 hours 30 minutes).
  • Search engines, calendars and browser extensions can read datetime, which helps with events and article dates.
  • <mark> highlights text that's relevant in the current context, such as the words someone searched for. Browsers show it with a yellow background by default.

progress and meter

ElementShowsExample
<progress value="70" max="100">Completion of a taskUpload 70% done
<progress> with no valueA task with unknown lengthLoading spinner style bar
<meter value="0.8">A measurement in a rangeDisk 80% full
<meter low high optimum>Changes colour by zoneBattery low or good

Always put a text version between the tags or in a label, such as 70%, for older browsers and screen readers.

HTML Figure and Time Syntax

Element syntax

<figure>
  <img src="photo.jpg" alt="Description">
  <figcaption>Caption text</figcaption>
</figure>
<p>Published <time datetime="2026-03-14">14 March</time></p>
<p>Results for <mark>lamp</mark></p>
<progress value="40" max="100">40%</progress>
<meter value="7" min="0" max="10">7 out of 10</meter>

HTML Figure and Time Summary

  • <figure> with <figcaption> groups media or code with a visible caption.
  • <time datetime="..."> gives dates and times a machine-readable value.
  • <mark> highlights relevant text, such as search matches.
  • <progress> shows task completion; without value it shows an indeterminate bar.
  • <meter> shows a measurement in a known range, with optional low, high and optimum zones.

HTML Figure and Time Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A captioned photo and code listing

<figure>
  <img src="https://picsum.photos/seed/lake/320/180" alt="A calm lake surrounded by pine trees" width="320" height="180">
  <figcaption>Lake Bled at sunrise, our favourite stop on the trip.</figcaption>
</figure>
<figure>
  <figcaption>Listing 1: a greeting function</figcaption>
  <pre><code>function greet(name) {
  return "Hi " + name;
}</code></pre>
</figure>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 1 to 4The figure groups the photo with its caption.
  2. Line 2alt describes the image; the caption adds information around it.
  3. Line 6A caption can also come first, before a code listing.
Example 2

Dates in an article and search highlights

<article>
  <h2>Spring opening hours</h2>
  <p>Posted on <time datetime="2026-03-14">Saturday 14 March</time>.</p>
  <p>From <time datetime="2026-03-21">21 March</time> we open at <time datetime="08:30">8:30am</time>.</p>
  <p>The workshop lasts <time datetime="PT1H30M">an hour and a half</time>.</p>
</article>
<p>Search results for "desk": the <mark>desk</mark> lamp, the standing <mark>desk</mark>.</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3Friendly visible text, precise datetime value.
  2. Line 4datetime can hold just a time.
  3. Line 5Durations start with P; T separates the time part.
  4. Line 7<mark> highlights the searched word.
Example 3

Progress and meter bars

<p><label for="up">Uploading photos:</label>
  <progress id="up" value="65" max="100">65%</progress> 65%</p>

<p>Loading messages: <progress aria-label="Loading">Loading</progress></p>

<p><label for="disk">Storage used:</label>
  <meter id="disk" value="0.92" min="0" max="1" low="0.5" high="0.85" optimum="0.2">92%</meter> 92%</p>

<p><label for="score">Your score:</label>
  <meter id="score" value="8" min="0" max="10" low="4" high="7" optimum="10">8 out of 10</meter></p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2A determinate progress bar, 65 out of 100.
  2. Line 4With no value, the bar shows activity without a known end.
  3. Line 7Storage above the high mark, far from the optimum, so browsers show it in a warning colour.
  4. Line 10Here high values are good, because the optimum is the maximum.

Common HTML Figure and Time Mistakes

Using progress for a measurement

Don't
<progress value="80" max="100">Disk 80% full</progress>
Do
<meter value="80" max="100">Disk 80% full</meter>

A full disk isn't a task in progress; it's a measurement.

A time element with an invalid datetime

Don't
<time datetime="14/03/2026">14 March</time>
Do
<time datetime="2026-03-14">14 March</time>

datetime must use the standard year-month-day format.

Using mark just for decoration

Don't
<p><mark>Welcome to our website!</mark></p>
Do
<p class="intro">Welcome to our website!</p>

<mark> means "relevant here"; for a design highlight, use CSS.

HTML Figure and Time in Real Projects

Where these appear

News and blog articles mark up publish dates with <time>, and search engines use them in results. Documentation uses <figure> for diagrams and code listings. Upload forms and installers show <progress>, password strength indicators and storage dashboards use <meter>, and site search pages highlight matches with <mark>.

HTML Figure and Time Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the caption element inside the figure.

<figure>
  <img src="map.png" alt="Map of the route">
  <>Our walking route</>
</figure>
Multiple choiceeasy

Which element highlights search matches?

Multiple choicemedium

Which datetime value is valid for 5 June 2026?

Multiple choicemedium

Which element suits a phone battery level?

Fix the bugmedium

Fix the markup: the caption should be a figcaption inside the figure, and the date needs a valid datetime of 2026-09-01.

<figure>
  <img src="team.jpg" alt="Our team at the summer party" width="200" height="120">
</figure>
<p class="caption">The team in summer.</p>
<p>Updated <time datetime="1 Sept">1 September</time></p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The caption is a figcaption inside the figure
  • The time has a valid datetime

HTML Figure and Time Quiz

5 questions to check what you learned.

  1. What does figure usually contain?

    • Only text paragraphs
    • Self-contained content such as an image, chart or code listing, often with a caption
    • Navigation links
    • Form fields

  2. What does a progress element with no value attribute show?

    • An indeterminate bar for a task of unknown length
    • An empty bar
    • A full bar
    • Nothing

  3. What does the datetime attribute provide?

    • The visible text
    • A countdown
    • A time zone converter
    • A machine-readable version of the date or time

  4. Does figcaption replace an image's alt text?

    • No, alt describes the image while the caption adds context
    • Yes
    • Only for charts
    • Only on mobile

  5. What do the low, high and optimum attributes of meter control?

    • The bar's size
    • Animation speed
    • Which ranges count as good or bad, which changes the colour browsers use
    • Accessibility labels

HTML Figure and Time Challenge

An article footer

Build:

  1. A <figure> with an <img> (with alt) and a <figcaption>
  2. A paragraph with a <time> whose datetime is 2026-04-02
  3. A <progress> with value="3" and max="5" showing reading progress
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Figure with an image and caption
  • time datetime is 2026-04-02
  • progress is 3 of 5

Related HTML topics

26Semantic ElementsStructure pages with elements that describe what each part is.15ImagesAdd pictures with img, write great alt text and keep pages fast.09Quotes & CitationsMark up quotes, sources, abbreviations and contact details with the right HTML elements so browsers, search engines and screen readers understand them.
Esc
↑↓ to navigateEnter to open