HTML 6 💻 del, ins, sub, sup elements
These elements are used for showing document changes and displaying specialized text formatting like subscripts and superscripts.
The Deleted Element <del>
The <del> element represents text that has been deleted from a document, typically shown with a strikethrough.
<del datetime="2024-05-05T00:00:00Z">This was deleted</del>Browser Display:This was deleted
Key Points:
- Used to highlight text that has been removed
- Shows document changes and revisions
- Styled with a strikethrough line by default
- datetime attribute: Specifies when the deletion occurred (uses ISO 8601 format)
The Inserted Element <ins>
The <ins> element represents text that has been added to a document, typically shown with an underline.
<p>This is the new <ins datetime="2024-05-05T00:00:00Z">inserted</ins> text that has been added.</p>Browser Display:
This is the new inserted text that has been added.
Key Points:
- Used to highlight text that has been added
- Shows document changes and revisions
- Styled with an underline by default
- datetime attribute: Specifies when the insertion occurred (uses ISO 8601 format)
The Subscript Element <sub>
The <sub> element displays text as subscript — it appears slightly below the normal line of text.
<p>The chemical formula for water is H<sub>2</sub>O.</p>Browser Display:
The chemical formula for water is H₂O.
Key Points:
- Text appears below the baseline
- Used for:
- Chemical formulas (H₂O, CO₂)
- Mathematical expressions (x₁, y₂)
- Footnotes in some contexts
- Often smaller in size than regular text
The Superscript Element <sup>
The <sup> element displays text as superscript — it appears slightly above the normal line of text.
<p>The chemical formula for water contains two hydrogen atoms and one oxygen atom<sup>1</sup>.</p>Browser Display:
The chemical formula for water contains two hydrogen atoms and one oxygen atom¹.
Key Points:
- Text appears above the baseline
- Used for:
- Mathematical exponents (x², y³)
- Ordinal numbers (1st, 2nd, 3rd)
- Footnotes and references
- Chemical formulas in some cases
- Often smaller in size than regular text
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>del, ins, sub, sup Elements</title>
</head>
<body>
<h1>Document Changes & Special Formatting</h1>
<h2>1. Deleted and Inserted Text</h2>
<h3>Original Version:</h3>
<p>The meeting will be held on <del datetime="2024-05-05T10:00:00Z">Monday, May 6th</del>.</p>
<h3>Updated Version:</h3>
<p>The meeting will be held on <ins datetime="2024-05-05T10:30:00Z">Wednesday, May 8th</ins>.</p>
<h3>Track Changes Example:</h3>
<p>
The <del>old system</del> <ins>new system</ins> will be implemented next week.
Please <del>ignore</del> <ins>review</ins> the updated guidelines.
</p>
<hr>
<h2>2. Subscript Examples</h2>
<h3>Chemical Formulas:</h3>
<ul>
<li>Water: H<sub>2</sub>O</li>
<li>Carbon Dioxide: CO<sub>2</sub></li>
<li>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></li>
<li>Sulfuric Acid: H<sub>2</sub>SO<sub>4</sub></li>
</ul>
<h3>Mathematical Variables:</h3>
<p>
The coordinates are (x<sub>1</sub>, y<sub>1</sub>) and (x<sub>2</sub>, y<sub>2</sub>).
The sequence is a<sub>1</sub>, a<sub>2</sub>, a<sub>3</sub>, ...
</p>
<hr>
<h2>3. Superscript Examples</h2>
<h3>Mathematical Exponents:</h3>
<ul>
<li>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></li>
<li>2<sup>10</sup> = 1024</li>
<li>E = mc<sup>2</sup></li>
</ul>
<h3>Ordinal Numbers:</h3>
<ul>
<li>1<sup>st</sup> Place</li>
<li>2<sup>nd</sup> Place</li>
<li>3<sup>rd</sup> Place</li>
<li>4<sup>th</sup> Place</li>
</ul>
<h3>Footnotes & References:</h3>
<p>
The study shows significant results<sup>1</sup>. This has been confirmed by multiple sources<sup>2,3</sup>.
</p>
<hr>
<h2>4. Combined Examples</h2>
<h3>Chemical Equation:</h3>
<p>
C<sub>6</sub>H<sub>12</sub>O<sub>6</sub> + 6O<sub>2</sub> → 6CO<sub>2</sub> + 6H<sub>2</sub>O + Energy<sup>*</sup>
</p>
<h3>Document Revision:</h3>
<p>
<del datetime="2024-05-01T00:00:00Z">Version 1.0</del>
<ins datetime="2024-05-02T00:00:00Z">Version 1.1</ins>
<sup>[update]</sup>
</p>
</body>
</html>Quick Reference
| Element | Purpose | Visual Style | Common Uses |
|---|---|---|---|
<del> | Deleted text | Strikethrough | Document revisions, tracked changes |
<ins> | Inserted text | Underline | Document revisions, tracked changes |
<sub> | Subscript | Below baseline | Chemical formulas, mathematical variables |
<sup> | Superscript | Above baseline | Exponents, ordinal numbers, footnotes |
Best Practices
✅ Do This:
<!-- Use del and ins together for clear changes -->
<p>
The price was <del>$100</del> <ins>$80</ins>.
</p>
<!-- Use sub for chemical formulas -->
<p>H<sub>2</sub>O</p>
<!-- Use sup for exponents -->
<p>x<sup>2</sup> + y<sup>2</sup></p>❌ Don’t Do This:
<!-- Don't use del or ins just for visual styling -->
<p>This is <del>not actually deleted</del> but just styled.</p>
<!-- Use CSS text-decoration: line-through instead -->
<!-- Don't use sub/sup for footnotes when you want actual footnotes -->
<!-- Use proper footnote formatting with links -->Pro Tip: Always include the datetime attribute when using <del> and <ins> to provide additional context about when changes were made. This is especially useful in collaborative documents and version histories.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
