HTML Text Formatting

 

HTML Text Formatting Tags (Bold, Italic, Underline, Strong, Emphasis)

In the last post we worked with headings and paragraphs to structure entire sections of content. Now let's zoom in even further  down to individual words and phrases within a sentence. This post is about text formatting tags how to make text bold italic underlined and how to correctly choose between visual tags and semantic tags. We will keep theory light and focus mostly on real testable examples.

Quick Theory: Two Kinds of Formatting Tags

HTML gives you two categories of formatting tags that often look identical in the browser but mean very different things under the hood: purely visual tags (like <b> and <i>) and semantic tags (like <strong> and <em>). Visual tags just change appearance. Semantic tags change appearance and tell browsers search engines and screen readers that the content has actual importance. Now let's see this in action.

Practical: Bold Text with <b> and <strong>

Try both of these in your test file.

<p>This uses the <b>bold tag</b> for styling only.</p>
<p>This uses the <strong>strong tag</strong> for real importance.</p>

Open this in your browser  both lines will look exactly the same, bold text in the middle of a sentence. But under the hood they are not equal. Use <strong> when the content genuinely matters (a warning a critical instruction a key term) and use <b> only when you want bold styling with no added meaning  which honestly is rare in real projects since CSS usually handles pure styling better anyway.

Try This: A Warning Message

<p><strong>Warning:</strong> Do not disconnect the power cable while the device is updating.</p>

This is a textbook use case for <strong>  the word Warning is genuinely important information that a screen reader should announce with emphasis not just render in bold visually.

Practical: Italic Text with <i> and <em>

<p>The <i>Titanic</i> was a British ship that sank in 1912.</p>
<p>I <em>really</em> need you to double-check this before submitting.</p>

Both render as italic text, but again the meaning is different. <i> is commonly used for things like book titles ship names or foreign words  text thats conventionally styled in italics without carrying extra emphasis. <em> on the other hand is for when you actually want to stress a word changing the meaning of the sentence if read aloud.

Try This: Compare the Meaning

<p>I <em>did</em> send the email.</p>
<p>I did send <em>the email</em> not the invoice.</p>

Read both sentences out loud stressing the italicized word each time. Notice how the meaning of the sentence actually shifts depending on which word carries the emphasis. Thats exactly what <em> is designed to represent  its not just decoration it changes how the sentence should be interpreted.

Practical: Underlined Text with <u>

<p>Please review the <u>attached document</u> before our meeting.</p>

Be careful with this one. On the web, underlined text is almost universally associated with links so using <u> on regular text can confuse users into thinking its clickable when it is not. A common more appropriate use case for <u> is marking spelling errors or annotations similar to how a proof reading tool underlines text.

Practical: Combining Multiple Formatting Tags

<p><strong>Important:</strong> Please read the <em>entire</em> agreement before signing.</p>

Tags can absolutely be combined within the same sentence and even nested inside each other when needed

<p><strong>This is <em>extremely</em> important.</strong></p>

Here, the entire sentence is wrapped in <strong> while the word extremely gets an additional layer of <em> inside it. Try this in your browser  you will see bold text with one italicized word right in the middle of it.

Practical: Small Text with <small>

<p>Buy now for $29.99 <small>Terms and conditions apply.</small></p>

The <small> tag is commonly used for fine print disclaimers or copyright notices content thats secondary to the main message but still needs to be included.

Practical: Marking Text with <mark>

<p>Search results for "HTML": Learn <mark>HTML</mark> basics in this beginner-friendly guide.</p>

Try this one in your browser  <mark> highlights text with a yellow background by default similar to using a highlighter pen. Its genuinely useful for showing search results or drawing attention to a specific term within a larger passage.

Practical: Strikethrough Text with <del> and <s>

<p>Price: <del>$60</del> $45 - Limited time offer!</p>

<del> represents content that has been deleted or is no longer accurate, which is exactly the use case for showing a discounted price. There's also <s>, which is purely visual strikethrough without the "this was deleted" meaning:

<p><s>Meeting moved to 3 PM</s> Meeting cancelled entirely.</p>

Practical: Superscript and Subscript

<p>E = mc<sup>2</sup></p>
<p>The chemical formula for water is H<sub>2</sub>O.</p>

Try these two lines in your browser - <sup> raises text slightly above the baseline (useful for exponents or footnotes), while <sub> lowers it (useful for chemical formulas or mathematical notation).

Practical: Building a Product Description Using Multiple Tags

Let's combine several of these tags into something closer to real content. Try this:

<h2>Wireless Headphones - Model X200</h2>
<p><strong>Now on sale:</strong> <del>$129.99</del> <strong>$89.99</strong></p>
<p>These headphones deliver <em>exceptional</em> sound quality with up to 30 hours of battery life.</p>
<p><mark>Free shipping</mark> on all orders this week.</p>
<p><small>Offer valid while supplies last. Terms apply.</small></p>

Open this in your browser - you should see a discounted price with the old price struck through, an emphasized word, a highlighted shipping note, and small print at the bottom. This kind of mix is extremely common on real e-commerce pages.

Practical: Building a Recipe Note Using Formatting Tags

<h2>Chocolate Chip Cookies</h2>
<p><strong>Prep time:</strong> 15 minutes <strong>Bake time:</strong> 12 minutes</p>
<p>Make sure your butter is <em>fully</em> softened before mixing, or the dough won't come together properly.</p>
<p><mark>Tip:</mark> Chill the dough for 30 minutes before baking for a thicker cookie.</p>

Try building your own version of this pattern with a recipe or instructions of your choice. Notice how using <strong> for labels like "Prep time" makes the content easier to scan quickly, even before any CSS styling is applied.

Mistake to Avoid: Using Formatting Tags for Layout

Here's something beginners commonly get wrong:

<!-- Don't do this -->
<p><b><br><br>This creates fake spacing using bold and line breaks.<br><br></b></p>

Formatting tags like <b>, <strong>, and <em> are meant for styling and emphasizing text, not for controlling spacing or layout. If you need spacing, that's what CSS margin and padding are for - we'll get into that properly once we reach the CSS series.

Mistake to Avoid: Overusing Bold and Italic

<!-- Don't do this -->
<p><strong>This entire paragraph is wrapped in strong tags, which defeats the purpose of using it to highlight something important, because now nothing stands out from anything else.</strong></p>

When everything is bold, nothing actually stands out. Use <strong> and <em> sparingly, on the specific words or phrases that genuinely need extra attention.

Your Turn: Practice Exercise

1. Write a short paragraph (three to four sentences) about any topic of your choice.
2. Bold one key term using <strong>.
3. Italicize one word using <em> to change the emphasis of a sentence.
4. Add a fake discounted price using <del> and a new price in <strong>.
5. Highlight one important phrase using <mark>.
6. Add a small disclaimer line at the end using <small>.
7. Open your file in the browser and check that everything renders as expected.

Quick Reference Table

• <b> - Bold text, visual only
• <strong> - Bold text, semantically important
• <i> - Italic text, visual only
• <em> - Italic text, semantically emphasized
• <u> - Underlined text (use carefully, avoid confusion with links)
• <small> - Fine print or secondary text
• <mark> - Highlighted text
• <del> - Deleted or outdated content (e.g. old price)
• <s> - Strikethrough, visual only
• <sup> / <sub> - Superscript and subscript

Conclusion

Text formatting tags might seem small compared to structural tags like headings and paragraphs, but they're what give your content personality and clarity at the sentence level. If you built the examples in this post, you now have practical experience with almost every commonly used text formatting tag in HTML. In the next post, we'll move on to "HTML Links: Complete Guide to Anchor Tags", where we'll cover everything about linking pages together, opening links in new tabs, and linking to specific sections of a page.