A Guide to Inline Style HTML Tags: sub, sup, small, mark

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

---

Inline Style HTML Tags:
<sub> <sup> <small> <mark>

INTRODUCTION TO LESS COMMON INLINE STYLE ELEMENTS

Besides emphasis tags like <strong> and <em>, or purely stylistic ones like <b> and <i>, HTML offers other specific inline elements to modify the appearance and meaning of small portions of text. These tags don't just change how the text looks, but often add a precise semantic meaning, useful for accessibility and search engines. Let's look in detail at <sub>, <sup>, <small>, and <mark> with concrete code examples.

UNDERSTANDING AND USING THE HTML <SUB> TAG FOR SUBSCRIPTS

The <sub> (subscript) tag displays the enclosed text as a subscript, that is, lower and slightly smaller than the baseline. It's ideal for scientific and mathematical notations.

When to use it: Chemical formulas, mathematical indices.

Code Example with Chemical Formula:

<p>The chemical formula for water is H<sub>2</sub>O.</p>

Expected Visual Result: The chemical formula for water is H₂O.

Code Example with Mathematical Notation:

<p>Let's consider two variables, x<sub>1</sub> and x<sub>2</sub>.</p>

Expected Visual Result: Let's consider two variables, x₁ and x₂.

Remember: use <sub> for its typographic meaning, not just to lower text. For purely decorative purposes, use CSS.

CREATING SUPERSCRIPTS WITH THE HTML <SUP> TAG

The <sup> (superscript) tag displays the text as a superscript, that is, higher and slightly smaller. Perfect for exponents, ordinal indicators, and footnotes.

When to use it: Mathematical exponents, ordinal indicators (e.g., 1st), footnote references.

Code Example with Mathematical Exponents:

<p>The Pythagorean theorem is a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.</p>

Expected Visual Result: The Pythagorean theorem is a² + b² = c².

Code Example with Ordinal Indicators:

<p>Today is my 1<sup>st</sup> day studying HTML!</p>

Expected Visual Result: Today is my 1^st day studying HTML!

Code Example with Footnote References:

<p>This technique is discussed in Chapter 4<sup>[1]</sup>.</p>

Expected Visual Result: This technique is discussed in Chapter 4^[1]. (Note: the exact appearance of the reference depends on the style).

Here too, the usage must be semantically justified.

USING THE HTML <SMALL> TAG FOR SECONDARY TEXT

The <small> tag indicates that the contained text is a side comment, supplementary information, or "fine print," like copyrights or disclaimers. Visually, the text appears smaller.

When to use it: Copyright notes, legal disclaimers, attributions, secondary information.

Code Example for Copyright:

<footer>
<p><small>Copyright © 2025 LearningWebsiteName. All rights reserved.</small></p>
</footer>

Expected Visual Result: (Smaller text in the footer) Copyright © 2025 LearningWebsiteName. All rights reserved.

Code Example for Disclaimer:

<p>Total price: €50.00. <small>VAT included.</small></p>

Expected Visual Result: Total price: €50.00. VAT included.

Don't use <small> just to shrink text: if it's not secondary information, use CSS.

HIGHLIGHTING RELEVANT TEXT WITH THE HTML <MARK> TAG

The <mark> tag is used to highlight text that has particular relevance in the current context, like keywords in search results or important parts of a quotation. It's usually rendered with a colored background (like a highlighter).

When to use it: Highlighting terms in search results, key portions of quotations, text to draw contextual attention to.

Code Example in Search Results:

<p>Results for "HTML tag": The use of the <mark>HTML</mark> <mark>tag</mark> is...</p>

Expected Visual Result: Results for "HTML tag": The use of the HTML tag is...

Code Example in a Quotation:

<blockquote>
"It is <mark>fundamental</mark> to understand semantics before style."
</blockquote>

Expected Visual Result:

"It is fundamental to understand semantics before style."

Distinguish <mark> (contextual relevance) from <strong> (intrinsic importance) and <em> (emphasis). To color backgrounds without this specific meaning, use CSS.

CONCLUSIONS ON INLINE STYLE TAGS

The <sub>, <sup>, <small>, and <mark> tags offer semantically appropriate ways to format subscripts, superscripts, secondary text, and highlighted text. Using them correctly, as shown in the examples, not only improves readability and visual appearance but also accessibility and the understanding of the content structure by browsers and search engines. Always choose the semantically correct HTML tag and reserve CSS for purely stylistic customizations.

---