HTML Text Formatting

Formatting tags make text more than just plain words — bold, italic, strikethrough, superscript, quotations. Each format has a corresponding semantic tag that changes both appearance and conveys meaning.

Bold and Italic

<b> makes text bold, and <i> makes text italic. However, HTML5 recommends using the semantic <strong> (indicating important content) and <em> (indicating emphasis), because browsers and search engines can understand their meaning, not just the visual styling.

<p><b>This is bold</b>, <i>this is italic</i></p>
<p><strong>This is important content</strong> (semantically important, not just styling)</p>
<p><em>This text needs emphasis</em> (read with stress by screen readers)</p>

Delete, Insert, and Highlight

<del> displays strikethrough, indicating content has been deleted; <ins> displays underline, indicating newly inserted content. Note that <u> also produces an underline effect, but <ins> carries the semantic meaning of "new addition", while <u> only changes appearance. Additionally, <mark> highlights text like a highlighter pen; <small> represents small-print additional notes, commonly used for disclaimers or copyright information.

<p>Original price: <del>$199</del> <ins>$129</ins></p>
<p>Don't forget the meeting <mark>tomorrow at 3 PM</mark>.</p>
<p><small>* The organizer reserves the right of final interpretation for this event.</small></p>

Additionally, the <pre> tag (preformatted text) preserves spaces and line breaks from the source code, making it perfect for displaying code snippets or simple ASCII art:

<pre>
+-------------------------+
|    Web-Tutorial.com     |
|   HTML·CSS·JavaScript  |
+-------------------------+
</pre>

Subscript and Superscript

<sub> displays text as subscript (lowered), and <sup> displays text as superscript (raised). They are commonly used in chemical formulas, mathematical equations, and footnotes.

<p>The chemical formula for water is H<sub>2</sub>O</p>
<p>Einstein's mass-energy equation: E=mc<sup>2</sup></p>
<p>Footnote for this article<sup>[1]</sup> is at the bottom of the page.</p>

Quotations and Special Text

These tags are specifically used to represent quotations, abbreviations, contact information, and other special content:

<!-- Block quotation -->
<blockquote>
  Life is like a box of chocolates, you never know what you're gonna get.
  <cite>— Forrest Gump</cite>
</blockquote>

<!-- Inline quotation -->
<p>Confucius said: <q>Learning without thinking leads to confusion; thinking without learning leads to peril.</q></p>

<!-- Abbreviation -->
<p><abbr title="World Wide Web">WWW</abbr> changed the world.</p>

<!-- Contact information -->
<address>
  Author: John Doe<br>
  Email: johndoe@example.com
</address>

<!-- Text direction -->
<p><bdo dir="rtl">This text displays from right to left</bdo></p>

📖 Summary

• <strong> indicates importance, <em> indicates emphasis — more semantic than <b> and <i>
• <del> strikethrough, <ins> semantic underline, <u> stylistic underline, <mark> highlight, <small> small print
• <sub> subscript, <sup> superscript, <pre> preserves spaces and line breaks
• <blockquote> block quote, <q> inline quote, <abbr> abbreviation, <address> contact info, <cite> work title, <bdo> text direction

📝 Exercises

1. Format a piece of text: Write a product promotion message including the original price (strikethrough), sale price (underlined insertion), discount note (small text), and a highlighted "Limited Time Offer" marker.
2. Chemical formulas and superscripts: Use <sub> and <sup> to write CO₂ and x² + y² = z².
3. Self-check: Open a news website in your browser, right-click "Inspect", and examine which HTML tags are used for quotes, emphasized text, and footnotes in the article. Can you tell which ones use <strong> and which use <b>?