HTML: HTML Text Formatting
Last updated: 2026-09-08
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.
1. 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
▶ Try it Yourself<strong> and <em>. Screen readers treat them specially, making them more accessibility-friendly.
2. 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
▶ Try it Yourself3. <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
▶ Try it Yourself4. 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
▶ Try it Yourself5. Quotations and Special Text
These tags are specifically used to represent quotations, abbreviations, contact information, and other special content:
▶ Example
▶ Try it Yourself<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>?
