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.

<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.

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.