Semantic Text Elements

Use <figure>, <figcaption>, <time>, <address>, and <pre> for meaningful text content.

Overview

HTML5 provides several semantic elements for specific types of text content: - <figure> + <figcaption>: a self-contained unit of content (image, code, chart) with an optional caption - <time>: machine-readable dates and times - <address>: contact information for the nearest <article> or <body> - <pre>: preformatted text that preserves whitespace and line breaks - <blockquote> + <cite>: extended quotations and their source - <q>: short inline quotations - <kbd>: keyboard input - <samp>: computer output

Key Points

•<figure> wraps an image, code block, or diagram with its <figcaption>
•<figcaption> must be the first or last child of <figure>
•<time datetime="YYYY-MM-DD"> makes dates machine-readable for SEO and calendars
•<address> is for contact info only not generic addresses like postal addresses on a storefront
•<pre> preserves all whitespace perfect for code, poetry, ASCII art
•<blockquote cite="url"> for multi-line quotes; <q> for short inline quotes

Examples

Figure with figcaption

<figure>
  <img src="chart.png" alt="Monthly revenue chart for 2024">
  <figcaption>Figure 1: Monthly revenue grew 40% in Q3 2024.</figcaption>
</figure>

<!-- Also works for code -->
<figure>
  <pre><code>const greet = name => `Hello, ${name}!`;</code></pre>
  <figcaption>Example: an arrow function greeting.</figcaption>
</figure>

<time> for machine-readable dates

<p>Published on <time datetime="2024-06-01">June 1, 2024</time></p>
<p>The event starts at <time datetime="2024-07-15T14:00">2 PM on July 15</time></p>

The datetime attribute uses ISO 8601 format. Screen readers, search engines, and calendars use it.

Blockquote, address, and pre

<blockquote cite="https://example.com/source">
  <p>The only way to do great work is to love what you do.</p>
  <footer> <cite>Steve Jobs</cite></footer>
</blockquote>

<address>
  <a href="mailto:contact@example.com">contact@example.com</a>
</address>

<pre>
  This text
    preserves
      all spaces
        and newlines.
</pre>

Common Mistakes

Using <address> for postal addresses in general it's for author/article contact info
Forgetting the datetime attribute on <time> the human-readable text alone loses machine readability
Using <pre> for layout instead of for preformatted textual content

Note

Use <time> for any date or time in your content search engines use it for rich results (event dates, article publication dates in search snippets).

Semantic Text Elements

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the purpose of the datetime attribute on <time>?