HTML Text Formatting Tags
Master all 10 HTML text formatting tags — bold, italic, strong, em, mark, small, del, ins, sub, and sup — with examples, live previews, and the key difference between semantic and visual tags.
- What are Formatting Tags?
- Semantic vs Visual
- b & strong (Bold)
- i & em (Italic)
- mark (Highlight)
- small (Smaller)
- del (Strikethrough)
- ins (Underline)
- sub (Subscript)
- sup (Superscript)
- All Tags Together
- Try It Yourself
What are HTML Formatting Tags?
HTML text formatting tags are used to define the visual appearance and semantic meaning of text on a webpage. They let you make text bold, italic, highlighted, struck through, or sized differently — improving both readability and accessibility.
Semantic vs Visual Tags
This is the most important concept in text formatting. HTML has two types of formatting tags:
Only changes appearance. Screen readers and search engines treat this as regular text.
Adds semantic meaning. Screen readers stress these words. Search engines give them more weight.
Best Practice: Always prefer <strong> over <b> and <em> over <i> in modern HTML5. They produce the same visual result but carry semantic meaning that helps SEO and screen readers.
Bold Text — <b> and <strong>
<b> — Visual Bold Visual only
The <b> tag makes text visually bold without adding any semantic importance. Use it when you want bold styling for decorative purposes — not to mark something as important.
<strong> — Important Text ⭐ Semantic
The <strong> tag marks text as critically important. It looks the same as <b> but tells browsers, screen readers, and search engines: "this content is important."
<!-- Visual bold — no special meaning --> <p>This is <b>bold text</b> using the b tag.</p> <!-- Semantic bold — marks important content --> <p>Please <strong>do not share your password</strong> with anyone.</p>
This is bold text using the b tag.
Please do not share your password with anyone.
Italic Text — <i> and <em>
<i> — Visual Italic Visual only
The <i> tag displays text in italic style. Use it for technical terms, foreign words, titles of books/films, or any text that needs to be in a different voice from the surrounding content.
<em> — Emphasized Text ⭐ Semantic
The <em> tag marks text with stress emphasis — it changes the meaning of the sentence. Screen readers will pronounce emphasized words differently.
<!-- i: foreign word, technical term, title --> <p>The scientific name for water is <i>H₂O</i>.</p> <!-- em: stressed word changes meaning --> <p>I <em>love</em> learning HTML.</p> <p>I love <em>learning</em> HTML.</p> <!-- Same words, different emphasis = different meaning! -->
Highlighted Text — <mark>
<mark> — Marked / Highlighted Text
The <mark> tag highlights text with a yellow background by default — like using a highlighter pen. Use it to draw attention to relevant search terms or important information.
<p>Do not forget to buy <mark>milk</mark> today.</p> <p>Search results for: <mark>HTML tutorial</mark></p>
Do not forget to buy milk today.
Search results for: HTML tutorial
Smaller Text — <small>
<small> — Smaller Text
The <small> tag renders text slightly smaller than the surrounding text. It's commonly used for fine print, copyright notices, disclaimers, and legal text.
<p>TipsInLearning — Free Web Development Courses</p> <small>© 2026 TipsInLearning. All rights reserved.</small>
Deleted Text — <del>
<del> — Deleted (Strikethrough) Text
The <del> tag marks text that has been deleted from the document. Browsers display it with a line through it. Commonly used to show price changes, corrections, or removed content.
<p>My favorite color is <del>blue</del> red.</p> <!-- Price strike-through example --> <p>Price: <del>$99</del> <strong>$49</strong></p>
My favorite color is blue red.
Price: $99 $49
Inserted Text — <ins>
<ins> — Inserted Text
The <ins> tag marks text that has been inserted into a document. Browsers display it underlined. It's the opposite of <del> — often used together to show edits.
<!-- Show an edit: deleted old, inserted new --> <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
Subscript — <sub>
<sub> — Subscript Text
The <sub> tag displays text below the baseline, slightly smaller. Commonly used in chemical formulas (H2O, CO2) and mathematical notation.
<p>Water formula: H<sub>2</sub>O</p> <p>Carbon dioxide: CO<sub>2</sub></p> <p>This is <sub>subscripted</sub> text.</p>
Superscript — <sup>
<sup> — Superscript Text
The <sup> tag displays text above the baseline, slightly smaller. Commonly used for mathematical exponents (x2), footnote references (text[1]), and ordinal numbers (1st, 2nd).
<p>Einstein's equation: E = mc<sup>2</sup></p> <p>This is 1<sup>st</sup> place!</p> <p>This is <sup>superscripted</sup> text.</p>
All Formatting Tags Together
Here's a complete example using all 10 formatting tags in one page:
<!DOCTYPE html> <html lang="en"> <body> <p>This is <b>bold</b> text.</p> <p>This is <strong>important</strong> text.</p> <p>This is <i>italic</i> text.</p> <p>This is <em>emphasized</em> text.</p> <p>This is <mark>highlighted</mark> text.</p> <p>This is <small>smaller</small> text.</p> <p>This is <del>deleted</del> text.</p> <p>This is <ins>inserted</ins> text.</p> <p>Water: H<sub>2</sub>O</p> <p>E = mc<sup>2</sup></p> </body> </html>
This is bold text.
This is important text.
This is italic text.
This is emphasized text.
This is highlighted text.
This is smaller text.
This is deleted text.
This is inserted text.
Water: H2O
E = mc2