HTML has elements that give words extra meaning inside a sentence. Prefer these over using CSS alone, because they tell browsers and assistive tools why the text is special.
index.html
HTML
<p>This is <strong>very important</strong>.</p>
<p>I <em>really</em> mean it.</p>
<p>Remember to <mark>bring your receipt</mark>.</p>
<p><small>Prices include tax.</small></p>
<p>Water is H<sub>2</sub>O and 3<sup>2</sup> is nine.</p>
<p>Price: <del>$12</del> <ins>$9</ins></p>What each element means
| Element | Meaning | Usually looks like |
|---|---|---|
strong | Strong importance | Bold |
em | Stress emphasis | Italic |
mark | Highlighted for reference | Yellow background |
small | Side comments, fine print | Smaller text |
sub / sup | Subscript / superscript | Lowered / raised |
del | Text that was removed | Strikethrough |
ins | Text that was added | Underlined |
strong and em versus b and i
b and i also exist. They make text bold or italic without adding importance. Use them only for cases such as a product name or a foreign phrase, where the style matters but the meaning does not. When something is important, use strong. When you want to change the stress of a sentence, use em.
warning
Using strong just to make text bold
If you only want bigger or bolder text for design, use CSS. Overusing
strong makes screen reader users hear everything as important.Exercise: format a notice
Write a sentence that has one important word, one emphasised word and a note in fine print.
Show a possible solution
index.html
HTML
<p>Please <strong>return</strong> books by <em>Friday</em>.</p>
<p><small>Late fees may apply.</small></p>