Section 4.7

Edits

2 entries from this section of the HTML Living Standard, in the order the standard presents them.

All 2 elements together

One small page that uses every element of this section. Turn on Show tags and point at any part of the page: a label tells you which element draws it. Click to jump to that element's details below.

Edits Written for this site

Every element of this section is in the page above. Point at one to find it, click it to read its details.

<article class="doc">
  <h1>Pancake recipe</h1>
  <p class="meta">Revised on November 2: green is new, red was removed.</p>

  <h2>Ingredients</h2>
  <ul>
    <li>2 eggs</li>
    <li><del datetime="2026-11-01">200 g of sugar</del> <ins datetime="2026-11-02">50 g of sugar</ins></li>
    <li>250 ml of milk</li>
    <li><ins datetime="2026-11-02">A pinch of salt</ins></li>
  </ul>

  <h2>Steps</h2>
  <ol>
    <li>Whisk everything together.</li>
    <li><del datetime="2026-11-02">Wait one hour.</del></li>
    <li>Cook on a hot pan.</li>
  </ol>

  <ins datetime="2026-11-02" class="block">
    <p>New tip: let the first pancake fail, it warms up the pan.</p>
  </ins>

  <p class="price">Workshop price: <del>8 euros</del> <ins>6 euros</ins></p>
</article>

body { margin: 0; font-family: system-ui, sans-serif; color: #292524; background: #fafaf9; }
.doc { max-width: 40rem; margin: 20px auto; background: #fff; border: 1px solid #e7e5e4; border-radius: 16px; padding: 24px 30px; line-height: 1.8; }
h1 { margin: 0; font-size: 1.8rem; }
.meta { margin: 0 0 8px; color: #78716c; font-size: 0.9rem; }
h2 { font-size: 1.1rem; margin: 18px 0 4px; }
ins { background: #dcfce7; color: #166534; text-decoration: none; border-bottom: 2px solid #22c55e; padding: 0 3px; }
del { background: #fee2e2; color: #991b1b; padding: 0 3px; }
ins.block { display: block; margin-top: 16px; padding: 10px 14px; border: 0; border-left: 4px solid #22c55e; border-radius: 8px; }
ins.block p { margin: 0; }
.price { font-size: 1.15rem; font-weight: 600; margin-top: 18px; }

Each element in detail

`<ins>`

Baseline: widely availablesince January 2018

WHATWG An addition to the document

MDN The <ins> HTML element represents a range of text that has been added to a document. You can use the <del> element to similarly represent a range of text that has been deleted from the document.

Live preview Example from MDN

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../how-to-be-a-wizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}

del {
  background-color: #ffbbbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}

del::before {
  content: "−";
}

ins::before {
  content: "+";
}

p {
  margin: 0 1.8rem;
  font-family: "Georgia", serif;
  font-size: 1rem;
}

Content model

Categories: flow; phrasing*; palpable
Parents: phrasing
Children: transparent
Interface: HTMLModElement

Browser support

First browser version supporting <ins>
Chrome	1
Edge	12
Firefox	1
Safari	≤4
Chrome Android	18
Safari iOS	≤3.2

First version with support, from MDN browser-compat-data.

Attributes

cite: Link to the source of the quotation or more information about the edit Value: Valid URL potentially surrounded by spaces
datetime: Date and (optionally) time of the change Value: Valid date string with optional time

Also accepts the global attributes.

Specification ↗ MDN reference ↗

`<del>`