Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to mark inserted text in HTML?
In HTML, inserted text refers to content that has been added to a document. The <ins> tag is the semantic way to mark text as inserted, which browsers typically display with an underline to indicate the addition.
The <ins> tag is particularly useful in document versioning, collaborative editing, and showing changes or updates to content. It provides semantic meaning that assistive technologies can understand, unlike purely visual styling approaches.
Syntax
Following is the syntax for the <ins> tag −
<ins>The text to be inserted</ins>
The <ins> tag supports optional attributes −
<ins cite="URL" datetime="YYYY-MM-DD">Inserted content</ins>
Where cite specifies a URL explaining the reason for the insertion, and datetime indicates when the change was made.
Using the <ins> Tag
Basic Example
Following example demonstrates how to mark inserted text using the <ins> tag −
<!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>DLF stands for <ins>Delhi Land and Finance</ins>.</p> <p>Delhi Land and Finance is one of the largest commercial real estate developers in India.</p> </body> </html>
The output shows the inserted text with an underline −
DLF stands for Delhi Land and Finance. Delhi Land and Finance is one of the largest commercial real estate developers in India.
Marking Inserted Text with Inline CSS
You can also mark text as inserted using CSS by applying the text-decoration: underline property. However, this approach only provides visual styling without semantic meaning.
Syntax
Following is the syntax to mark inserted text using CSS −
<p style="text-decoration: underline;">The content to be underlined</p>
Example
<!DOCTYPE html> <html> <head> <title>CSS Underline Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>DLF stands for <span style="text-decoration: underline;">Delhi Land and Finance</span>.</p> <p>Delhi Land and Finance is one of the largest commercial real estate developers in India.</p> </body> </html>
This approach creates the same visual effect but lacks the semantic meaning of the <ins> tag.
Combining Inserted and Deleted Text
The <ins> tag is commonly used together with the <del> tag to show document changes, where <del> marks deleted content (typically with strikethrough) and <ins> marks inserted content.
Example
<!DOCTYPE html> <html> <head> <title>Inserted and Deleted Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>DLF stands for Delhi Land and Finance.</p> <p>The company has changed its name from <del>DLF Universal Ltd</del> to <ins>DLF Ltd</ins>.</p> <p>Delhi Land and Finance is one of the largest commercial real estate developers in India.</p> </body> </html>
The output shows both deleted text (strikethrough) and inserted text (underlined) −
DLF stands for Delhi Land and Finance. The company has changed its name from DLF Universal Ltd to DLF Ltd. Delhi Land and Finance is one of the largest commercial real estate developers in India.
Using Attributes with <ins>
Example
Following example shows how to use the cite and datetime attributes with the <ins> tag −
<!DOCTYPE html> <html> <head> <title>Ins Tag with Attributes</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Document Revision History</h2> <p>Our company was founded in <del>1945</del> <ins cite="https://example.com/corrections" datetime="2023-03-15">1946</ins>.</p> <p>We have been serving customers for over <ins datetime="2023-03-15">75</ins> years.</p> </body> </html>
The attributes provide additional context about when and why the changes were made, though they are not visually displayed by browsers.
Comparison of Methods
| Method | Semantic Meaning | Default Styling | Accessibility | Use Case |
|---|---|---|---|---|
| <ins> tag | Yes - indicates inserted content | Underlined text | Screen readers announce as inserted | Document revisions, content changes |
| CSS text-decoration | No - purely visual | Underlined text | No special announcement | Visual emphasis only |
| <u> tag | No - deprecated for underlining | Underlined text | No special meaning | Avoid for inserted text |
Conclusion
The <ins> tag is the proper semantic way to mark inserted text in HTML, providing both visual styling (underline) and meaningful context for accessibility tools. While CSS can achieve similar visual effects, using <ins> ensures your markup conveys the intended meaning of content additions.
438 Views
