HTML text formatting lets you style words and phrases inside paragraphs—bold, italic, highlighted, struck-through, and more. These inline elements change appearance and, when you choose semantic tags, add meaning that helps screen readers and search engines understand your content.
Understanding formatting tags is essential for readable, accessible web pages. This tutorial covers the most common tags, when to use each one, and how to combine them safely.
Bold text.
Italic text.
Highlight.
Edits.
Combine tags.
Semantic HTML.
HTML text formatting refers to inline elements that wrap part of a sentence or heading to change its style or meaning. Unlike block elements (like <p> or <h1>) that start on a new line, formatting tags flow inside existing text.
Tags fall into two groups:
<strong>, <em>, <mark>, <del>, <ins>).<b>, <i>, <u>).When in doubt, pick the semantic tag. <strong> instead of <b> and <em> instead of <i> helps everyone—including users who cannot see bold or italic styling.
| Visual effect | Semantic (preferred) | Presentational |
|---|---|---|
| Bold | <strong> — important | <b> — style only |
| Italic | <em> — stress | <i> — alternate voice |
| Underline | <ins> — inserted text | <u> — unarticulated annotation |
| Strikethrough | <del> — removed text | <s> — no longer accurate |
Browsers style these tags by default, but you can override appearance with CSS. Semantic meaning stays even if you change fonts or colors.
Use <strong>, <em>, and <mark> to draw attention while adding meaning:
<p>This is a <strong>bold statement</strong> with
<em>italic emphasis</em> and <mark>highlighted text</mark>.</p>Semantic tags help assistive technology and search engines interpret your page:
<p><strong>Important:</strong> Always validate user input.</p>
<p>She <em>really</em> loves coding.</p>Screen readers may pronounce <em> with different intonation. <strong> signals that the label “Important” is more than decoration—it introduces critical information.
Nested tags combine effects. Open and close in reverse order (like stacking boxes):
<p>This is <strong><em>very important</em></strong> text.</p>Result: bold and italic. Keep nesting shallow—two levels is usually enough.
When content changes over time, <del> and <ins> document what was removed and added:
<p>Price: <del>$99</del> <ins>$79</ins></p>
<p>Step 2: <del>Click Save</del> <ins>Click Publish</ins></p>Browsers strike through del and underline ins by default. Pair with datetime attributes for machine-readable timestamps when needed.
<strong> and <em> over <b> and <i> when meaning matters.<u> for links; use <a href> instead.mark or custom bold colors with CSS.| Goal | Tag | Example |
|---|---|---|
| Important text | <strong> | <strong>Warning</strong> |
| Stressed word | <em> | She <em>loves</em> it |
| Highlight | <mark> | <mark>search term</mark> |
| Fine print | <small> | <small>Terms apply</small> |
| Removed text | <del> | <del>old price</del> |
| Added text | <ins> | <ins>new price</ins> |
| Bold + italic | nested | <strong><em>text</em></strong> |
Six examples from a single emphasis line to a full formatting demo. Each includes View Output and Try It Yourself where noted.
Bold, italic, and highlight in one paragraph.
<p>This is a <strong>bold statement</strong> with
<em>italic emphasis</em> and <mark>highlighted text</mark>.</p>Each tag wraps only the words that need that style. The rest of the sentence stays normal paragraph text.
<p><strong>Important:</strong> Always validate user input.</p>
<p>She <em>really</em> loves coding.</p>strong labels the warning; em stresses the word “really” in the second sentence.
Nested tags and edit tracking.
<p>This is <strong><em>very important</em></strong> text.</p>em is inside strong, so the phrase is both bold and italic.
<p>Price: <del>$99</del> <ins>$79</ins></p>
<p><del>Deleted text</del> and <ins>inserted text</ins>.</p>Common on sale pages and documentation changelogs. See also del and ins tag tutorials.
<p>Main offer <small>(terms and conditions apply)</small></p>
<p>The word <u>correct</u> was misspelled above.</p>small shrinks legal or secondary notes. u underlines without implying a link.
A full page demonstrating the main formatting tags together:
<!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>Matches the classic tutorial conclusion—open Try It to edit and preview every tag in the browser.
<strong>Note:</strong> before critical instructions.del + ins for old and new prices.mark around matched keywords.del and ins.small for disclaimers.sub and sup for formulas.Start with <p> or a heading element.
Add inline tags around the phrase to format.
Default CSS makes strong bold, em italic, etc.
Formatted text with optional semantic meaning for SEO and a11y.
strong and em for meaningful emphasisdel / ins for real document changesu for navigation linksAll text formatting tags listed here are part of HTML5 and supported in every modern browser. Default styling (bold, italic, strikethrough) works without CSS.
All text formatting tags listed here are part of HTML5 and supported in every modern browser. Default styling (bold, italic, strikethrough) works without CSS.
Bottom line: Safe to use everywhere. Customize appearance with CSS; semantic roles remain in the DOM.
HTML text formatting gives you simple, built-in tools to emphasize words, highlight search terms, and show edits. Choose semantic tags when meaning matters, nest carefully, and keep accessibility in mind.
For deeper coverage of individual elements, explore strong, em, and mark. Next, learn how to add non-displayed notes with HTML comments.
Important.
SemanticStress.
SemanticHighlight.
SearchEdits.
RevisionsNot just style.
a11yBefore CSS was widely used, authors relied on <font> and <center> for styling. HTML5 removed many presentational tags in favor of semantic elements plus CSS. Text formatting tags like strong and em survived because they describe meaning, not just appearance.
Open Try It, wrap words with strong and em, and see bold and italic styling update live.
6 people found this page helpful