← Back to HTML Course | Chapter 1: Introduction & Basics | Lesson 11 of 11

HTML Text Semantics

HTML Formatting already covers the big, common inline tags -- bold, italic, highlight, sub/superscript. But there is a smaller family of inline elements that handle more specific jobs: labeling a term being defined, wrapping a machine-readable value, marking text that is simply styled differently without implying deletion, and fixing text direction for mixed-language content. These are used less often, but each solves a problem the more common tags cannot.

In this page:

  1. Defining a Term with dfn
  2. Machine-Readable Values with data
  3. Text That Is No Longer Accurate with s
  4. Unarticulated Annotation with u
  5. Isolating Direction with bdi
Syntax
markup 
<em>Emphasized text</em>
<strong>Important text</strong>
<time datetime="YYYY-MM-DD">Date</time>

Defining a Term with dfn

The <dfn> element wraps the specific word or phrase that is being formally introduced and defined for the first time in a passage, typically the very first time a technical term appears.

Browsers usually render it in italics by default, and pairing it with a title attribute lets you attach the definition as a tooltip.

Note: Use <dfn> only on the first, defining mention of a term in a document -- later casual mentions of the same word should stay as plain text.
Warning: <dfn> is easy to confuse with <dt> (description term); <dfn> marks a term inline within a sentence, while <dt> labels an entry inside a <dl> list.

Example: Defining a Term with dfn

markup 
<p><dfn title="HyperText Markup Language">HTML</dfn> structures web content.</p>

Machine-Readable Values with data

The <data> element pairs visible, human-friendly text with a machine-readable equivalent stored in its value attribute -- useful for product listings, sort keys, or any content a script might need to read in a structured form while still displaying something readable to visitors.

Note:
  • Use <data> when a script or search engine needs a stable, structured value that differs from the human-readable label shown on the page.
  • Accepted attributes:
  • value — required; machine-readable value string
Warning: <data> without a value attribute provides no benefit over a plain <span> -- the value attribute is the entire point of the element.

Example: Machine-Readable Values with data

markup 
<p><data value="398">Product #398</data></p>

Text That Is No Longer Accurate with s

The <s> element marks text that is no longer correct or no longer relevant, rendering with a strikethrough by default -- similar in appearance to <del>, but semantically different.

Use <s> for things like an outdated price or a stale status, not for content that was literally removed from a document (that is what <del> is for).

Note: Use <s> for "this used to be true but is not anymore" content, like a superseded price, and reserve <del> for actual document edit history.
Warning: Using <s> and <del> interchangeably loses the semantic distinction screen readers and search engines rely on to understand why the text is struck through.

Example: Text That Is No Longer Accurate with s

markup 
<p><s>$50</s> $35 today only</p>

Unarticulated Annotation with u

The <u> element renders text with an underline, representing an annotation that is stylistically different but not semantically emphasized -- commonly used for things like flagging a proper name in Chinese text or marking a misspelled word, similar to how a spell-checker underlines errors.

Note: Avoid using <u> purely to underline text for decoration, since underlines are strongly associated with links -- use CSS text-decoration for pure styling instead.
Warning: Underlining plain text with <u> for emphasis can confuse users into thinking the underlined text is a clickable link.

Example: Unarticulated Annotation with u

markup 
<p>The word <u>seperate</u> is misspelled.</p>

Isolating Direction with bdi

The <bdi> (Bidirectional Isolation) element isolates a span of text so its direction (left-to-right or right-to-left) is calculated independently from the surrounding text, which prevents user-generated content -- like a username in Arabic embedded in an English sentence -- from disrupting the layout of the text around it.

Note: Wrap any user-generated text of unknown or mixed direction (like usernames or comments) in <bdi> when displaying it inside a sentence of a different direction.
Warning: Without <bdi>, an embedded right-to-left username inside an English sentence can visually scramble the punctuation and words around it.

Example: Isolating Direction with bdi

markup 
<p>User <bdi>عمر</bdi> commented on your post.</p>
Live Example
Related Topics

HTML Semantics · HTML Quotations · HTML Formatting · HTML Styles

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Reaching for <b> or <i> to underline or strike through text when <u> and <s> exist specifically for that, and carry more precise meaning to assistive technology.
  2. Using <s> for content that was literally deleted from a document, when <del> is the semantically correct element for that -- <s> is for content that is simply no longer accurate or relevant.
  3. Forgetting that <data>'s value attribute holds the machine-readable version while the element's visible text can stay human-friendly -- omitting value defeats the point of using <data> at all.
Chapter Summary
  • <dfn> marks the exact word or phrase being formally defined within a sentence, distinct from <dt> which labels an entry in a description list.
  • <data> pairs human-readable text with a machine-readable value via its value attribute, useful for things like product IDs or sort keys.
  • <s> and <u> are visual-but-semantic elements: <s> for no-longer-accurate text, <u> for text that is annotated or flagged without implying emphasis.
Browser Support

bdi, dfn, data, s, and u are all supported in every modern browser; bdi in particular has been supported since Chrome 25 and Firefox 30.

🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson HTML Formatting Next Lesson → HTML Quotations

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.