Text Formatting in HTML – Explanation
HTML provides several tags to change how text looks and to give it meaning (semantic importance).
Text formatting tags can be presentational (just for style) or semantic (carry meaning for search engines & accessibility).
1. Bold Text
<b>→ Makes text bold (style only, no extra meaning).<strong>→ Bold with semantic meaning (important text).
<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>
2. Italic Text
<i>→ Italic style only.<em>→ Italic with emphasis (semantic).
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
3. Underlined Text
<u>→ Underlines text (style only).
<p>This is <u>underlined</u> text.</p>
4. Highlighted Text
<mark>→ Highlights text (yellow by default).
<p>This is <mark>highlighted</mark> text.</p>
5. Smaller or Subscript/Superscript Text
<small>→ Makes text smaller.<sub>→ Subscript (below baseline, like chemical formulas).<sup>→ Superscript (above baseline, like exponents).
<p>Water is H<sub>2</sub>O.</p>
<p>2<sup>3</sup> = 8</p>
6. Deleted & Inserted Text
<del>→ Shows deleted text (strike-through).<ins>→ Shows inserted/added text (underline by default).
<p>This is <del>wrong</del> <ins>correct</ins>.</p>
7. Other Text Styles
<code>→ Displays code in monospace font.<pre>→ Preserves spaces, tabs, and line breaks exactly as typed.<blockquote>→ Long quotation block (indented).<q>→ Short quotation (adds quotation marks).<abbr>→ Abbreviation with tooltip.
<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
Example Putting It All Together
<p>This is <strong>important</strong> and <em>emphasized</em> text.</p>
<p>Here is <mark>highlighted</mark> text and <u>underlined</u> text.</p>
<p>Formula: CO<sub>2</sub> and E = mc<sup>2</sup></p>
<p>Price: <del>$50</del> <ins>$30</ins></p>
