ins
The ins element represents text that has been inserted into a document, styled with a green bottom border and subtle green background for tracking edits or showing revisions.
Description
The <ins> element indicates text that has been added to a document. It is the counterpart to <del> and the two are commonly used together to show document revisions. VB removes the browser default underline and replaces it with a subtle green background tint and a solid green bottom border, keeping insertions visually distinct from <u> annotations and <mark> highlights.
Like <del>, it supports cite and datetime attributes for machine-readable context about the insertion.
When to Use
- Document revisions: Track additions in legal documents, contracts, or policies
- Edit history: Show what was added in collaborative documents
- Diff displays: Show added code or text in version comparisons
- Corrections: Indicate new information that replaces deleted content
- Track changes: Similar to "track changes" in word processors
When NOT to Use
Examples
Default
Displays with a subtle green background and a solid green bottom border indicating insertion.
<ins>This content has been inserted.</ins>.diff
Enhanced styling for diff displays with padding and rounded corners, ideal for code comparisons.
<ins class="diff">added code</ins>Document Revision
Pair <ins> with <del> to show before-and-after edits in running text.
<p>The meeting will be held on <del>Tuesday</del> <ins>Wednesday</ins> at 2pm.</p>Code Diff Display
Use the .diff class on both <ins> and <del> for compact, pill-shaped diff lines.
<pre><code><del class="diff">const oldVariable = "deprecated";</del><ins class="diff">const newVariable = "current";</ins></code></pre>Block-Level Insertion
The <ins> element can wrap block content for multi-paragraph insertions.
<ins> <p>This entire section has been added to the document.</p> <p>Multiple paragraphs can be inserted together.</p></ins>Key Attributes
| Attribute | Description | Example |
|---|---|---|
datetime |
Date and time of the insertion in ISO 8601 format. Not visible to users but available to scripts and assistive technology. | datetime="2024-01-15T10:30:00" |
cite |
URL to a document explaining the change. Not rendered by the browser but useful for audit trails. | cite="https://example.com/changelog" |
<ins datetime="2024-01-15T10:30:00">New content that was added</ins><ins cite="https://example.com/changelog#v2">New API endpoint</ins>ins vs mark
Both elements use a background tint, but they carry different semantics and VB distinguishes them visually:
| Element | Meaning | VB Styling |
|---|---|---|
<ins> |
Editorial change — text was added to the document | Green background tint + green bottom border |
<mark> |
Relevance highlight — not an edit | Theme-colored background tint (no border) |
Use <ins> when the content was editorially added (contracts, changelogs, diffs). Use <mark> for search results, quotation highlights, or status badges.
CSS Reference
ins { text-decoration: none; background: oklch(60% 0.18 145 / 0.1); border-block-end: var(--border-width-thin) solid oklch(60% 0.18 145);} ins.diff { display: inline-block; padding-inline: var(--size-2xs); border-radius: var(--radius-s);}The browser default underline is removed via text-decoration: none and replaced with a solid bottom border for a cleaner appearance. The green background at 10% opacity provides a subtle tint that works across light and dark themes. The .diff variant adds inline-block display with padding for pill-shaped diff tokens.
Accessibility
- Screen reader announcement: Most screen readers announce "insertion" before reading inserted content and "end insertion" after
- Dual visual cues: Background color and bottom border together ensure visibility, including for users who may not perceive color
- Color contrast: The green values are chosen for sufficient contrast while clearly indicating addition
- Datetime attribute: Provides machine-readable context about when changes occurred
Screen Reader Behavior
With proper screen reader settings, users will hear something like:
"insertion, This content has been inserted, end insertion"Related
<del>— Companion element for deleted text (use together for document revisions)<s>— Strikethrough for content that is no longer accurate, without editorial semantics<mark>— Highlighted text for reference (background tint without insertion semantics)<u>— Wavy red underline for annotations (see VB underline styles comparison)