HTML del and ins: Mark Deleted and Inserted Text with Change Dates

HTML <del> marks content deleted from a document, and <ins> marks inserted content. Although their default appearance is usually a strikethrough and an underline, their main purpose is to convey the meaning of a change; they do not automatically manage document versions or save an editing history.

Complete example: show deleted and inserted content together

The following schedule announcement is a practice example. Save it as changes.html and open it in a browser to see both the old and new values. The date and reason also appear in visible text so that readers can understand the change even when colors or lines are difficult to distinguish.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Schedule change example</title>
</head>
<body>
  <h1>Practice meeting: schedule change</h1>
  <p>Start time:
    <del datetime="2026-10-30" cite="#reason">10:00</del>
    <ins datetime="2026-10-30" cite="#reason">11:00</ins>
  </p>
  <p>The previous start time was 10:00; the new start time is 11:00.</p>
  <p id="reason">On October 30, 2026, the schedule was changed to allow more preparation time.</p>
</body>
</html>

With typical default styles, 10:00 has a strikethrough and 11:00 has an underline. CSS can change their appearance. Applying del does not erase the original text from the data, so do not use it to hide passwords, personal information, or other content that must not be public.

What datetime and cite record

The optional datetime attribute records the date, or date and time, when the change was made. The example’s 2026-10-30 is a date in year-month-day format. If you need a precise time, you can include an explicit time-zone offset, as in 2026-10-30T09:00:00+09:00. Adding a date does not schedule a publication or make the document change automatically at that time.

The cite attribute specifies the URL of a resource explaining the change. The example uses #reason to point to an explanatory paragraph in the same document. The attribute does not automatically display an explanation or a clickable link, so include any necessary reason and date in the visible text too.

Distinguish document edits from decorative lines

Use del and ins to represent edits to a document. For a strikethrough on information that is no longer accurate or relevant, also consider the meaning of <s>. Use CSS text-decoration for purely decorative lines. An identical visual appearance does not imply identical meaning.

Screen readers may not announce every deletion or insertion boundary with their default settings. For an important change, explain the old and new values in a sentence, as the example does. Do not distinguish the two states by color alone, and state clearly which information is currently valid. The MDN del reference and MDN ins reference describe the elements and their attributes.