Text Formatting
Make words bold, italic, highlighted, struck-through, superscript and more — each with the right meaning.
What you will learn
- Emphasise text with <strong> and <em>
- Use formatting tags: mark, del, ins, sub, sup, small
- Add line breaks and dividers
Bold and italic — with meaning
To make text important, use <strong> (shown bold). To emphasise a word, use <em> (shown italic). These tags carry meaning, which helps screen readers (software that reads a page aloud for blind users) and Google understand your text.
<p>This is <strong>very important</strong> information.</p>
<p>I <em>really</em> enjoy building websites.</p>Note: There are also <b> (bold) and <i> (italic) which only change the look. Prefer <strong> and <em> because they describe why the text matters, not just how it looks.
More formatting tags
| Tag | Meaning | Looks like |
|---|---|---|
<mark> | Highlighted text | yellow highlight |
<del> | Deleted text | strike-through |
<ins> | Inserted text | underline |
<small> | Smaller / fine print | smaller text |
<sub> | Subscript | H₂O |
<sup> | Superscript | x² |
<p>The price is <del>₹999</del> <ins>₹499</ins> today!</p>
<p>Please <mark>read this carefully</mark>.</p>
<p>Water is H<sub>2</sub>O and 5<sup>2</sup> = 25.</p>
<p><small>Terms and conditions apply.</small></p>Each tag wraps only the part you want to change: <del> puts a line through the old price, <ins> underlines the new one, <mark> highlights words in yellow, <sub> drops the “2” down (for H₂O), <sup> lifts the “2” up (for 5²), and <small> shrinks the fine print. Everything outside the tags stays normal.
Note: Output: The price is ₹999 (struck through) ₹499 (underlined) today! Please read this carefully. (those words highlighted yellow) Water is H₂O and 5² = 25. Terms and conditions apply. (in smaller text)
Line breaks and dividers
<br>— a single line break (like pressing Enter once). Great for addresses and poems.<hr>— a horizontal line that divides sections (a “thematic break”).
<p>CodingClave<br>2nd Floor, Tech Park<br>Bengaluru</p>
<hr>
<p>New section after the line.</p>Inside the first paragraph, each <br> forces the next words onto a new line — so the address stacks neatly instead of running together. Then <hr> draws a full-width divider line, and a fresh paragraph begins below it.
Note: Output: CodingClave 2nd Floor, Tech Park Bengaluru ——————————— (a horizontal line) New section after the line.
Q. Which tag should you use to mark text as important?
✍️ Practice
- Write a “sale” line showing an old price with
<del>and a new price with<ins>. - Write the chemical formula for carbon dioxide using
<sub>, and “10 to the power 3” using<sup>.
🏠 Homework
- Write your postal address using
<br>so each line appears separately.