Codectionary / Developer documentation / HTML

<ins> and <del>

The <ins> element marks text that has been inserted into a document, typically rendered underlined. The <del> element marks text that has been deleted, typically rendered with strikethrough. Together they are commonly used to show tracked changes, edit history, or price updates, and both support cite and datetime attributes to document when and why the change was made.

Syntax

<del>Old text</del> <ins>New text</ins>

Examples

Showing a Price Change

A common e-commerce pattern for discounted pricing.

<p>Price: <del>$49.99</del> <ins>$34.99</ins></p>

Document Revision

Marking up an edited sentence to show what changed.

<p>The meeting is scheduled for <del>Monday</del> <ins>Wednesday</ins> at 3 PM.</p>

With Attribution

Documenting who made a change and when.

<p>
  <del datetime="2026-07-01" cite="https://example.com/changelog">Removed the beta feature.</del>
  <ins datetime="2026-07-16">Added the stable release notes.</ins>
</p>

Attributes

  • cite (URL): A URL explaining why the change was made
  • datetime (string): The date and time the change was made, in ISO 8601 format

Best practices

  • Use ins/del for genuine tracked changes or edit history, not as a general-purpose styling shortcut for underline/strikethrough
  • For text that is simply no longer accurate (but was not literally deleted from a document), consider <s> instead of <del>
  • Include datetime for a proper audit trail on content like changelogs or legal documents
  • Remember del/ins can wrap both inline and block-level content

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

<span>
The <span> element is an inline container used to group and style specific portions of text or inline elements. Unlike <div>, which is block-level, <span> doesn't break the flow of content. It's perfect for applying styles or manipulating specific words or phrases within a paragraph without affecting the surrounding content.
<h1> - <h6>
The heading elements <h1> through <h6> represent six levels of section headings, with <h1> being the most important and <h6> the least. Headings create a document outline that both sighted users and assistive technologies rely on to understand and navigate page structure. Search engines also use heading hierarchy to interpret content relevance. Each page should typically have exactly one <h1> describing its main topic, with subsequent headings nested logically to reflect the content hierarchy.
<p>
The <p> element represents a paragraph of text — one of the most fundamental building blocks of written content on the web. Browsers automatically add margin above and below paragraphs to visually separate them. The <p> element cannot contain other block-level elements like <div> or headings, only inline content and text. It is a block-level element, meaning it always starts on a new line.
Text Formatting: <strong>, <em>, <b>, <i>, <mark>, <small>
HTML provides several inline elements for formatting text with semantic and visual meaning. <strong> indicates strong importance (typically rendered bold), and <em> indicates stress emphasis (typically rendered italic) — both carry semantic weight that screen readers can announce. <b> and <i> are their purely visual counterparts, used when bold/italic styling is needed without implying importance or emphasis. <mark> highlights text as relevant to the current context, and <small> represents side comments like fine print or disclaimers.