HTML Text Semantics

Advanced Text Semantics in HTML

Learning Objectives

Use figure and figcaption for self-contained content.
Mark abbreviations, definitions and citations appropriately.
Understand time, address, data and other semantic elements.
Choose elements based on meaning rather than appearance.

1. Figure and Figcaption

<figure>
    <img src="html-diagram.png"
         alt="Diagram showing the head and body of an HTML document"
         width="800"
         height="450">
    <figcaption>
        The basic structure of an HTML document.
    </figcaption>
</figure>

figure represents self-contained content such as an illustration, diagram, code example or other referenced material. figcaption provides its caption.

2. Abbreviations

<p>
    <abbr title="HyperText Markup Language">HTML</abbr>
    structures webpages.
</p>

abbr identifies an abbreviation or acronym. Its title can provide an expansion, but do not assume that every device or user will automatically discover that information.

3. Definitions

<p>
    <dfn>HTML</dfn> is the standard markup language
    used to structure webpages.
</p>

dfn marks the defining instance of a term. Use it when introducing or defining a concept.

4. Citations and Quotations

<p>
    Read the
    <cite>HTML Living Standard</cite>
    for the current HTML specification.
</p>

<blockquote cite="https://example.com/source">
    <p>An example of an extended quotation.</p>
</blockquote>

cite represents the title of a creative work, such as a specification, book or article. The cite attribute on blockquote can provide a source URL; it does not automatically display a citation to users.

5. Time and Machine-Readable Dates

<p>
    Published on
    <time datetime="2026-10-17">17 October 2026</time>.
</p>

<p>
    Meeting at
    <time datetime="14:30">2:30 PM</time>.
</p>

time represents a date, time or duration. Its datetime attribute can provide a machine-readable value.

6. Contact Information With Address

<address>
    Contact the Codementrix team at
    <a href="mailto:hello@example.com">
        hello@example.com
    </a>.
</address>

address represents contact information for the nearest article or body ancestor. It is not a general-purpose element for every postal address or arbitrary location.

7. Data Elements

<ul>
    <li>
        <data value="101">HTML Mastery</data>
    </li>
    <li>
        <data value="102">CSS Mastery</data>
    </li>
</ul>

data associates content with a machine-readable value. For dates and times, use time instead. For ordinary application-specific attributes on arbitrary elements, data-* may be more appropriate.