Text

Inline elements

Published on

Description

Inline style elements like <strong>, <em>, <code>, <kbd>, <sub>, <sup>, <abbr>, and others provide visual and semantic emphasis within text.

Example

Open in new tab
View HTML markup 
  <div style="column-width:20ch">
  <p><abbr title="abbreviation">abbr</abbr></p>
  <p><bdo dir="rtl">reverse</bdo></p>
  <p><dfn id="dfn"><abbr title="definition">dfn</abbr></dfn></p>
  <p><strong>bold</strong> <b>bold</b></p>
  <p><em>italic</em> <cite>italic</cite> <i>italic</i></p>
  <p><del>deleted</del></p>
  <p><ins>inserted</ins></p>
  <p><code>var meaning = 42;</code></p>
  <p><kbd>Ctrl</kbd> + <kbd>K</kbd></p>
  <p><mark>highlighted</mark></p>
  <p><math>
      <mfrac>
        <mn>1</mn>
        <msqrt>
          <mn>2</mn>
        </msqrt>
      </mfrac>
    </math></p>
  <p><output>output</output></p>
  <p><span lang="en"><q>english quote</q></span> <span lang="fr"><q>french quote</q></span> <span lang="de"><q>german quote</q></span></p>
  <p><s>strikethrough</s></p>
  <p><small>small</small></p>
  <p>X<sub>sub</sub></p>
  <p>X<sup>sup</sup></p>
  <p><u>underline</u></p>
  <p><var>variable</var></p>
</div>

Accessibility

  • <strong> and <em> convey emphasis but most screen readers do not change pronunciation by default.
  • <sub> and <sup> announcements vary across screen readers. NVDA has a preference setting for announcements; VoiceOver offers Braille-only support; JAWS lacks support entirely.
  • CSS vertical-align can break NVDA's sub/sup detection — use native elements rather than CSS positioning.
  • <abbr> with a title attribute provides the expanded form, but title is not reliably exposed across assistive technologies.

References

Variables

None for inline elements