HTMLHighlight & Edits (<mark>, <ins>, <del>)

Highlighting and Tracking Changes

Three elements let you annotate text with meaning beyond plain prose: <mark> for highlighting relevant passages, and the <ins>/<del> pair for tracking insertions and deletions — think "track changes" for HTML.

<mark> — Highlighting Relevant Text

<mark> highlights text that is relevant in the current context — classically, matched search terms — without implying importance the way <strong> does. Browsers render it with a yellow background by default.

mark.html

HTML
<p>Search results for "html":</p>
<p>Learn the basics of <mark>HTML</mark> and how <mark>HTML</mark> elements are structured.</p>
Not just for search
<mark> also fits use cases like highlighting a changed line in a code diff explanation, flagging the specific clause a legal quote is drawing attention to, or drawing the eye to the key phrase in a long quotation.

mark-quote.html

HTML
<blockquote>
  <p>The most dangerous phrase in the language is, <mark>"we've always done it this way."</mark></p>
</blockquote>
<ins> — Inserted Text

<ins> marks text that has been added to a document — browsers underline it by default. It's meant for representing edits, not for general emphasis or decoration.

ins.html

HTML
<p>The meeting is scheduled for <del>Monday</del> <ins>Wednesday</ins> at 3pm.</p>
<del> — Deleted Text

<del> marks text that has been removed. Browsers render it with a strikethrough by default. Unlike <s> (which means "no longer accurate or relevant"), <del> specifically represents a tracked edit to the document.

del.html

HTML
<p>Regular price: <del>$59.99</del> — now <ins>$39.99</ins> for a limited time.</p>
del vs s — subtle but real
<del> implies the content used to be there and was edited out — it's about document history. <s> means the content is simply no longer accurate, with no implication of an edit trail. In practice they render identically, but pick based on which meaning applies.
cite and datetime Attributes

Both <ins> and <del> accept two optional attributes for tracking the edit's provenance:

  • cite — a URL pointing to a document that explains the change (e.g. a changelog or discussion thread).

  • datetime — an ISO 8601 timestamp of when the change was made, e.g. 2026-03-14T10:00:00Z.

cite-datetime.html

HTML
<p>
  Section 4.2 was
  <del cite="https://example.com/changelog#s4-2" datetime="2026-01-10T09:00:00Z">
    removed
  </del>
  <ins cite="https://example.com/changelog#s4-2" datetime="2026-02-01T14:30:00Z">
    rewritten for clarity
  </ins>.
</p>
Attributes are invisible by default
Like cite on <blockquote>, the cite and datetime attributes here don't render visibly — they're metadata for tooling (browser extensions, content management systems, revision trackers) to read programmatically. If readers need to see the date, add visible text too.
Quick Reference

Element

Meaning

Default rendering

<mark>

Highlighted / relevant text

Yellow background

<ins>

Inserted / added content

Underline

<del>

Deleted / removed content

Strikethrough

  • Use <mark> to draw attention without implying importance — that is what <strong> is for.

  • Use <ins>/<del> together to represent a visible edit, optionally with cite/datetime metadata.

  • Prefer <s> over <del> when there is no "edit history" implication — just outdated info.