HTML Text Formatting: strong, em, mark, small, sub, sup, code and More

HTML has a set of inline elements that give meaning to words and phrases inside a paragraph: importance, emphasis, highlights, code and more. Each one also has a default look, but it is the meaning that matters.

Importance and emphasis: strong and em#

<p><strong>Warning:</strong> do not touch the wires.</p>
<p>I <em>really</em> want to learn HTML.</p>
<p>I really want to learn <em>HTML</em>.</p>

• <strong> marks text as important, serious or urgent. Browsers show it in bold.
• <em> marks stress emphasis, the word you would stress when speaking. Browsers show it in italics. Moving the <em> changes the meaning of the sentence, as the last two lines show.

b and i#

<b> and <i> also produce bold and italic text, but without adding importance or stress:

<p>The <b>mango</b> is the national fruit of India.</p>
<p>The word <i lang="fr">déjà vu</i> comes from French.</p>

• <b> draws attention to a keyword or product name without making it more important.
• <i> is for text in a different voice: foreign words, technical terms, thoughts, ship names.

Highlights, fine print and edits#

<p>Search results for "rice": brown <mark>rice</mark> recipes</p>
<p><small>Prices include tax. Offer valid until stocks last.</small></p>
<p>Price: <del>₹999</del> <ins>₹749</ins></p>
<p><s>Ticket bookings open on Monday.</s> Bookings are now closed.</p>

Subscript and superscript#

<p>Water is H<sub>2</sub>O.</p>
<p>The area is 25 m<sup>2</sup>, and E = mc<sup>2</sup>.</p>

<sub> lowers text (chemical formulas) and <sup> raises it (powers, footnote markers).

Code and computer text#

<p>Use the <code>print()</code> function to show output.</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>length</var> × <var>width</var>.</p>

For whole blocks of code, put <code> inside <pre> so the spacing is kept:

<pre><code>for i in range(3):
    print(i)</code></pre>

Common mistakes#

Practice#

<p><strong>Note:</strong> press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Carbon dioxide is CO<sub>2</sub>.</p>

Key takeaway#