← Back to Chapters

HTML Text Formatting

? HTML Formatting

⚡ Quick Overview

HTML formatting is used to style and structure text content on a webpage so it becomes more readable, meaningful, and visually appealing. It lets you emphasize words, highlight important information, and represent scientific or mathematical notations. Proper formatting also improves accessibility and SEO when semantic tags are used correctly.

? Key Concepts

  • <b> – Makes text bold (purely visual, no extra meaning).
  • <strong> – Marks important text; usually rendered bold and carries semantic meaning.
  • <i> – Italic text (visual emphasis only).
  • <em> – Emphasized text with meaning; often read differently by screen readers.
  • <mark> – Highlights text, often with a yellow background.
  • <small> – Renders text in a smaller size (fine print or side notes).
  • <del> – Shows deleted/removed text with a strikethrough.
  • <ins> – Shows inserted text, often underlined.
  • <sub> / <sup> – Subscript and superscript for formulas and footnotes.

? Syntax and Theory

Most formatting tags wrap around inline text. They do not break the flow of the paragraph but change the appearance and sometimes the meaning of the enclosed text.

Prefer semantic tags like <strong> and <em> when the text is important or needs emphasis. This helps assistive technologies (like screen readers) and search engines understand the structure and relevance of your content.

Subscript (<sub>) and superscript (<sup>) are essential for writing chemical formulas, mathematical expressions, and references, making content accurate and professional.

? Code Example

? View Formatting Tags Example 
<!-- Bold and italic formatting -->
<p>This is a <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>

<!-- Semantic formatting -->
<p><strong>Important</strong> message with <em>emphasis</em>.</p>

<!-- Highlighting and smaller text -->
<p>This is <mark>highlighted</mark> text.</p>
<p>Normal text with <small>smaller text</small>.</p>

<!-- Inserted and deleted text -->
<p><del>Old Price</del> <ins>New Price</ins></p>

<!-- Subscript and superscript -->
<p>Water formula is H<sub>2</sub>O and E = mc<sup>2</sup>.</p>

? Detailed Explanation

Using proper formatting tags improves both readability and accessibility. While <b> and <i> are purely visual, <strong> and <em> carry meaning. Screen readers may change their tone for <strong> or <em>, signaling importance or emphasis to users.

The <mark> tag is helpful when you want to call attention to key words or phrases, such as search terms in a results page. Subscripts and superscripts let you clearly display formulas like H<sub>2</sub>O or mc<sup>2</sup>, which keeps your content both precise and visually correct.

? More Inline Examples

  • <strong> for warnings: Warning: Do not refresh the page.
  • <mark> to highlight keywords: This word is highlighted for emphasis.
  • Math expression: The area of a circle is A = πr2.
  • <small> for disclaimers: *Terms and conditions apply.

? Live Output

? Formatted Text Preview

This is a bold text.

This is italic text.

Important message with emphasis.

This is highlighted text.

Normal text with smaller text.

Old Price New Price

Water formula is H2O and E = mc2

These examples show how formatting tags change the visual style and, in some cases, the semantic meaning of the text, without breaking the paragraph flow.

? Tips and Best Practices

  • Prefer <strong> and <em> over <b> and <i> when the text is important or needs emphasis.
  • Use <mark> sparingly to highlight only the most important words or phrases.
  • Avoid mixing too many formatting tags in a single sentence; it can become hard to read.
  • Use <sub> and <sup> for formulas, chemical symbols, and footnotes.
  • Keep formatting consistent across your page for a clean and professional look.

? Try It Yourself

  • Write a sentence that uses both strong and emphasis together.
  • Create a price tag using <del> and <ins>, for example: $99 $79.
  • Write a math formula using subscript and superscript: CO2, x3.
  • Highlight a keyword in a paragraph using <mark>.
  • Add a disclaimer at the bottom of your page using <small> for fine print.

? Summary

HTML formatting tags let you emphasize, highlight, and structure inline text. Visual tags like <b> and <i> change appearance, while semantic tags like <strong>, <em>, <del>, and <ins> also convey meaning to browsers, search engines, and assistive tools. When used thoughtfully, these tags greatly improve readability, accessibility, and the overall user experience of your web pages.