Are the and tags deprecated?

No. They were redefined in HTML5 with their own meanings: draws attention without adding importance, and marks an alternate voice. They are valid, but use and when you mean importance or emphasis.

Should I use to underline text?

Usually not. Underlined text looks like a link, which confuses readers. Use only for annotations like spelling errors, and use CSS text-decoration if you just want an underline for design.

What is the difference between and ?

Both look bold, but means the text is important, while only draws attention to it without extra importance.

Why do icon libraries use tags?

It's a short, convenient habit, not the meaning of the element. A with aria-hidden="true" is the more correct choice for decorative icons.

Should I use for book titles?

No. Titles of works belong in , which is also italic by default.

, & Tags in HTML – Meaning & Live Example

Quick facts

Category	Flow content, phrasing content, palpable content
Content model	Phrasing content
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLElement` (all three)

Syntax

<p>Add <b>flour</b> and <b>sugar</b>.</p>
<p>The word <i lang="fr">café</i> comes from French.</p>
<p>This word is <u class="spelling">mispeled</u>.</p>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	All three accept only the global attributes. Add `lang` to an <i> that holds a foreign phrase so screen readers pronounce it correctly.

Common examples

Keywords in a summary

 draws attention to words without making them more important.

<p>Our new range includes the <b>Trail Runner</b>, the <b>City Walker</b> and the <b>Summit Pro</b>.</p>

Foreign words and technical terms

 is for text in a different voice, such as foreign phrases, taxonomy names or thoughts. Add lang for foreign words.

<p>The cat's Latin name is <i lang="la">Felis catus</i>. That was a real <i lang="fr">déjà vu</i> moment.</p>

Marking a spelling mistake

 is for an unarticulated annotation, such as a misspelled word in a teaching example.

<p>Please correct this sentence: I <u class="spelling">recieved</u> the letter.</p>

<style>
  u.spelling { text-decoration: red wavy underline; }
</style>

The lead sentence of an article

A bold opening sentence is a classic use of .

<p><b>The city council approved the new park on Tuesday.</b> Work will start next spring…</p>

& vs &

They look the same by default, but say different things.  and  add meaning: importance and spoken stress.  and  only set text apart from its surroundings without saying it’s more important.

Ask yourself: would the meaning change if the formatting disappeared? If yes (a warning, a stressed word), use strong or em. If it’s a convention — a product name, a foreign word, a ship’s name — use b or i.

	<b> / <i>	<strong> / <em>
Adds importance or stress	No	Yes
Default look	Bold / italic	Bold / italic
Example	Product names, foreign words	Warnings, stressed words

Common mistakes to avoid

Using u for emphasis. Underlined text looks like a link and confuses visitors.
Using b for headings. Use real heading tags so the page has a structure.
Using i for icons.  is a habit from icon libraries; a  is more correct.
Using b or i only for design. If there’s no convention behind it, use CSS classes.

Accessibility & SEO tips

Add lang to foreign words in  so screen readers pronounce them correctly.
Avoid underlining anything that isn’t a link — it’s one of the most common usability complaints.
Bold and italic don’t boost SEO; use them to help readers scan.
Add a CSS class to b or i when you style them, such as , so you can change the look later without touching every page.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.

Related tags

Frequently asked questions