Text Formatting Tags
HTML provides a rich set of tags specifically designed to format and emphasize text in meaningful ways. These are not just about making text look different — they carry semantic meaning that helps browsers, search engines, and screen readers understand the importance and purpose of your content. For example, when you mark text with <strong>, you are telling the browser AND Google that this text is important. When you use <em>, you are indicating that the text should be emphasized. Understanding the difference between visual formatting and semantic meaning is what separates beginners from professionals. In this topic, you will learn every commonly used text formatting tag in HTML, when to use each one, and how they affect accessibility and SEO.
Formatting Text in HTML
HTML provides tags to both visually format text AND convey semantic meaning. This distinction is critical to understand.
Semantic tags tell the browser what the text MEANS:
• <strong> makes text bold AND marks it as important — screen readers may emphasize it
• <em> makes text italic AND signals emphasis — like stressing a word when speaking
• <mark> highlights text with a yellow background — indicates relevance or search matches
Visual-only tags just change appearance without adding meaning:
• <b> makes text bold but does NOT indicate importance
• <i> makes text italic but does NOT indicate emphasis
• <u> underlines text (use with caution — users may confuse it for a link)
Why does this matter? Search engines like Google read semantic tags to understand your content better. Screen readers (used by visually impaired people) change their voice tone for <strong> and <em> tags, but ignore <b> and <i>. Using the right tags improves both your SEO ranking and your website's accessibility.
Additionally, HTML provides special formatting tags for specific use cases:
• <del> and <s> for strikethrough text (showing deleted or outdated content)
• <ins> for inserted text (showing additions)
• <sub> for subscript (chemical formulas like H₂O)
• <sup> for superscript (mathematical powers like x²)
• <small> for fine print, disclaimers, or legal text
• <abbr> for abbreviations with a tooltip explanation
• <code> for inline code snippets
• <pre> for preformatted text that preserves whitespace and line breaks
Prefer semantic tags (strong, em) over visual-only tags (b, i) for accessibility
Common Formatting Tags
- <strong> — Bold text that is semantically IMPORTANT. Screen readers emphasize it. Use for key terms, warnings, or critical information. Google considers <strong> text slightly more relevant.
- <em> — Italic text with EMPHASIS. Screen readers change tone. Use when you want to stress a word, like 'You must save the file before closing.'
- <b> — Bold text WITHOUT semantic meaning. Use when you want visual boldness but the text is not particularly important (e.g., product names in a catalog).
- <i> — Italic text WITHOUT semantic meaning. Use for technical terms, foreign language words, or thoughts. Example: The French word <i>bonjour</i> means hello.
- <u> — Underlined text. Use sparingly! Users often assume underlined text is a clickable link. HTML5 recommends using it for proper nouns in Chinese or misspelled words.
- <mark> — Highlighted text with a yellow background. Perfect for search result highlighting or drawing attention to key phrases in a tutorial.
- <del> or <s> — Strikethrough text showing deleted or no-longer-relevant content. Common in e-commerce for showing original prices before discounts.
- <ins> — Underlined text marking newly inserted content. The opposite of <del>. Often used in document revision tracking.
- <small> — Smaller text. Used for fine print, copyright notices, disclaimers, and legal terms. Not just about size — it carries semantic meaning of 'side comment'.
- <sup> — Superscript text. Used for mathematical exponents (x²), footnote references (text¹), and ordinal indicators (1st, 2nd, 3rd).
- <sub> — Subscript text. Used for chemical formulas (H₂O, CO₂), mathematical notation, and scientific expressions.
- <abbr title='full form'> — Abbreviation with a tooltip. Hovering shows the full form. Example: <abbr title='HyperText Markup Language'>HTML</abbr>
Semantic vs Visual — Why It Matters
A common beginner mistake is thinking <b> and <strong> are the same because they both make text bold. Visually, yes — they look identical. But behind the scenes, they serve completely different purposes.
Imagine a visually impaired person using a screen reader to browse your website. When the screen reader encounters <strong>Warning: Do not delete this file</strong>, it will read that sentence with extra emphasis — the listener knows it is important. But if you used <b>Warning: Do not delete this file</b>, the screen reader would read it in a normal voice — the listener would miss the urgency.
Similarly, Google's search algorithm gives slightly more weight to text wrapped in <strong> tags when determining what a page is about. Using <strong> strategically on your most important keywords can have a small but positive effect on your SEO.
The rule of thumb: If the text is genuinely important or emphasized, use <strong> and <em>. If you just want visual styling without semantic meaning, use <b> and <i> — or better yet, use CSS for purely visual changes.
Formatting Example
<!DOCTYPE html>
<html>
<body>
<h1>Text Formatting Demo</h1>
<!-- Semantic tags (important + visual) -->
<p>This text is <strong>bold and important</strong>.</p>
<p>This text is <em>italic with emphasis</em>.</p>
<!-- Visual-only tags -->
<p>This is <b>bold but not important</b>.</p>
<p>This is <i>italic without emphasis</i>.</p>
<!-- Other formatting -->
<p>This is <u>underlined</u> text (use sparingly!).</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <s>strikethrough</s> text.</p>
<p>This is <small>small fine-print</small> text.</p>
<!-- Scientific & Math -->
<p>Water formula: H<sub>2</sub>O</p>
<p>Einstein: E = mc<sup>2</sup></p>
<!-- Combining tags -->
<p><strong><em>Bold AND italic together</em></strong></p>
<!-- Abbreviation with tooltip -->
<p>Learn <abbr title="HyperText Markup Language">HTML</abbr> today!</p>
</body>
</html>Try It Yourself: Text Formatting
Common Mistakes to Avoid
- Using <b> instead of <strong> for important content — If the text is genuinely important, always use <strong>. It helps SEO and accessibility.
- Overusing <u> (underline) — Users automatically assume underlined text is a clickable link. Use CSS text-decoration instead if you must underline.
- Using heading tags (<h1>-<h6>) just to make text big — Headings are for structure, not size. Use CSS font-size for visual sizing.
- Forgetting to close formatting tags — <strong>text without closing creates invalid HTML and may break the rest of the page.
- Nesting tags incorrectly — Always close inner tags before outer tags. Correct: <strong><em>text</em></strong>. Wrong: <strong><em>text</strong></em>.
Quick Quiz
Key Takeaways
- HTML provides a rich set of tags specifically designed to format and emphasize text in meaningful ways.
- <strong> — Bold text that is semantically IMPORTANT. Screen readers emphasize it. Use for key terms, warnings, or critical information. Google considers <strong> text slightly more relevant.
- <em> — Italic text with EMPHASIS. Screen readers change tone. Use when you want to stress a word, like 'You must save the file before closing.'
- <b> — Bold text WITHOUT semantic meaning. Use when you want visual boldness but the text is not particularly important (e.g., product names in a catalog).