HTML Tutorial · HTML Basics · Lesson 5 of 34
HTML Text Formatting
Strong, emphasis, code, quotes and other inline text elements.
Meaningful formatting
HTML elements describe meaning; CSS controls looks. Prefer the semantic element:
| Element | Meaning |
|---|---|
<strong> |
strong importance (bold by default) |
<em> |
stress emphasis (italic by default) |
<mark> |
highlighted / relevant text |
<code>, <kbd> |
code, keyboard input |
<small> |
side comments, fine print |
<del>, <ins> |
removed / inserted text |
<sub>, <sup> |
subscript, superscript |
<abbr title="..."> |
abbreviation |
<p>This is <strong>very important</strong> and this is <em>emphasised</em>.</p>
<p>Search results for <mark>HTML</mark> tutorials.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save. Run <code>npm install</code> first.</p>
<p>Price: <del>$49</del> <ins>$29</ins> <small>(VAT included)</small></p>
<p>H<sub>2</sub>O and E = mc<sup>2</sup></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>
Quotes and preformatted text
<blockquote cite="https://example.com/talk">
<p>Programs must be written for people to read, and only incidentally for machines to execute.</p>
</blockquote>
<p>As the saying goes, <q>simple is better than complex</q>.</p>
<pre>
Preformatted text
keeps its spaces
and line breaks.
</pre>
Test yourself
Which element marks text of strong importance?
<b><strong><bold><important>
Show answer
Answer: <strong>