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.

8. Other Useful Semantic Elements

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<p>The program returned <samp>Success</samp>.</p>

<p>The result is <var>x</var> + 10.</p>

<p>This term is <u>annotated</u>.</p>

<p>The deadline is <del>Monday</del>
   <ins>Tuesday</ins>.</p>

• kbd represents user input, such as keyboard commands.
• samp represents sample output from a program or computer system.
• var represents a variable in a mathematical or programming context.
• u marks text with a non-textual annotation, not merely text that needs emphasis.
• del and ins represent deleted and inserted content.

9. Choosing the Correct Element

Use the element that communicates the content's intended meaning. Do not select elements merely because their default browser styling looks attractive.

Common Mistakes

• Using address as a generic container for every postal address.
• Using cite to mark the name of every person being quoted.
• Using figure for content that is not a self-contained figure or referenced unit.
• Using data for date values instead of time.
• Using semantic elements only for their visual appearance.

Practice Exercises

1. Create a figure with an image and caption.
2. Define HTML using dfn.
3. Mark a publication date using time.
4. Build a keyboard shortcut example using kbd.
5. Explain the difference between data and time.

Section 15 Revision Quiz

1. Which element provides a caption for a figure?
   1. figcaption
   2. caption only
   3. legend
2. Which element represents a date or time?
   1. time
   2. data
   3. dfn
3. Which element marks the defining instance of a term?
   1. dfn
   2. kbd
   3. samp
4. True or false: The cite element is intended to represent the title of a creative work.
5. Which element represents user keyboard input?
   1. kbd
   2. var
   3. address

Answer Key and Explanations

1. a. figcaption supplies the caption for its figure.
2. a. time represents dates, times and durations.
3. a. dfn marks a defining instance of a term.
4. True. cite represents the title of a creative work.
5. a. kbd represents keyboard or other user input.