Module 2: Editing Tags0 Level Beginner

8. Text Marking and Editing (, <del>, <ins>, )

Highlighting, striking out old prices, adding new prices and small text

Real-life analogy

A sale board in a shop: the old price is crossed out with a pen (<del>), the new price is written below (<ins>) and the discount is coloured with a highlighter ()!

Explanation

The 4 main editing tags used in e-commerce and documents:

: Highlights the text in yellow.
<del>: Draws a line through removed or old text (Strikethrough).
<ins>: Shows newly added text underlined (Underline).
: Makes the text one level smaller than normal size (for legal terms).

Golden rules

The <del> and <ins> pair is best for showing discounts or offers.

Common mistake

Using only CSS to strike out the old price. Using <del> is the correct semantic standard.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <h3 style="margin-top: 0;">Blockbuster Offer:</h3>
  <p style="font-size: 16px;">
    Old price: <del style="color: #dc2626;">₹1,999</del> <br>
    New price: <ins style="color: #16a34a; font-weight: bold; text-decoration: none;">₹699</ins> 
    (<mark style="background: #fef08a; padding: 2px 6px;">Save 65%</mark>)
  </p>
  <p><small style="color: #64748b;">*Terms and conditions apply (Small Text)</small></p>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which HTML tag is used to colour text with a yellow highlighter?

<highlight>
<yellow>
<color>

Show answer

Answer:

The tag automatically adds a yellow highlight to the text background.

8. Text Marking and Editing (<mark>, <del>, <ins>, <small>)