Beginner-Friendly Topic

Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!

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 , you are telling the browser AND Google that this text is important. When you use , 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.

20 min•By Priygop Team•Updated 2026

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:
• makes text bold AND marks it as important - screen readers may emphasize it
• makes text italic AND signals emphasis - like stressing a word when speaking
• highlights text with a yellow background - indicates relevance or search matches

Visual-only tags just change appearance without adding meaning:
• makes text bold but does NOT indicate importance
• makes text italic but does NOT indicate emphasis
• 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 and tags, but ignore and . 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)
• for subscript (chemical formulas like H₂O)
• for superscript (mathematical powers like x²)
• 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

Diagram

Loading diagram…

Prefer semantic tags (strong, em) over visual-only tags (b, i) for accessibility

Common Formatting Tags

- Bold text that is semantically IMPORTANT. Screen readers emphasize it. Use for key terms, warnings, or critical information. Google considers text slightly more relevant.
- Italic text with EMPHASIS. Screen readers change tone. Use when you want to stress a word, like 'You must save the file before closing.'
- 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).
- Italic text WITHOUT semantic meaning. Use for technical terms, foreign language words, or thoughts. Example: The French word bonjour means hello.
- 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.
- 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.
- Smaller text. Used for fine print, copyright notices, disclaimers, and legal terms. Not just about size - it carries semantic meaning of 'side comment'.
- Superscript text. Used for mathematical exponents (x²), footnote references (text¹), and ordinal indicators (1st, 2nd, 3rd).
- 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 and 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 Warning: Do not delete this file, it will read that sentence with extra emphasis - the listener knows it is important. But if you used Warning: Do not delete this file, 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 tags when determining what a page is about. Using 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 and . If you just want visual styling without semantic meaning, use and - 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

Try It Yourself: Text FormattingHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<body>
  <h1>Text Formatting Demo</h1>
  <p>Normal text here.</p>
  <p>This word is <strong>bold and important</strong>.</p>
  <p>This word is <em>italic with emphasis</em>.</p>
  <p>This is <mark>highlighted</mark>.</p>
  <p>Price: <s>₹500</s> <strong>₹299</strong> (30% OFF!)</p>
  <p>H<sub>2</sub>O is water. E=mc<sup>2</sup></p>
  <p><abbr title="Cascading Style Sheets">CSS</abbr> makes pages beautiful.</p>
  
  <!-- Try adding your own formatting below! -->
  <p>Try making this <b>bold</b> or <i>italic</i>!</p>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run (Ctrl+Enter)

HTML|16 lines|558 chars|✓ Valid syntax

UTF-8

Common Mistakes to Avoid

Using instead of for important content - If the text is genuinely important, always use . It helps SEO and accessibility.
Overusing (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 - 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: text. Wrong: text.

Quick Quiz

Key Takeaways

HTML provides a rich set of tags specifically designed to format and emphasize text in meaningful ways.
- Bold text that is semantically IMPORTANT. Screen readers emphasize it. Use for key terms, warnings, or critical information. Google considers text slightly more relevant.
- Italic text with EMPHASIS. Screen readers change tone. Use when you want to stress a word, like 'You must save the file before closing.'
- 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).

Formatting Text in HTML

HTML provides tags to both visually format text AND convey semantic meaning. This distinction is critical to understand.

Diagram

Loading diagram…

Prefer semantic tags (strong, em) over visual-only tags (b, i) for accessibility

Common Formatting Tags

- Bold text that is semantically IMPORTANT. Screen readers emphasize it. Use for key terms, warnings, or critical information. Google considers text slightly more relevant.

- Italic text with EMPHASIS. Screen readers change tone. Use when you want to stress a word, like 'You must save the file before closing.'

- 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).

- Italic text WITHOUT semantic meaning. Use for technical terms, foreign language words, or thoughts. Example: The French word bonjour means hello.

- 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.

- 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.

- Smaller text. Used for fine print, copyright notices, disclaimers, and legal terms. Not just about size - it carries semantic meaning of 'side comment'.

- Superscript text. Used for mathematical exponents (x²), footnote references (text¹), and ordinal indicators (1st, 2nd, 3rd).

- 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

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

Try It Yourself: Text FormattingHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<body>
  <h1>Text Formatting Demo</h1>
  <p>Normal text here.</p>
  <p>This word is <strong>bold and important</strong>.</p>
  <p>This word is <em>italic with emphasis</em>.</p>
  <p>This is <mark>highlighted</mark>.</p>
  <p>Price: <s>₹500</s> <strong>₹299</strong> (30% OFF!)</p>
  <p>H<sub>2</sub>O is water. E=mc<sup>2</sup></p>
  <p><abbr title="Cascading Style Sheets">CSS</abbr> makes pages beautiful.</p>
  
  <!-- Try adding your own formatting below! -->
  <p>Try making this <b>bold</b> or <i>italic</i>!</p>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run (Ctrl+Enter)

HTML|16 lines|558 chars|✓ Valid syntax

UTF-8

Common Mistakes to Avoid

Using instead of for important content - If the text is genuinely important, always use . It helps SEO and accessibility.

Overusing (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 - 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: text. Wrong: text.

Text Formatting Tags

Formatting Text in HTML

Common Formatting Tags

Semantic vs Visual - Why It Matters

Formatting Example

Try It Yourself: Text Formatting

Common Mistakes to Avoid

Quick Quiz

Key Takeaways

Topics in This Module

Text Formatting Tags

Formatting Text in HTML

Common Formatting Tags

Semantic vs Visual - Why It Matters

Formatting Example

Try It Yourself: Text Formatting

Common Mistakes to Avoid

Quick Quiz

Key Takeaways

Topics in This Module