ins
The ins element represents text that has been inserted into a document, typically displayed with an underline and used alongside del for tracking edits or showing revisions.
Description
The <ins> element indicates text that has been added to a document. It's the counterpart to <del> and is commonly used together to show document revisions. Like <del>, it can include cite and datetime attributes to provide context about the insertion.
Semantic Meaning
The ins element carries specific semantic meaning:
- Indicates content that has been added to the document
- Screen readers typically announce "insertion" before the content
- Can include metadata about when and why the insertion occurred
- Paired with
<del>for showing document revisions
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
- Visual underline only: Use
<u>or CSS for purely decorative underlines - New content without revision context: Only use when tracking changes matters
Variants
Default
Displays with a subtle green background and bottom border indicating insertion.
This content has been inserted.
.diff
Enhanced styling for diff displays with padding and rounded corners.
added code
Live Examples
Document Revision
The meeting will be held on Tuesday Wednesday at 2pm.
With Timestamp
New content that was added
Added on January 15, 2024
With Citation
New API endpoint
Code Diff Display
const oldVariable = "deprecated";
const newVariable = "current";Contract Amendment
The service fee shall be $50 $45 per month, effective immediately.
Multiple Insertions
The project scope now includes mobile support and dark mode.
Block-Level Insertion
The <ins> element can wrap block content when used as a block element.
This entire section has been added to the document.
Multiple paragraphs can be inserted together.
Key Attributes
| Attribute | Description |
|---|---|
cite |
URL to a document explaining the change |
datetime |
Date and time of the insertion (ISO 8601 format) |
CSS Properties
| Property | Value |
|---|---|
text-decoration |
none |
background |
oklch(60% 0.18 145 / 0.1) (subtle green) |
border-block-end |
var(--border-width-thin) solid oklch(60% 0.18 145) |
.diff Variant
| Property | Value |
|---|---|
display |
inline-block |
padding-inline |
var(--size-2xs) |
border-radius |
var(--radius-s) |
Accessibility
- Screen reader announcement: Most screen readers announce "insertion" before reading inserted content
- Visual indication: Background color and underline provide visual cues
- Color contrast: The green color is chosen for sufficient contrast while indicating addition
- Datetime attribute: Helps users understand when changes occurred
Screen Reader Behavior
With proper screen reader settings, users will hear something like: