Text formatting

Inside a paragraph you often need to highlight separate words: an important warning, a term, an old price, a piece of code. That is what inline elements are for — they do not start a new line, they mark up part of the text inside it.

Importance and emphasis

 marks important text,  (emphasis) marks stress that changes how a phrase is spoken:

<p><strong>Warning:</strong> entry by appointment only.</p>
<p>I asked for <em>black</em> tea, not green.</p>

The browser shows  in bold and  in italics.

Bold and italic without extra meaning

The  and  tags also make text bold and italic, but they add no importance.  suits keywords,  suits terms, foreign words and titles:

<p>The recipe needs <b>flour</b>, <b>eggs</b> and <b>sugar</b>.</p>
<p>The dish is called <i>ratatouille</i> and comes from Provence.</p>

Choose by meaning: a screen reader may say  with stress and  in a normal voice.

Marks in text

Tag	What it means	How it looks
`<mark>`	Highlight, like a marker pen	Yellow background
`<small>`	Side note, fine print	Smaller
`<del>`	Removed text	Struck through
`<ins>`	Inserted text	Underlined
`<sub>`, `<sup>`	Subscript and superscript	Below and above the line

<p>Found: "buy <mark>coffee</mark> beans".</p>
<p>Price: <del>$12</del> <ins>$9</ins></p>
<p>Water is H<sub>2</sub>O, the area is 20 m<sup>2</sup>.</p>
<p><small>The offer is valid until the end of the month.</small></p>

Code and keys

<code> marks a piece of code, <kbd> marks a key or a key combination. The browser shows them in a monospace font, where all letters have the same width:

<p>The <code>git status</code> command shows changes.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

Preformatted text

<pre> keeps every space and line break exactly as written in the code. You put <code> inside it when showing a program:

<pre><code>function hello() {
    return "Hello";
}</code></pre>

Notice that the indentation and line breaks stayed in place, although in a normal paragraph the browser would collapse them.

Abbreviations and short quotes

<abbr> explains an abbreviation — the full form appears when you hover over it. <q> is a short quote inside a paragraph; the browser adds the quotation marks itself:

<p><abbr title="Cascading Style Sheets">CSS</abbr> is in charge of appearance.</p>
<p>Dijkstra wrote: <q>Simplicity is prerequisite for reliability</q>.</p>

Common mistake

Do not use tags for their looks:  for a heading or  for small text. If you just need to colour or enlarge a word in a paragraph, that is a job for CSS. There is a neutral inline tag  with no meaning of its own for that:

<p>Today there is <span style="color: crimson;">20% off</span> the whole menu.</p>

Thanks for reading!