Formatting Text

HTML has many small elements that give meaning to words inside a paragraph. Each has a default look, but choose them for what they mean.

Importance and emphasis

<p><strong>Warning:</strong> the oven gets very hot.</p>
<p>I <em>never</em> said she stole the money.</p>
<p>Search results for <mark>tomato</mark> sauce.</p>
<p><small>Prices include VAT.</small></p>

• strong — strong importance, seriousness, or urgency (shown bold).
• em — stress emphasis that changes the meaning of a sentence (shown italic). Screen readers may change their tone.
• mark — highlighted because it's relevant in context, such as a search match (shown with a yellow background).
• small — side comments and fine print.

b and i also exist: b draws attention without extra importance (keywords, product names), and i is for text in an alternate voice — technical terms, foreign words, thoughts, ship names. Use strong and em when you mean importance or emphasis.

Code and computer text

<p>Use the <code>print()</code> function.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The program replied: <samp>File not found</samp></p>
<p>The area is <var>width</var> × <var>height</var>.</p>
<pre><code>function greet() {
  return "hi";
}</code></pre>

pre keeps spaces and line breaks exactly as written and uses a monospace font — use it for code blocks and ASCII art.

Quotations and citations

<blockquote cite="https://www.w3.org/Consortium/mission">
  <p>The Web is fundamentally designed to work for all people.</p>
</blockquote>
<p>As the saying goes, <q>measure twice, cut once</q>.</p>
<p>My favorite book is <cite>The Hobbit</cite>.</p>

blockquote is a block quotation (indented by default); q is an inline quote (the browser adds quotation marks); cite is the title of a work.

Abbreviations, dates, and changes

<p><abbr title="World Health Organization">WHO</abbr> was founded in
  <time datetime="1948-04-07">April 1948</time>.</p>
<p>Water boils at 100 °C at sea level (H<sub>2</sub>O, E = mc<sup>2</sup>).</p>
<p>Price: <del>$40</del> <ins>$30</ins></p>

time gives a machine-readable date in datetime while showing any human-friendly text. sub and sup are subscript and superscript; del and ins show removed and inserted text.

Breaks

• <br> is a line break within a paragraph — for addresses and poems, not for spacing.
• <hr> is a thematic break between paragraphs — a change of topic or scene (drawn as a horizontal line).
• <wbr> marks a place where a very long word or URL may break.

<p>Corner Bakery<br>12 High Street<br>Springfield</p>
<hr>
<p>https://example.com/a/very<wbr>/long<wbr>/path</p>

Practice

Mark up this sentence: "Press Ctrl + C to copy. Note: the CSS function rgb() was defined by the W3C (World Wide Web Consortium)." Use kbd, strong, code, and abbr.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
  <strong>Note:</strong> the CSS function <code>rgb()</code> was defined
  by the <abbr title="World Wide Web Consortium">W3C</abbr>.</p>