HTML Text Formatting - Bold, Italic, Underline and More

📅 August 11, 2025

✍️ By Evans

Hey friends! 👋

In my last post, I wrote about Headings and Paragraphs — the basic way to structure your web page. Today, I'm moving on to something a bit more fun: text formatting.

This is where HTML lets you make your text bold, italic, <u>underlined</u>, or even <mark>highlighted</mark>. These tags make content easier to read and help you emphasize what's important.

🏷️ What Is Text Formatting?

Text formatting is how you style or emphasize parts of your text without using CSS. HTML gives you several simple tags to do this.

Here are the most common ones:

<b> - bold text  
<strong> - strong emphasis  
<i> - italic text  
<em> - emphasized text  
<u> - underlined text  
<mark> - highlighted text  
<small> - smaller text  
<del> - deleted text  
<ins> - inserted text  
<sub> - subscript  
<sup> - superscript
                        

These tags may look similar, but some carry extra meaning for search engines and accessibility tools. Let's look closer 👇

💪 Bold and Strong Text

To make text bold, use <b> or <strong>.

<p>This is <b>bold text</b>.</p>
<p>This is <strong>important text</strong>.</p>
                            

💡 Difference:

• <b> just makes the text bold visually.
;
• <strong> adds meaning — it tells browsers that the text is important.

📌 Tip: Use <strong> when you want to emphasize meaning, not just looks.

✨ Italic and Emphasized Text

Italic text can show quotes, thoughts, or emphasize words.

<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
                        

💡 Difference:

• <i> changes the appearance only.
• <em> adds stress or importance — great for accessibility.

📌 Tip: Use <em> when you want to stress a word's meaning.

🖊️ Underlining Text

If you want to underline something, use <u>.

<p>This is <u>underlined text</u>.</p>
                        

⚠️ Be careful! Underlined text often looks like a link, so use it only when needed.

🎨 Other Formatting Tags You'll Love

Here are a few more I discovered while experimenting:

<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>small text</small>.</p>
<p>This is <del>deleted</del> and this is <ins>inserted</ins> text.</p>
<p>Water is H<sub>2</sub>O and 2<sup>3</sup> equals 8.</p>
                        

💡 What They Do:

• <mark> → highlights text
• <small> → makes text smaller
• <del> → shows deleted content
• <ins> → shows newly added content
• <sub> → places text below the line (subscript)
• <sup> → places text above the line (superscript)

🧩 Example: All Together

Here's how it looks when you mix them:

<h1>HTML Text Formatting Example</h1>
<p>My name is <strong>Evans</strong>, and I'm learning <em>HTML</em> step by step.</p>

<p>Today I discovered how to <b>bold</b>, <i>italicize</i>, and <u>underline</u> text.</p>

<p>This journey has been <mark>amazing</mark> and I've <del>struggled</del> <ins>improved</ins> a lot!</p>

<p>Fun fact: The formula for water is H<sub>2</sub>O, and 2<sup>3</sup> equals 8.</p>

                        

Pretty neat, right? 😄

🧠 Things I've Learned

• <b> and <strong> both make text bold, but <strong> adds meaning
• <i> and <em> both italicize text, but <em> adds emphasis
• Use <u> carefully — it looks like a link
• Tags like <mark>, <small>, <del>, <ins>, <sub>, and <sup> are great for extra formatting details

😅 Beginner Mistakes I Made

• ❌ Using <b> and <i> everywhere just for design — CSS is for styling!
• ❌ Forgetting that <strong> and <em> have semantic meaning

📌 Final Thoughts

Text formatting may seem small, but it makes your HTML content readable and meaningful. It's the difference between plain text and well-structured text.

Once you understand these tags, your pages will look cleaner — and you'll be ready to style them properly with CSS.

👉 Next Up...

In my next post, I’ll explore HTML Lists — how to create ordered and unordered lists to organize information neatly.

Until then, keep practicing and have fun experimenting!

— Evans ✌️