Live Preview
Inserted text in a sentence (styled for clarity):
The latest version includes a new feature: real-time collaboration.
HTML <ins> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll use the <ins> element to mark inserted text and show document revisions clearly.
In HTML, the <ins> tag indicates text that has been added to a document. This guide covers syntax, attributes, comparisons with del, accessibility, and best practices for beginners and content editors alike.
Core Syntax
Wrap inserted text in <ins> opening and closing tags.
Semantic Insertion
Mark additions during editing, not just underlines.
ins vs del & s
Distinguish insertions, deletions, and outdated content.
cite & datetime
Record why and when text was inserted.
CSS Styling
Customize underline, color, and background for edits.
Accessibility
Help assistive tech convey document changes.
Fundamentals
What Is the <ins> Tag?
The insertion element (<ins>) represents text that has been added to a document. Browsers typically render it with an underline, although the exact appearance may vary based on browser styles and your CSS.
Semantic, not decorative
Use <ins> when text was inserted during editing or revision tracking. Do not use it merely to underline words for emphasis — that is not its purpose.
The element is inline, so it flows naturally inside paragraphs, list items, and headings. Pair it with <del> when you need to show both removed and added wording in the same passage.
Foundation
📝 Syntax
Wrap the inserted text between opening and closing <ins> tags:
syntax.html
<ins>Inserted Text Here</ins>Syntax Rules
<ins>is an inline element — it nests inside paragraphs and other phrasing content.- Self-closing syntax (
<ins />) is not valid in HTML. - Use
citeanddatetimewhen documenting editorial changes. - Pair with
<del>to show both old and new wording in revisions.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Result |
|---|---|---|
| Basic insertion | <ins>added text</ins> | added text |
| With timestamp | <ins datetime="2026-06-10"> | Records when inserted |
| With citation | cite="/revisions/3" | Links to change explanation |
| Removed text | <del>old</del> | |
| Styled insertion | <ins class="added"> | added |
| Outdated content | <s>old price</s> |
Comparison
⚖️ <ins>, <del>, and <s>
These elements may look similar, but they communicate different meaning:
| Element | Meaning | Best for |
|---|---|---|
<ins> | Text inserted into the document | Editorial additions, revision tracking |
<del> | Text removed from the document | Deleted words in edited content |
<s> | No longer accurate or relevant | Crossed-out sale prices, outdated info |
| Together | del + ins | Show both sides of an editorial change |
Comparison
⚖️ <ins> vs <u>
Do not confuse insertions with generic underlines:
| Element | Meaning | Best for |
|---|---|---|
<ins> | Inserted text in a document | Revision history, editorial changes |
<u> | Unarticulated annotation | Proper names in some languages, spell-check marks |
| Decoration | Neither element | Use CSS text-decoration: underline on a span |
Reference
🧰 Attributes
The <ins> element supports these specific attributes plus global attributes such as class and id:
cite RevisionURL pointing to a document that explains why the text was inserted.
cite="/revisions/2026-06"datetime RevisionISO 8601 date or date-time when the insertion occurred.
datetime="2026-06-10T14:30:00Z"class GlobalCSS hook for custom insertion styling beyond default underline.
class="highlight"title GlobalAdvisory tooltip with extra context about the insertion.
title="Added in v2.1" attributes.html
<ins
class="highlight"
cite="/revisions/june-2026"
datetime="2026-06-10"
>Inserted Text Here</ins>Prefer CSS classes over inline styles for reusable edit-tracking design systems.
Hands-On
Examples Gallery
Styled insertions, documenting changes, CSS patterns, and del + ins revisions with copy-ready code and live previews.
Styled Inserted Text
Combine class with CSS to highlight insertions beyond the default underline.
styled-insertion.html
<p>This is an example of <ins class="highlight">Inserted Text Here</ins> in a sentence.</p>📚 Common Use Cases
Use <ins> to document editorial changes, legal revisions, collaborative edits, and version diffs. Pair with <del> when showing both removed and added wording.
Documenting Changes
Visually represent text added to updated content or release notes.
documenting-changes.html
<p>The latest version includes a new feature: <ins>real-time collaboration</ins>.</p>Styling Inserted Text
Use CSS classes to enhance the visual representation of insertions with color and background.
styling-inserted-text.html
<ins class="added">New Content Added</ins>Editorial Changes with del
Pair ins with del to show both the old and new wording in a revision.
ins-del-revision.html
<p>
The original plan was
<del>postponed</del>
<ins>re-evaluated</ins>
due to unforeseen circumstances.
</p>Design
Styling <ins> with CSS
Browsers underline ins by default. Customize appearance for clearer revision tracking:
text-decoration Default underlinebackground Green highlight for addscolor Distinct insertion tonedel pairing Red delete, green insert ins-styles.css
/* Default insertion styling */
ins {
text-decoration: underline;
text-decoration-color: #22c55e;
}
ins.edit-added {
color: #166534;
background: #f0fdf4;
text-decoration: none;
border-bottom: 2px solid #22c55e;
}
ins.highlight {
background: #fef9c3;
color: #854d0e;
padding: 0 0.15em;
border-radius: 3px;
}Live styled insertion
Policy updated: returns are now accepted within 30 days.
A11y
♿ Accessibility
Semantic insertions help users understand document changes:
- Use ins for real insertions — not for decorative underlines or emphasis.
- Pair with del — show both sides of an edit when the removed text matters.
- Add datetime and cite — provide context for when and why text was inserted.
- Ensure sufficient contrast — custom colors must remain readable for all users.
🧠 How <ins> Works
1
Author marks added text
Wrap newly inserted words in ins, optionally with datetime.
Markup
2
Browser applies default underline
User-agent styles visually distinguish inserted text from surrounding prose.
Rendering
3
Assistive tech conveys change
Screen readers can announce insertions as added content in the document.
Accessibility
=
Clear revision history
Readers understand what was added during editing or content updates.
Compatibility
Universal Browser Support
The <ins> element is fully supported in all browsers, including legacy Internet Explorer.
Baseline · Since HTML 4
Insertion markup that works everywhere
From legacy Internet Explorer to the latest mobile browsers — the ins element is fully supported for revision tracking.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<ins> tag 100% supported
Bottom line: Ship revision tracking with confidence. The <ins> element is safe to use in every production environment today.
Wrap Up
Conclusion
Mastering the <ins> tag helps you communicate additions in HTML documents clearly. Whether highlighting new features in release notes or tracking editorial revisions, ins enhances the clarity and communicative power of your content.
Remember to pair it with del when showing full edits, use cite and datetime for context, and style insertions with CSS for readability.
Pro Tips
💡 Best Practices
✅ Do
- Use
insfor text genuinely added to a document - Pair with
delwhen showing editorial revisions - Add
datetimeandcitefor audit trails - Style insertions with CSS for clear visibility
❌ Don’t
- Use
insfor decorative underlines - Confuse
inswithsoru - Rely on color alone to show insertions
- Overuse insertions when a clean rewrite is clearer
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <ins>
Bookmark these before you ship — they’ll keep your revision markup semantic and accessible.
6
Core concepts 01
Inserted Text
<ins> marks text added to a document.
02
Default Underline
Browsers underline ins by default.
Rendering 03
Pair with del
del = removed; ins = added.
04
cite & datetime
Record why and when text was inserted.
Attributes 05
CSS for Clarity
Green highlights pair well with red deletions.
Design 06
Universal Support
Works in every browser, including legacy IE.
Compatibility❓ Frequently Asked Questions
It marks text that has been inserted into a document — typically during editing or revision tracking.
ins marks added text. del marks removed text. Use both together for full revision diffs.ins means text was inserted during editing. s means content is no longer accurate but was not necessarily deleted from the source.cite links to a document explaining the insertion. datetime records when it happened in ISO 8601 format.Browsers underline it by default, but the meaning is semantic. Do not use
ins for decorative underlines — use CSS instead.Practice Marking Insertions
Try styled insertions, document changes, and del + ins revisions in the interactive editor.
About the author
6 people found this page helpful