HTML text formatting means wrapping words or phrases in inline tags inside paragraphs, headings, and lists so the text is clearer in meaning—and usually in appearance—without writing CSS first.
What belongs in an HTML page?
Use tags such as <strong>, <em>, <mark>, <small>, <del>, and <ins> around the exact span that needs emphasis, highlight, or revision. Leave the rest of the sentence as normal text.
Semantic vs presentational tags
Prefer strong / em when importance or stress matters for meaning (screen readers and search engines can use that). Prefer b / i when the look is visual only (product names, foreign words without stress).
When should you use CSS instead?
Use CSS for colors, fonts, spacing, and brand styles. Keep HTML formatting tags for meaning and common defaults (bold, italic, highlight, strike-through).
Meaning first.
Ask: “Is this important or stressed?” If yes, reach for strong or em before b or i.
Underline ≠ link.
Visitors expect underlines on links. Use <a> for navigation; use u only for special annotations.
Hub vs tag pages.
This tutorial compares formatting tags side by side. Deep attribute notes live on each tag page (e.g. strong, em).
Syntax
HTML Syntax
Wrap the target text; close tags in reverse order when nesting:
HTML
<p>
<strong>Important:</strong>
She <em>really</em> loves
<mark>HTML</mark>.
</p>
<p>Price: <del>$99</del> <ins>$79</ins></p>
<p>This is <strong><em>very important</em></strong>.</p>
Reference
Core HTML Concepts
Common formatting tags and when to use them:
Tag
Typical look
Use when
<strong>
Bold
Important / serious content
<em>
Italic
Stressed emphasis in a sentence
<b>
Bold
Visual bold without extra importance
<i>
Italic
Alternate voice, terms, foreign words
<mark>
Highlight
Relevant / searched / noted text
<small>
Smaller
Side comments, fine print
<del>
Strike-through
Removed or outdated content
<ins>
Underline (often)
Newly inserted content
<u>
Underline
Annotation (not links)
<sub> / <sup>
Sub / superscript
Formulas, footnotes, ordinals
strong/em vs b/i
Pair
Prefer when…
strong over b
The bold text is a warning, key term, or must-read label
em over i
The italic word changes the stress of the sentence
b / i
You only need the look, not the meaning
Approach
How to Format Text in HTML
A practical workflow for page content:
Write the sentence in a <p> (or heading / list item).
Select only the words that need formatting.
Choose a tag by meaning first (strong, em, mark, del…).
Nest carefully if you need bold + italic; close inner tags first.
Use CSS classes for brand colors and fonts—keep tags for structure and meaning.
Goal
HTML pattern
Important label
<strong>Note:</strong> …
Stressed word
She <em>really</em> cares.
Highlight match
<mark>result</mark>
Sale price
<del>$99</del> <ins>$79</ins>
Bold + italic
<strong><em>…</em></strong>
Try it
Live Preview
Toggle formatting tags on a sample sentence and see the rendered result.
Checks wrap parts of the demo sentence with those tags.
Rendered
Code
HTML Examples
Six patterns: emphasis, semantic tags, nesting, revisions, small/u, and a full page.
Example 1 — strong, em, and mark
HTML
<p>This is a <strong>bold statement</strong> with
<em>italic emphasis</em> and <mark>highlighted text</mark>.</p>
Style carefully so underlines are not confused with links.
Example 6 — Complete HTML Page
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Text Formatting Example</title>
</head>
<body>
<h1>HTML Text Formatting Example</h1>
<p>This is an example of <strong>bold text</strong>,
<em>italic text</em>, and <u>underlined text</u>.</p>
<p>You can also <mark>highlight text</mark> or use
<small>smaller text</small>.</p>
<p><del>Deleted text</del> and <ins>inserted text</ins>
are also supported.</p>
</body>
</html>
This is an example of bold text, italic text, and underlined text.
You can also highlight text or use smaller text.
Deleted text and inserted text are also supported.
How It Works
One page can mix several formatting tags.
Each tag still wraps only the phrase it applies to.
Try It opens the editable full demo.
Next, style colors and fonts with CSS when you need a brand look.
Edge Cases & Pitfalls
Most formatting mistakes are about meaning, nesting, or mistaking style for structure.
semantic
Using b/i for everything
If the text is important or stressed, prefer strong / em.
nest
Mismatched closing tags
Close inner tags first. Invalid nesting can break the rest of the page.
link
Underlining non-links with u
Readers may think the text is clickable. Reserve underlines carefully.
css
Formatting whole layouts with tags
Do not wrap giant blocks in strong for “bold pages.” Use headings and CSS.
a11y
Over-emphasizing every word
If everything is strong/em, nothing stands out—and assistive tech gets noisy.
style
Expecting tags to set brand colors
Default looks vary slightly by browser. Use CSS when you need exact design.
Compatibility
Browser Support
Inline text formatting tags are Baseline HTML and work in all modern browsers. Prefer semantic tags for meaning; style with CSS when needed.
✓ Baseline · Widely available
HTML formatting tags
strong, em, mark, del, ins, and related inline elements are universally supported.
100%Formatting tags
Google ChromeAll versions · Desktop & Mobile
Full support
Mozilla FirefoxAll versions · Desktop & Mobile
Full support
Apple SafariAll versions · macOS & iOS
Full support
Microsoft EdgeAll versions · Chromium & Legacy
Full support
Internet ExplorerIE 6+ · Legacy environments
Full support
OperaAll modern versions
Full support
Text formattingUniversal
Bottom line: Choose tags by meaning first, then refine appearance with CSS.
Remember
Key Takeaways
Inline tags format phrases inside paragraphs and headings.
Prefer strong/em when meaning matters; use b/i for look-only cases.
mark, del, ins, small cover highlight, revisions, and fine print.
Nest carefully and leave brand styling to CSS.
One line: Wrap only the words that need meaning or emphasis—choose the tag for what the text means, not only how it looks.
Frequently Asked Questions
HTML text formatting means wrapping words or phrases in inline tags—such as strong, em, mark, and del—inside paragraphs and headings. The tags change meaning and usually appearance without needing CSS for basic effects.
Both often look bold. strong marks important content (warnings, key terms). b is presentational—use it when bold is visual only and strong would mislead assistive technology.
em means stressed emphasis and can change how screen readers speak the word. i is for alternate voice or mood (foreign words, technical terms) without strong stress. Prefer em when emphasis matters for meaning.
Use u sparingly. Underlines often look like links. Prefer the a element for links. u is fine for spelling annotations, certain proper names, or legal conventions—not for navigation.
del marks removed content; ins marks newly added content. Together they show revisions—sale prices, changelogs, and edited articles.
Yes. Nest properly and close in reverse order, e.g. <strong><em>very important</em></strong>. Avoid deep nesting—it hurts readability for people and assistive tech.
