HTML Text Formatting: b, i, em, strong, and More

HTML text formatting tags let you add meaning and emphasis to words and phrases without relying only on visual style. This article explains the most common formatting elements, when to use each one, and how to write them in a way that is both semantic and accessible.

Quick answer: Use for important text, for emphasized text, and or only when you want visual styling without adding extra meaning. Prefer semantic tags when possible.

Difficulty: Beginner

You'll understand this better if you know: basic HTML elements, how tags wrap content, and the difference between meaning and appearance.

1. What Are HTML Text Formatting Elements?

HTML text formatting elements change how text is presented, and in some cases they also communicate meaning to browsers, assistive technologies, and search engines. The most commonly used tags include , , , , , , , , , and <s>.

marks text as important.
marks text as stressed or emphasized.
makes text visually bold without implying importance.
makes text visually italic without implying emphasis.
Other tags such as and cover specific formatting needs.

These elements are often used inside paragraphs, headings, lists, and other text containers.

2. Why HTML Text Formatting Matters

Formatting is not just about making text look different. In HTML, the tag you choose can affect how content is understood by screen readers, search tools, browser defaults, and future maintainers of the page.

For example, a word in may be announced differently by a screen reader than a word wrapped in . That difference matters when the text is truly important, such as warnings, key instructions, or legal notices.

Use formatting tags when you want to communicate one of these ideas:

importance
emphasis
alternate voice or tone
highlighted reference text
typographic changes such as superscripts or subscripts

Do not use HTML text formatting only as a substitute for design. If the goal is purely visual styling, CSS is usually the better tool.

3. Basic Syntax or Core Idea

Most formatting elements wrap text directly. The general pattern is an opening tag, the content, and a closing tag.

Simple bold and italic examples

Here is the minimal structure for a few common elements:

<p>This is <strong>important</strong> text and this is <em>emphasized</em> text.</p>

This example shows the semantic versions of bold and italic styling. The browser usually renders in bold and in italics, but their real value is the meaning they add.

Presentational versus semantic tags

You may also see and used for formatting. They are valid HTML, but they do not imply importance or emphasis in the same way.

<p><b>Bold-looking</b> text and <i>italic-looking</i> text.</p>

Use these when the style matters more than the meaning, such as product names, foreign phrases, or text that should simply stand out visually.

4. Step-by-Step Examples

Example 1: Emphasizing a key warning

When a sentence contains an important instruction, is often the best choice.

<p><strong>Warning:</strong> Save your work before closing the tab.</p>

This makes the warning visually stronger and tells assistive tools that the text is important.

Example 2: Stressing a word in a sentence

Use when the stress changes the meaning of the sentence.

<p>I said I would <em>try</em>, not promise.</p>

Here the emphasis changes the tone and intent of the sentence, which is exactly what is for.

Example 3: Highlighting search results

is useful when you want to call attention to a matched term or highlighted phrase.

<p>Your search returned the word <mark>formatting</mark> in several places.</p>

This tag is often used in search interfaces, documentation, and review tools.

Example 4: Showing subscript and superscript

Scientific and mathematical text often uses and .

<p>Water is H<sub>2</sub>O and 2<sup>3</sup> is eight.</p>

These tags are better than trying to fake the layout with spaces or punctuation.

Example 5: Small print and edits

The and <s> elements are useful for fine print and outdated content.

<p>See our pricing page for details.</p>
<p><small>Terms and conditions apply.</small></p>
<p>Original price: <s>$29</s> Sale price: $19</p>

This example shows two common uses: legal or secondary text, and content that is no longer accurate.

5. Practical Use Cases

Product pages that need important labels such as New or Limited offer.
Documentation that needs to emphasize steps, warnings, or required fields.
Articles that highlight terms, definitions, or search matches.
Science or math content using subscript and superscript notation.
UI text where part of a sentence should stand out without changing the whole paragraph style.

In each case, choose the tag based on the meaning of the text, not just how you want it to look.

6. Common Mistakes

Mistake 1: Using when the text is truly important

only changes the visual appearance. If the content is important, that meaning should be preserved in the markup.

Problem: This code makes a safety instruction look bold, but it does not communicate importance to assistive technologies.

<p><b>Do not unplug the device during updates.</b></p>

Fix: Use when the content is important.

<p><strong>Do not unplug the device during updates.</strong></p>

The corrected version is better because it conveys both importance and the default bold styling.

Mistake 2: Using for emphasis

Many beginners use italics for emphasis automatically, but is not the semantic tag for stressed speech.

Problem: This markup makes the sentence italic, but it does not tell the browser that the word is stressed.

<p>This is <i>very</i> important.</p>

Fix: Use when you want emphasis in the meaning of the sentence.

<p>This is <em>very</em> important.</p>

The corrected version works because the content now carries the intended emphasis.

Mistake 3: Using formatting tags for layout instead of CSS

Formatting elements should not be used as a replacement for styling an entire page section. If the goal is to color text, set spacing, or control font size globally, CSS is the right tool.

Problem: This markup tries to use formatting elements to solve a layout problem, which makes the HTML harder to maintain.

<p><strong>Section title</strong></p>
<p>Lots of content that really needs consistent styling across the page.</p>

Fix: Keep semantic markup in HTML and handle presentation with CSS classes in your stylesheets.

<h2 class="section-title">Section title</h2>
<p>Lots of content that really needs consistent styling across the page.</p>

The corrected version is easier to maintain because structure and presentation are separated.

7. Best Practices

Practice 1: Choose meaning before appearance

Ask whether the content is important, emphasized, or only visually different. That decision tells you whether to use , , , or .

<p><strong>Required:</strong> Enter your email address.</p>

This is better than using a generic bold style because the meaning is preserved.

Practice 2: Use and sparingly

If too many words are emphasized, nothing stands out. Reserve semantic emphasis for content that truly needs it.

<p>Please review the <strong>payment details</strong> before continuing.</p>

This keeps the important phrase noticeable without turning the whole paragraph into visual noise.

Practice 3: Use the right element for the content type

Use specialized tags when they describe the content more accurately than a generic style tag.

<p>CO<sub>2</sub> emissions rose over time.</p>
<p>The answer was <mark>42</mark>.</p>

Using precise elements helps both readers and automated tools understand the content better.

8. Limitations and Edge Cases

and usually affect screen-reader pronunciation or emphasis, but behavior can vary by assistive technology.
and are valid, but they do not add meaning the way semantic tags do.
Nested formatting can become hard to read if overused, especially when several tags overlap.
is often misunderstood because underlining can look like a link; avoid it unless underlining is truly the intended presentation or meaning.
<s> indicates content that is no longer accurate, not just text that should appear gray or faded.
Some formatting should be handled by CSS or by more specific HTML elements such as <cite>, <abbr>, or <code> when appropriate.

Warning: Avoid using formatting tags to hide important information from users. If text must remain visible, do not mark it as decorative when it actually carries meaning.

9. Practical Mini Project

Here is a small example of a product notice that uses several text formatting elements correctly. It shows important text, emphasized wording, and a discounted price.

<article>
  <h2>Subscription Update</h2>
  <p><strong>Important:</strong> Your plan renews on <strong>March 12</strong>.</p>
  <p>If you want to avoid renewal, <em>cancel before the renewal date</em>.</p>
  <p>Original price: <s>$12</s> Current price: $8</p>
  <p><small>Taxes and fees may apply.</small></p>
</article>

This example combines structural HTML with formatting tags so that the message is clear, readable, and accessible. The important date and notice stand out, the cancellation instruction is emphasized, and the old price is clearly shown as outdated.

10. Key Points

means important, not just bold.
means emphasized, not just italic.
and change appearance but add little or no semantic meaning.
Use specialized tags such as , , and when they match the content.
Choose semantic HTML first, then use CSS for pure visual styling.
Overusing formatting tags reduces clarity and makes content harder to maintain.

11. Practice Exercise

Rewrite the following sentence using the most appropriate formatting tags:

The word urgent should be visually and semantically important.
The phrase double-check the address should be emphasized.
The text old price should be shown as no longer current.

Expected output: A paragraph that uses , , and <s> appropriately.

Hint: Think about meaning first, then pick the tag that best matches that meaning.

Solution:

<p><strong>Urgent</strong>: please <em>double-check the address</em> before continuing. The <s>old price</s> is no longer valid.</p>

12. Final Summary

HTML text formatting elements help you shape meaning as well as appearance. The most important distinction to remember is that and carry semantic meaning, while and are mainly presentational.

When you choose the right element, your content becomes clearer for readers, easier for assistive technologies to interpret, and easier for other developers to maintain. For most modern HTML, semantic formatting is the best default, and CSS should handle styling that does not change meaning.

Next, practice spotting the difference between importance, emphasis, and simple visual styling in real content. That habit will help you write better HTML everywhere.