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.
Example
<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>
<strong> and <em>. Screen readers treat them specially, making them more accessibility-friendly.
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.
Example
<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>
<pre> Preformatted Text
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:
Example
<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.
Example
<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:
Example
<!-- 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>
<blockquote> is a block-level element, and the browser adds indentation to it; <q> is an inline element, and the browser automatically adds quotation marks. When used with the title attribute, <abbr> shows the full text on mouse hover. <bdo dir="rtl"> makes text flow from right to left, suitable for Arabic and similar scripts.
❓ FAQ
<strong> and <b> both create bold text, <em> and <i> both create italic — what's the difference?<strong> means "this text is important," and <em> means "this text needs emphasis" — they convey meaning beyond appearance. <b> just "makes text bold," and <i> just "makes text italic" — they only affect visuals. Search engines and screen readers recognize <strong> and <em> but ignore <b> and <i>. Rule of thumb: use <strong>/<em> for meaningful emphasis; use <b>/<i> or CSS for purely visual styling.<del>, <ins>, and <u>?<del> shows strikethrough text, indicating deleted or outdated content — it carries semantic meaning. <ins> shows underlined text, indicating newly inserted content — it also has "addition" semantics. <u> just adds an underline, purely visual. In HTML5, <u> usage is restricted because it easily confuses with links (which are underlined by default). To show deletion, use <del>; to show insertion, use <ins>; avoid <u>.<blockquote> vs <q>?<blockquote> is a block-level element for long quotes (usually a standalone paragraph or multiple paragraphs) — the browser automatically indents it. <q> is an inline element for short quotes (a sentence or a few words) — the browser automatically adds quotation marks. Simple rule: long quotes use <blockquote>, short quotes use <q>. If the quote has a source, add <cite> inside <blockquote> to credit it.📖 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
- 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.
- Chemical formulas and superscripts: Use
<sub>and<sup>to writeCO₂andx² + y² = z². - 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>?