HTML Text Semantics
In this page:
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
<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.
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
<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
<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
<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
<p>User <bdi>عمر</bdi> commented on your post.</p>- 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.
- 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.
- 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.
- <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.
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: