HTML Text Semantics

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
   1. time
   2. data
   3. dfn
   1. dfn
   2. kbd
   3. samp
   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.