HTML Mark, Time, Sup and Sub Tags

HTML gives us some cool and specific inline tags that help us mark highlights, show time values, or format mathematical and scientific notations. These aren’t just visual—they’re semantic!

Let’s break them down with examples 👇

✨ 1. <mark> – Highlight Text

Used to highlight text, often shown with a yellow background.

✅ Syntax:

<p>Don't forget to <mark>submit your assignment</mark> by Friday!</p>

• Good for drawing attention to key words
• Think of it like a marker pen

🕒 2. <time> – Represent Dates/Times

Used to show dates, times, or durations in a machine-readable format. Search engines and browsers can understand and use this tag better.

✅ Syntax:

<p>Event starts at <time datetime="2025-07-01T10:00">10 AM, July 1st, 2025</time>.</p>

✅ Duration Example:

<time datetime="PT2H">2 hours</time>

• datetime attribute uses ISO 8601 format
• Can improve SEO and help tools parse events

🔼 3. <sup> – Superscript

Used for exponents, ordinals, or footnotes.

✅ Syntax:

<p>Area = x<sup>2</sup></p>
<p>Today is the 21<sup>st</sup> of June.</p>

🔽 4. <sub> – Subscript

Used for chemical formulas, math, and footnote references.

✅ Syntax:

<p>H<sub>2</sub>O is the formula for water.</p>
<p>a<sub>i</sub> represents an indexed variable.</p>

🧪 Try This in Your HTML

<p>The formula is x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>.</p>
<p>Water is H<sub>2</sub>O.</p>
<p><mark>Important:</mark> Submit by <time datetime="2025-07-01T23:59">midnight on July 1st</time>.</p>

💡 Quick Recap

👉 Coming Up Next:

Next, let’s learn how to mark up addresses and editorial elements like deleted/inserted content, fine print, and emphasized words using semantic tags.

📚 Next: HTML Address and Editorial Tags