HTML Text Formatting

Learn HTML text formatting the right way. Understand strong vs b, em vs i, the HTML mark tag, del, ins, small, and how to pick the right tag every single time.

You have already learned how to build headings, paragraphs, and a solid page structure. Now it is time to go one level deeper. HTML text formatting is what lets you give meaning and style to the words inside your paragraphs.

And here is the thing most beginners miss: not every formatting tag is about how text looks. Some tags tell the browser, screen readers, and even Google what the text means. That is the difference between good HTML and great HTML.

In this tutorial, you will learn every important text formatting tag, when to use each one, and most importantly, why the right tag matters.

01What Is HTML Text Formatting?

HTML text formatting means wrapping your text in specific tags to change how it appears or what it means. You can make text bold, italic, highlighted, crossed out, underlined, smaller, and more.

But unlike CSS, which only changes appearance, some HTML formatting tags carry semantic meaning. This is a concept you explored in our guide on what is semantic HTML and why it matters. The same idea applies here: the tag you pick should match what the content actually means.

Let us start with the most commonly used ones.

02Bold Text in HTML: `` vs ``

This is where most beginners get confused. Both tags make text look bold. But they are not the same thing.

The `` Tag: Bold with Meaning

The  tag marks text as important. It tells the browser, the screen reader, and search engines that this content carries real weight. Screen readers may even change their tone when they hit a  tag.

Use  when the text is genuinely critical, like a warning, a key term, or something the reader must not miss.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Strong Tag Example</title>
</head>
<body>
  <p>Before saving your file, <strong>always back up your data</strong>.</p>
</body>
</html>

The `` Tag in HTML: Bold Without Meaning

The b tag in HTML also makes text bold, but it carries no semantic meaning. It is purely visual. Use it when you want something to stand out stylistically, but it is not actually more important than the surrounding text.

A good example is product names, keywords in a glossary list, or highlighted terms in a UI that do not need to be read with extra emphasis.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>B Tag Example</title>
</head>
<body>
  <p>The recipe calls for <b>two cups of flour</b> and <b>one egg</b>.</p>
</body>
</html>

Strong vs B: A Quick Comparison

Tag	Visual Result	Has Semantic Meaning?	When to Use
<strong>	Bold text	Yes, marks importance	Critical info, warnings, key terms
<b>	Bold text	No, purely visual	Style-only bold, no extra importance

Quick rule: Ask yourself, “Is this text actually more important than the rest?” If yes, use . If you just want it to look bold, use .

03Italic Text in HTML: `` vs ``

Just like with bold, HTML gives you two italic tags. And again, they look the same but mean different things.

The `` Tag: Stress Emphasis

The  tag stands for emphasis. It tells browsers and screen readers to stress that word. This changes the meaning of a sentence.

Read these two sentences out loud. Notice how the stress shifts the meaning:

Live Preview

I never said she stole the money. (Someone else said it.)

I never said she stole the money. (Maybe she borrowed it.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Em Tag Example</title>
</head>
<body>
  <p>I never said <em>she</em> stole the money.</p>
  <p>I never said she <em>stole</em> the money.</p>
</body>
</html>

The `` Tag: Italic Without Emphasis

The  tag makes text italic but does not add stress or importance. It is used for things like technical terms, foreign phrases, titles of works, or a character’s inner thoughts in fiction.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>I Tag Example</title>
</head>
<body>
  <p>The scientific name for humans is <i>Homo sapiens</i>.</p>
  <p>She thought, <i>this is going to take forever</i>.</p>
</body>
</html>

So em vs i really comes down to this: does the italic serve a meaning that affects how the text is read? If yes, use . If it is just a stylistic or conventional use of italic, use .

04Underline in HTML: The `` Tag

The  tag underlines text. But be careful with it. On the web, underlined text almost always signals a link. If you underline non-link text, users may get confused and click it expecting something to happen.

The best use cases for  are things like spelling error annotations or proper nouns in certain languages where underlining is a convention.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>U Tag Example</title>
</head>
<body>
  <p>The word <u>teh</u> is a common typo for "the".</p>
</body>
</html>

Warning: Avoid using  to style decorative underlines. Use CSS text-decoration for that instead. Reserve the HTML tag for semantic uses like marking misspellings.

05Highlight Text with the HTML Mark Tag

The HTML mark tag is one of the most underrated formatting elements. It highlights text with a yellow background by default, but more importantly, it says: “this text is relevant in the current context.”

Think of it like the highlighter you use when studying. You are not saying the text is important in general, you are saying it is relevant right now, for example in a search result where you want to show what the user searched for.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mark Tag Example</title>
</head>
<body>
  <p>Your search for "HTML" returned this result:</p>
  <p>Learn <mark>HTML</mark> from scratch and build real web pages.</p>
</body>
</html>

Live Preview

Your search for “HTML” returned this result:

Learn HTML from scratch and build real web pages.

You can also style the  tag with CSS to match your site’s colors instead of the default yellow. For example, using a purple highlight to match a dark theme.

06Fine Print with the `` Tag

The  tag makes text appear smaller than the surrounding text. Its semantic meaning is “side comments,” “legal disclaimers,” or “fine print.” It is not for making text smaller for visual reasons, it is for content that is secondary or subordinate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Small Tag Example</title>
</head>
<body>
  <p>Get started for free today!</p>
  <p><small>* Free plan includes 5 projects. Credit card required after trial.</small></p>
</body>
</html>

Live Preview

Get started for free today!

* Free plan includes 5 projects. Credit card required after trial.

07Tracking Edits with `<del>` and `<ins>`

These two tags are made for showing document edits, like a tracked-changes feature in a word processor.

The <del> tag marks text that has been deleted or is no longer accurate. It renders with a strikethrough. The <ins> tag marks text that was inserted or added, and it renders with an underline by default.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Del and Ins Example</title>
</head>
<body>
  <p>The meeting is on <del>Tuesday</del> <ins>Wednesday</ins>.</p>
  <p>Original price: <del>$99</del> Now only <ins>$49</ins>!</p>
</body>
</html>

Live Preview

The meeting is on ~~Tuesday~~ Wednesday.

Original price: ~~$99~~ Now only $49!

You will often see <del> used on pricing pages to show the original price crossed out. While that is common, remember the semantic intent is to indicate removed or replaced content, not just strikethrough styling. For purely decorative strikethrough, use CSS instead.

08More Useful Text Formatting Tags You Should Know

Beyond the most common ones, HTML has a few more formatting tags that come in very handy depending on what you are building.

Superscript and Subscript: `` and ``

These are perfect for math formulas, chemical equations, footnote references, and ordinal numbers.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sup and Sub Example</title>
</head>
<body>
  <p>The area of a circle is &pi;r<sup>2</sup>.</p>
  <p>Water is H<sub>2</sub>O.</p>
  <p>This is a footnote reference.<sup>1</sup></p>
</body>
</html>

Live Preview

The area of a circle is πr².

Water is H₂O.

This is a footnote reference.¹

Abbreviations: `<abbr>`

The <abbr> tag is great for accessibility and user experience. Wrap any abbreviation with it and use the title attribute to show the full meaning on hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Abbr Tag Example</title>
</head>
<body>
  <p>We built this page using <abbr title="HyperText Markup Language">HTML</abbr>.</p>
</body>
</html>

Inline Code: `<code>`

The <code> tag is used for inline code snippets inside a sentence. It switches the font to monospace and signals to browsers and assistive tools that this is computer code or a technical term.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Code Tag Example</title>
</head>
<body>
  <p>Use the <code>font-size</code> property in CSS to change text size.</p>
</body>
</html>

09When Semantics Actually Matter

You might be thinking: who cares if I use  instead of ? The page looks the same.

But two groups care a lot about the difference:

Screen readers: People who use assistive technology to navigate the web rely on semantic tags to understand content. A screen reader might pause and stress a  word differently. It will not do that for a  tag.

Search engines: Google uses semantic signals to understand what your content is about. Words wrapped in  carry more weight than plain bold text. This connects directly to what we covered in our article on semantic HTML and SEO.

HTML text formatting, when done right, is not just about looks. It is about communication at every level: to users, to browsers, and to machines.

10Choosing the Right Tag for the Right Job

Here is a simple way to think about every HTML formatting decision you make:

Ask two questions: “What does this text mean?” and “What do I want it to look like?” If the meaning question has a clear answer, let it drive your tag choice. Use CSS if you only care about appearance.

Quick Reference: HTML Text Formatting Tags

Bold
Semantically important text

Bold
Bold text, no extra meaning

Italic
Stressed emphasis, changes meaning

Italic
Italic text, no stress intended

Highlighted
Contextually relevant text

Small text
Fine print, side comments

<del>
~~Deleted~~
Removed or outdated content

<ins>
Inserted
Added or corrected content

X²
Superscript, exponents, footnotes

H₂O
Subscript, chemical formulas

<abbr>
Ex.
Abbreviations with full label on hover

Underlined
Annotations, misspellings, conventions

<code>
code snippet
Inline technical code terms

11A Complete Example: Putting It All Together

Here is a real-world example that uses several of these tags in one complete page. Read through it and notice how each tag plays a different role.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Announcement</title>
</head>
<body>

  <h1>Introducing ProPlan 2.0</h1>

  <p>
    We are excited to launch <strong>the biggest update in our history</strong>.
    This release includes everything you asked for.
  </p>

  <p>
    The new dashboard uses <i>real-time</i> data syncing powered by our
    <abbr title="Application Programming Interface">API</abbr> v3.
    You can now connect up to <mark>10 workspaces</mark> in a single account.
  </p>

  <p>
    Pricing update: <del>$79/month</del> is now <ins><strong>$49/month</strong></ins> for all existing users.
  </p>

  <p>
    <em>Act now</em> — this limited price locks in <b>forever</b> for early adopters.
  </p>

  <p>
    Requires <abbr title="Operating System">OS</abbr> version 12<sup>+</sup> or higher.
  </p>

  <p>
    <small>* Prices shown in USD. Offer valid until March 31st. See terms and conditions for details.</small>
  </p>

</body>
</html>

Look at how each tag pulls its own weight.  marks what truly matters.  creates the right sense of urgency. <del> and <ins> show the price change clearly.  draws the eye.  keeps the disclaimer honest without distracting from the main message.

This is what good HTML text formatting looks like in practice.

12Common Mistakes to Avoid

A few things beginners often get wrong with text formatting tags:

Using  for everything bold. If the text is genuinely important, use . Save  for bold that is just visual.

Nesting the wrong tags. You can combine tags, like really important!, and that is fine. Just make sure you close them in the right order.

Using  for style. Users will think underlined text is a link. Use CSS for decorative underlines.

Forgetting <abbr>. This tiny tag makes your content far more accessible. If you use abbreviations, wrap them.

Using <del> purely for strikethrough decoration. If you just want strikethrough for style, CSS text-decoration: line-through is the right call. Understanding when to reach for HTML tags versus CSS is a skill that comes from knowing what we covered in our guide on HTML tags, elements, and attributes.

13Finalizing the Topic

You now have a complete picture of HTML text formatting. You know the difference between tags that are visual and tags that carry meaning. That distinction will make your HTML cleaner, more accessible, and better understood by search engines.

Every tag has a job. Give them the right jobs and your content will communicate clearly at every level.

In the next tutorial, we’ll explore inline and block elements. Understanding how these two types of elements work will help you see how content flows on a page and how layouts are built.