• Chapter 5 — Inline Text Elements
  • 5.1 — <a> — Hyperlink / Anchor
  • 5.2 — <em> — Stress Emphasis
  • 5.3 — <strong> — Strong Importance
  • 5.4 — <small> — Side Comments
  • 5.5 — <s> — Strikethrough (No Longer Accurate)
  • 5.6 — <cite> — Creative Work Title
  • 5.7 — <q> — Inline Quotation
  • 5.8 — <dfn> — Definition Term
  • 5.9 — <abbr> — Abbreviation
  • 5.10 — <ruby>, <rt>, <rp> — Ruby Annotations
  • 5.11 — <data> — Machine-Readable Data
  • 5.12 — <time> — Date and Time
  • 5.13 — <code>, <var>, <samp>, <kbd>
    • <code> — Computer Code
    • <var> — Variable
    • <samp> — Sample Output
    • <kbd> — Keyboard Input
  • 5.14 — <sub> and <sup> — Subscript and Superscript
  • 5.15 — <i>, <b>, <u> — Idiomatic, Stylistic, Unarticulated
    • <i> — Idiomatic Text / Alternate Voice
    • <b> — Stylistically Bold
    • <u> — Unarticulated Annotation
  • 5.16 — <mark> — Highlight
  • 5.17 — <del> and <ins> — Deletions and Insertions
  • 5.18 — <bdi> — Bidirectional Isolation
  • 5.19 — <bdo> — Bidirectional Override
  • 5.20 — <span> — Generic Inline Container
  • 5.21 — <br> — Line Break
  • 5.22 — <wbr> — Word Break Opportunity
  • 5.23 — The Transparent Content Model

§Chapter 5 — Inline Text Elements

Inline elements appear within the flow of text. They wrap around words and phrases to add meaning, mark up references, or provide links. This chapter covers all 29 inline elements, the transparent content model, and every element-specific attribute.

§5.1 — <a> — Hyperlink / Anchor

When it has an href, it’s a hyperlink. Without href, it’s a placeholder link.

Implicit ARIA role: link (with href); generic (without href)

Element-specific attributes:

target values:

• _self — Current browsing context (default)
• _blank — New tab/window
• _parent — Parent browsing context
• _top — Top-level browsing context
• _unfencedTop — Navigates the top-level from inside a fenced frame
• Named string — Navigate to named frame/tab

rel values on <a>:

Security rule: Always add rel="noopener noreferrer" to target="_blank" links:

<a href="https://external.com" target="_blank" rel="noopener noreferrer">
  External site (opens in new tab)
</a>

Download link:

<a href="/report-q1-2026.pdf" download="Q1-2026-Report.pdf">
  Download Q1 Report (PDF)
</a>

interestfor (experimental — Chrome Canary only):

<a href="/product" interestfor="product-preview">Product Name</a>
<div id="product-preview" popover="hint">
  <img src="/product-thumb.jpg" alt="Product preview">
  <p>From £49.99</p>
</div>

Content model: Transparent — but cannot contain interactive content (<button>, <select>, <textarea>, another <a>).

§5.2 — <em> — Stress Emphasis

Marks text with stress emphasis — the same word spoken with vocal stress. Nested <em> elements increase the degree of emphasis. Changes the meaning of the sentence.

<p>I <em>never</em> said she stole it.</p>
<p>I never said <em>she</em> stole it.</p>
<p>I never said she <em>stole</em> it.</p>
<!-- Three different meanings depending on which word is stressed -->

§5.3 — <strong> — Strong Importance

Marks text of strong importance, seriousness, or urgency. Does not change the meaning of the sentence like <em> does — it highlights importance.

<p><strong>Warning:</strong> Do not exceed the recommended dose.</p>
<p>Please read the <strong>important safety information</strong> before proceeding.</p>

§5.4 — <small> — Side Comments

Represents side comments — fine print, legal disclaimers, copyright notices, caveats. Not for making text visually smaller — use CSS for that.

<p>Sale price: £29.99 <small>(VAT included)</small></p>
<p>© 2026 MyCompany Ltd. <small>All rights reserved.</small></p>

§5.5 — <s> — Strikethrough (No Longer Accurate)

Content that is no longer accurate or relevant but is not a deletion. Distinct from <del> which marks editorial deletions.

<p>Original price: <s>£99.99</s> Now: £49.99</p>
<p>Status: <s>Processing</s> Shipped</p>

§5.6 — <cite> — Creative Work Title

Marks the title of a creative work — a book, film, article, song, album, painting, play, poem, TV show, etc.

<p>I just finished reading <cite>Dune</cite> by Frank Herbert.</p>
<p>The film <cite>Inception</cite> was directed by Christopher Nolan.</p>
<p>Source: <cite><a href="https://example.com/article">The Future of the Web</a></cite></p>

Rule: <cite> is for titles only — not for citing people.

§5.7 — <q> — Inline Quotation

An inline quotation from another source. Browsers add quotation marks automatically (respecting language and locale).

Element-specific attribute:

<p>Tim Berners-Lee said <q cite="https://example.com">The Web is for everyone.</q></p>
<p>She said <q>I'll be there at noon</q> but never arrived.</p>

§5.8 — <dfn> — Definition Term

Marks the defining instance of a term — the point in the document where the term is first defined or explained.

Three term-determination rules (in priority order):

1. If <dfn> has a title attribute → that is the term
2. If <dfn> contains a single <abbr> with a title → the <abbr>’s title is the term
3. Otherwise → the text content of <dfn> is the term

<!-- Rule 3: text content is the term -->
<p>The <dfn>Document Object Model (DOM)</dfn> is a programming interface for HTML documents.</p>

<!-- Rule 1: title attribute overrides text -->
<p>The <dfn title="Cascading Style Sheets">CSS</dfn> language controls visual presentation.</p>

<!-- Rule 2: abbr inside dfn -->
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the language of the web.</p>

§5.9 — <abbr> — Abbreviation

Marks an abbreviation or acronym. The title attribute provides the full form.

Rule: Each abbreviation is independent — an <abbr> on the first use does not define the abbreviation for subsequent uses. Each occurrence where the expansion is not obvious should have its own <abbr>.

<p>The <abbr title="World Health Organisation">WHO</abbr> released new guidelines.</p>
<p>We use <abbr title="Cascading Style Sheets">CSS</abbr> for styling and
   <abbr title="HyperText Markup Language">HTML</abbr> for structure.</p>

§5.10 — <ruby>, <rt>, <rp> — Ruby Annotations

Ruby annotations provide pronunciation or meaning guides for CJK (Chinese, Japanese, Korean) text, displayed above or beside the base characters.

<ruby> — Container for base text + annotation. <rt> — Ruby text (the annotation). <rp> — Ruby parentheses — fallback text for browsers that don’t support ruby.

<!-- Japanese with furigana pronunciation guide -->
<ruby>
  漢<rp>(</rp><rt>かん</rt><rp>)</rp>
  字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

<!-- Chinese with pinyin -->
<ruby>汉字<rt>hànzì</rt></ruby>

<!-- Multiple characters with one annotation -->
<ruby>東京<rt>Tōkyō</rt></ruby>

§5.11 — <data> — Machine-Readable Data

Links content to a machine-readable value. The human-readable value is the text content; the machine-readable value is in the value attribute.

Element-specific attribute:

<ul>
  <li><data value="21053">Apple</data></li>
  <li><data value="21054">Orange</data></li>
</ul>

<p>Product: <data value="SKU-12345">Widget Pro</data></p>

§5.12 — <time> — Date and Time

Represents a machine-readable date, time, or duration. The human-readable value is the text content; the machine-readable form is in datetime.

Element-specific attribute:

Valid datetime formats:

<p>Published: <time datetime="2026-04-26">April 26, 2026</time></p>
<p>Event starts at <time datetime="2026-04-26T19:00+01:00">7 PM BST</time></p>
<p>Reading time: <time datetime="PT12M">12 minutes</time></p>
<p>Expires: <time datetime="2026-12">December 2026</time></p>

§5.13 — <code>, <var>, <samp>, <kbd>

Four elements for representing computer-related text:

§<code> — Computer Code

<p>Use <code>display: grid</code> on the container.</p>
<p>The function <code>Array.from()</code> creates a new array.</p>

§<var> — Variable

Mathematical or programming variable.

<p>The formula is: <var>E</var> = <var>m</var><var>c</var>²</p>
<p>Set <var>x</var> to the length of the string.</p>

§<samp> — Sample Output

Output from a computer program.

<p>The terminal returned: <samp>Error: file not found</samp></p>
<pre><samp>$ node --version
v22.0.0</samp></pre>

§<kbd> — Keyboard Input

Text the user should type or a keyboard key.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Type <kbd>exit</kbd> to quit.</p>
<!-- Nested: kbd inside kbd for key combos -->
<p><kbd><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd></kbd> opens the command palette.</p>

§5.14 — <sub> and <sup> — Subscript and Superscript

Use only when subscript/superscript is semantically required — not for visual styling.

<!-- Subscript: chemical formula -->
<p>Water is H<sub>2</sub>O. Carbon dioxide is CO<sub>2</sub>.</p>

<!-- Superscript: mathematical exponent -->
<p>E = mc<sup>2</sup></p>
<p>The area is r<sup>2</sup>π</p>

<!-- Superscript: ordinals -->
<p>1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup></p>

<!-- Footnote reference -->
<p>This claim requires citation<sup><a href="#fn1">[1]</a></sup>.</p>

§5.15 — <i>, <b>, <u> — Idiomatic, Stylistic, Unarticulated

These are not purely presentational — they have semantic meaning in the Living Standard:

§<i> — Idiomatic Text / Alternate Voice

Text in a different mood, voice, or language from the surrounding text. Taxonomic names, foreign words, technical terms, thoughts, ship names.

<p>The term <i lang="la">in situ</i> means "in position".</p>
<p>She thought, <i>What could possibly go wrong?</i></p>
<p>The ship <i class="ship-name">Mary Rose</i> sank in 1545.</p>
<p>The <i class="taxonomy">Homo sapiens</i> species emerged 300,000 years ago.</p>

§<b> — Stylistically Bold

Text that is conventionally rendered in bold but carries no added importance. Keywords in a document summary, product names, lead sentences in an article.

<p>The sale includes <b>shoes</b>, <b>bags</b>, and <b>accessories</b>.</p>
<p><b>Attention:</b> Office closed on Monday.</p>

§<u> — Unarticulated Annotation

Text with a non-textual annotation — proper name marks in Chinese, spell-check errors. Not for styling purposes.

<!-- Proper name mark -->
<p>You can write to <u class="proper-name">Alice Smith</u> at the address below.</p>

<!-- Spelling error indicator (the browser may also do this) -->
<p>I recieved <u class="spelling-error">recieved</u> the package today.</p>

§5.16 — <mark> — Highlight

Represents text highlighted for reference — not for importance, but for relevance to the user’s current context. Search results highlight, quoted text.

<!-- Search results: highlight matching terms -->
<p>Results for "CSS Grid":</p>
<p>Understanding <mark>CSS Grid</mark> layout: A complete visual guide to <mark>CSS Grid</mark>…</p>

<!-- Current term in a definition -->
<p>The <mark>Document Object Model</mark> is defined as follows…</p>

§5.17 — <del> and <ins> — Deletions and Insertions

Marks editorial changes — content that has been deleted (<del>) or inserted (<ins>) relative to a previous version.

Both elements have the same attributes:

Both are transparent — they can contain either phrasing or flow content, matching what would be valid in their parent.

<!-- Price change -->
<p>Price: <del datetime="2026-03-01">£99.99</del> <ins datetime="2026-04-01">£79.99</ins></p>

<!-- Document revision -->
<del cite="https://example.com/changelog">
  <p>Old paragraph that was removed.</p>
</del>
<ins cite="https://example.com/changelog">
  <p>New paragraph that replaced it.</p>
</ins>

§5.18 — <bdi> — Bidirectional Isolation

Isolates a span of text that might be in a different direction from its surroundings. Prevents user-supplied content with unknown directionality from disrupting surrounding text direction.

<!-- User-supplied names: unknown direction -->
<ul>
  <li>User: <bdi>Alice</bdi> — 47 posts</li>
  <li>User: <bdi>محمد</bdi> — 23 posts</li>  <!-- RTL name won't disrupt layout -->
  <li>User: <bdi>אריאל</bdi> — 31 posts</li>
</ul>

§5.19 — <bdo> — Bidirectional Override

Forces text to render in a specific direction, overriding the Unicode bidirectional algorithm.

Element-specific attribute:

<!-- Force right-to-left rendering -->
<p>Reversed: <bdo dir="rtl">Hello World</bdo></p>
<!-- Renders as: dlroW olleH -->

§5.20 — <span> — Generic Inline Container

A generic inline container with no semantic meaning. Use only when no semantic inline element is appropriate.

<p>The temperature is <span class="temp hot" aria-label="very hot temperature">42°C</span>.</p>
<p>Price: <span lang="en-GB">£</span>49.99</p>

§5.21 — <br> — Line Break

A line break within flowing text. Use only where line breaks are meaningful — poetry, addresses. Never use for visual spacing — use CSS margin or padding.

Void element — no closing tag.

<address>
  Alice Smith<br>
  123 Web Street<br>
  London<br>
  W1A 1AA
</address>

<p>Roses are red,<br>
Violets are blue,<br>
HTML is semantic,<br>
And CSS is too.</p>

§5.22 — <wbr> — Word Break Opportunity

A hint that the browser may break the line here if needed. Does not add a hyphen. Useful for long URLs, compound words, or unbreakable strings.

Void element — no closing tag.

<p>https://www.example.com/very<wbr>/long<wbr>/url<wbr>/path<wbr>/file.html</p>

<p>Supercalifragilistic<wbr>expialidocious</p>

<code>someReallyLongCamelCase<wbr>VariableName<wbr>WithManyParts</code>

§5.23 — The Transparent Content Model

Several elements are transparent — their content model is inherited from their parent element. This means what they can contain depends on where they are placed, not on the elements themselves.

Transparent elements: <a>, <ins>, <del>, <map>, <noscript>, <canvas>

Rule: To determine if content is valid inside a transparent element, pretend the transparent element isn’t there and check if the content would be valid inside the parent.

<!-- <a> is transparent — inside <p> (phrasing context), it can only contain phrasing -->
<p><a href="/"><em>Home</em></a></p>                    <!-- Valid -->
<p><a href="/"><p>Paragraph</p></a></p>                 <!-- Invalid: <p> inside <p> -->

<!-- <a> transparent in flow context: can contain flow content -->
<div>
  <a href="/">
    <h2>Card Title</h2>
    <p>Card description</p>
  </a>
</div>                                                  <!-- Valid: flow content in flow context -->

Tags: #html #vdsology #webdevelopment #vdsologyhtml #html5 #htmlreference #htmlreference2026