HTML Tutorial / Text Semantics: Emphasis, Quotations, Abbreviations, and Code

HTML text elements describe why a passage is distinct, not merely how it looks. Use em for emphasis, strong for importance, q and blockquote for quotations, abbr for abbreviations, and code for code.

Emphasis and importance: em and strong

Use em to stress a word in its sentence. Use strong when the content itself has particular importance, as in a warning. Browsers often display these elements in italics and bold, respectively, but their meanings are not defined by those styles.

<p>Save the file <em>before</em> refreshing the browser.</p>

<p><strong>Do not share your password.</strong></p>

The first sentence emphasizes the order of actions; the second marks a warning. If you only need a visual treatment, use CSS instead of adding semantic elements with no matching meaning.

Short and block quotations: q and blockquote

Use q for a short quotation within a sentence and blockquote for a quotation that stands as a separate block. The following sentences were written solely to demonstrate the elements.

<p>The notice says <q>Save your changes</q>.</p>

<blockquote>
  <p>Plan the document structure before writing its content.</p>
</blockquote>

A browser can supply quotation marks for q, so do not add a second pair around it. For a real quotation, check the wording and identify its source in visible text. The cite attribute on blockquote does not automatically display a source to readers.

Explaining abbreviations with abbr

abbr identifies an abbreviation. Spell out an unfamiliar term in the surrounding text when it first appears; a reader should not have to hover over the title attribute to learn its meaning.

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) defines the structure of a web page.</p>

You do not need to repeat the full term at every later occurrence in the same context.

Code and user input: code and kbd

Use code for a short piece of code or a filename discussed as code. Use kbd for keys or other input the user should provide. Literal code brackets use the character-escaping rules in Syntax.

<p>Save <code>index.html</code> with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

For multiline code that must retain spacing, HTML can place code inside pre. This site's tutorials use the separate EnlighterJSRAW code-block format for syntax highlighting.

Compare semantics in one complete document

Save this complete document as text-semantics.html in UTF-8. The quotation is a fictional instruction written to demonstrate the element.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Text semantics practice</title>
</head>
<body>
  <h1>A short notice</h1>
  <p>Check the result <em>after</em> saving the file.</p>
  <p><strong>Keep the original file.</strong></p>
  <p>A fictional instruction reads <q>Save your changes</q>.</p>
  <p>This uses HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Save with <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Example sentence&lt;/p&gt;</code></pre>
</body>
</html>

1. Identify the stress, warning, quotation, and abbreviation by reading the surrounding text.
2. Check that the final <p> is displayed as code rather than interpreted as a paragraph.
3. Temporarily replace strong with span, then restore it for the important message. This compares the element's meaning with its default presentation.

MDN's code reference explains the element used to represent code.

Choose the element that matches the meaning

• Use em for stress and strong for importance.
• Use q for an inline quotation and blockquote for a standalone quotation.
• Use abbr for an abbreviation and explain unfamiliar terms in readable text.
• Distinguish code with code and user input with kbd.

See the MDN HTML elements reference for each element's permitted content and detailed syntax. The distinction between meaning and presentation also applies in Accessibility Basics: Headings, Links, Images, and Keyboard.