Do you think IIT Guwahati certified course can help you in your career?
Introduction
The <ins> tag in HTML is used to indicate inserted text, typically displaying it with an underline. It helps highlight additions to a document, making it useful for tracking changes or emphasizing newly added content. This tag is commonly used in combination with the <del> tag to show modifications.
In this article, you will learn about the syntax of the <ins> tag, its attributes, and how to use it effectively.
Definition and Usage
The <ins> tag in HTML is used to mark text that has been inserted into a document. It's a semantic tag that helps indicate changes or additions to the content. When you use the <ins> tag, the text inside it is typically underlined by default, but you can change this appearance using CSS.
For example, if you have a document and you want to show that some text has been added, you can wrap that text in the <ins> tag. This makes it clear to readers that this part of the text was inserted later.
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Definition and Usage of <ins> Tag</title>
</head>
<body>
<p>Original text: This is the original content.</p>
<p>Updated text: This is the original content. <ins>This part was added later.</ins></p>
</body>
</html>
Output
In this example, the text "This part was added later." is marked with the <ins> tag. When you view this HTML file in a browser, the inserted text will be underlined, showing that it was added after the original content. This tag is useful for tracking changes in documents, such as in collaborative writing or editing
Syntax
The <ins> tag is used to indicate inserted text in an HTML document. Here is the basic syntax:
<ins>Inserted text</ins>
When rendered in a browser, the text inside the <ins> tag appears with an underline, showing that it has been added to the document.
Attributes
The <ins> tag supports the following attributes:
cite: Specifies the URL of a document that explains the reason for the change.
datetime: Defines the date and time when the text was inserted.
Example with Attributes
<p>The new policy states: <ins cite="https://example.com/policy" datetime="2025-02-09">Employees must submit their reports by Friday.</ins></p>
Explanation
The cite attribute provides a reference to the source explaining the change.
The datetime attribute records the time of insertion.
Examples of HTML <ins> Tag
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML <ins> Tag Example</title>
</head>
<body>
<p>This is the original sentence. <ins>This is the inserted text.</ins></p>
</body>
</html>
Output
The browser will display:
This is the original sentence.This is the inserted text. (with an underline)
Example
Let's see how the <ins> tag works with a practical example. Imagine you have a document and you want to highlight the changes you made. The <ins> tag is perfect for this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of <ins> Tag</title>
</head>
<body>
<p>Original text: This is the original content.</p>
<p>Updated text: This is the original content. <ins>This part was added later.</ins></p>
</body>
</html>
Output
In this example, the text "This part was added later." is inside the <ins> tag. When you open this HTML file in a browser, you will see that the inserted text is underlined, indicating that it was added after the original content. This is a simple way to show changes in your documents.
Using <ins> with <del>
Sometimes, we need to indicate both removed and inserted content. The <del> tag is used for deleted text.
<p>The price of the product was <del>$50</del> <ins>$45</ins>.</p>
Output
$50 $45
This shows that the old price was deleted and replaced with a new price.
Example with CSS Styling
By default, the <ins> tag underlines the text. We can style it using CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled <ins> Tag</title>
<style>
ins {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<p>The new policy states: <ins>All employees must attend the meeting.</ins></p>
</body>
</html>
Output
The text inside <ins> appears bold and green.
Supported Browsers
The <ins> tag is supported by all modern web browsers, including:
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Opera
Since it is a standard HTML tag, it works across different devices and screen sizes without compatibility issues.
Frequently Asked Questions
What is the purpose of the <ins> tag?
The <ins> tag is used to indicate added text in an HTML document. It helps show modifications like updates or corrections.
What is the difference between <ins> and <del>?
The <ins> tag is used for inserted text (new additions), while the <del> tag is used for deleted text (removals or modifications).
How can I style the <ins> tag?
You can use CSS to change the appearance of the <ins> tag, such as modifying the color, font size, or removing the underline.
Conclusion
In this article, we learned about the <ins> tag in HTML, which is used to highlight inserted text on a webpage. It helps improve readability and track content changes. Understanding how to use this tag properly can enhance user experience and SEO. By using it effectively, developers can create well-structured and accessible web content.
518+ registered 
