HTML Text Formatting
HTML has special tags to make parts of a text bold, italic, highlighted, smaller and more.
Bold and Important Text
<b> makes text bold only for looks. <strong> makes text bold and tells the browser the text is important.
Example
html
<!DOCTYPE html>
<html>
<body>
<p>This shirt is <b>blue</b>.</p>
<p><strong>Warning:</strong> Do not wash in hot water.</p>
</body>
</html>Italic and Emphasised Text
<i> shows italic text, often for a foreign word, a name or a thought. <em> adds emphasis, and screen readers say it with stress.
Example
html
<!DOCTYPE html>
<html>
<body>
<p>My grandmother calls it <i>chai</i>, never tea.</p>
<p>You <em>must</em> bring your ID card to the exam.</p>
</body>
</html>Prefer <strong> and <em> when the words really are important or stressed. They carry meaning, which helps accessibility and search engines.
Highlighted, Small, Deleted and Inserted Text
Example
html
<!DOCTYPE html>
<html>
<body>
<p>Remember: the test is on <mark>Friday</mark>.</p>
<p>Laptop bag: <del>Rs 3500</del> <ins>Rs 2800</ins></p>
<p><small>Prices include tax.</small></p>
</body>
</html>Output
Remember: the test is on Friday. (Friday highlighted) Laptop bag: Rs 3500 Rs 2800 (old price crossed out, new price underlined) Prices include tax. (smaller text)
Subscript and Superscript
<sub> puts text slightly below the line; <sup> puts it slightly above. They are common in science and maths.
Example
html
<!DOCTYPE html>
<html>
<body>
<p>Water is H<sub>2</sub>O.</p>
<p>The area is 25 m<sup>2</sup>.</p>
<p>The 1<sup>st</sup> batch starts in March.</p>
</body>
</html>All Formatting Tags
| Tag | Meaning | Looks like |
|---|---|---|
<b> | Bold text, no extra meaning | Bold |
<strong> | Important text | Bold |
<i> | Alternate voice, foreign word | Italic |
<em> | Emphasised text | Italic |
<mark> | Highlighted text | Yellow background |
<small> | Side notes, fine print | Smaller |
<del> | Removed text | Line through |
<ins> | Added text | Underlined |
<sub> | Subscript | Lowered |
<sup> | Superscript | Raised |
Combining Tags
You can nest formatting tags. Close them in the reverse order you opened them.
Example
html
<p><strong><em>Last day to apply!</em></strong></p>Exercise
Exercise
Which tag marks text as important and shows it in bold?