Now that you’ve learned how to add text to your webpage using headings, paragraphs, and lists, it’s time to explore how to style and emphasize your content using HTML formatting tags. These tags help improve the way your content looks and make it easier for users to read and understand.
Let’s dive into the most common formatting options available in HTML!
✍️ Why Format Text in HTML?
Formatting text is not just about making it look pretty — it helps to:
- Highlight important information
- Organize content better
- Improve accessibility for screen readers
- Improve user engagement and readability
With just a few simple tags, you can make a big difference in how your webpage communicates with users.
🔡 Bold and Strong Text
You can make text bold using two different tags:
1. <b> – Makes text bold (purely visual)
Use this when you want to draw attention to a word or phrase, but without giving it extra importance semantically.
<p>This is a <b>bold</b> word.</p>2. <strong> – Bold with meaning (used for emphasis)
This tag not only makes the text bold but also tells the browser and screen readers that the text is important.
<p>This is a <strong>very important</strong> message.</p>💡 Tip: Always prefer <strong> over <b> when the text has real significance.
✨ Italic and Emphasized Text
Use these tags to slant your text:
1. <i> – Italic (pure style)
<p>This word is in <i>italics</i> to make it look different.</p>2. <em> – Emphasized (italic with meaning)
<p>This is an <em>important</em> word that needs attention.</p>💡 Tip: Use <em> when the emphasis changes the tone or meaning of the sentence. It’s more semantic.
🔠 Underlined Text
The <u> tag is used to underline text:
<p>This is an <u>underlined</u> word.</p>🔔 Note: Be careful with underlines! On the web, underlined text often looks like a clickable link. Don’t confuse your users.
🟨 Highlighted Text with <mark>
To simulate a highlighter effect, use the <mark> tag:
<p>This is <mark>highlighted</mark> text to draw attention.</p>This is great for highlighting key points or terms.
❌ Deleted and ✅ Inserted Text
These tags help show what has been removed or added:
<del> – Deleted text (strikethrough)
<p>The old price was <del>$50</del>.</p><ins> – Inserted text (underlined by default)
<p>The new price is <ins>$35</ins>.</p>This is helpful when showing updates, changes, or revisions in content.
🔻 Subscript and Superscript Text
These are used mainly for scientific or mathematical expressions:
<sub> – Subscript (small text below the line)
<p>Chemical formula: H<sub>2</sub>O</p><sup> – Superscript (small text above the line)
<p>Math example: 4<sup>2</sup> = 16</p>These help present technical information accurately.
💡 Quick Reference Table
| Tag | Description | Visual Effect |
<b> | Bold (no importance) | Bold text |
<strong> | Important bold text | Bold with meaning |
<i> | Italic (no importance) | Italics |
<em> | Emphasized text | Italics with emphasis |
<u> | Underline | Underlined text |
<mark> | Highlight | Yellow highlight |
<del> | Deleted text | Strikethrough |
<ins> | Inserted text | Underlined (added) |
<sub> | Subscript | Text below line |
<sup> | Superscript | Text above line |
🧪 Practice Example with All Formatting Tags
<p>This is a <strong>strong</strong> and <em>emphasized</em> sentence with an <u>underlined</u> word.</p><p>We can also <mark>highlight</mark> key terms, show <del>removed</del> and <ins>added</ins> text, and write formulas like CO<sub>2</sub> or 2<sup>3</sup>.</p>Try copying and pasting this into your HTML editor to see the formatting in action!
✅ Summary
- Use
<strong>and<em>for important text that screen readers recognize. - Use
<b>and<i>for visual-only styling. - Use
<u>and<mark>to draw extra attention. - Use
<del>and<ins>to show changes. - Use
<sub>and<sup>for technical writing.
Learning to format text correctly makes your web pages easier to understand and visually appealing.
🚀 What’s Next?
In the next blog, we’ll cover how to add images to your webpage. You’ll learn how to insert pictures, control their size, add alternate text, and align them beautifully. See you in Blog 4!