HTML <ins> Tag

In this article, we’ll talk about Tag ins examples. Wishing it would satisfy the requirements for learning.

The HTML <ins> tag is used to mark text that has been inserted into a document. When used with the appropriate CSS styles, this can be used to highlight new or changed content in a visually distinct manner.

The <ins> tag has the following attributes:

  • cite: Specifies a URL to the source of the inserted content.
  • datetime: Specifies the date and time that the content was inserted.

The following text contains a deleted part and a new, inserted part:

Example: 

<!DOCTYPE html> <html> <body> <p>My favorite dish is <del> Beef Steak</del> <ins>Sushi</ins>!</p> </body> </html>

Can use the following CSS code to style <ins> and <del>:

Example: 

<!DOCTYPE html> <html> <head> <style> del {background-color:red;} ins {background-color: blue;} </style> </head> <body> <p>My favorite dish is <del> Beef Steak</del> <ins>Sushi</ins>!</p> </body> </html>

Here is another example of the ins tag with date and time:

Example: 

<!DOCTYPE html> <html> <body> <p>This is some text that has been <ins datetime="2022-01-01" cite="Mr Example">inserted</ins> into the document.</p> </body> </html>


Tag Ins Usage

A tag <ins> contains text that has been inserted into a document. The browser will usually underline the text that is added.

Advice: You can also use the <del> tag to mark text that has been deleted.

Attributes

AttributeValueOverview
citeURLProvide the URL of a document describing why the text was altered or inserted.
datetimeYYYY-MM-DDThh:mm:ssTZDIndicates when the text was inserted/changed and when it was last updated.

Attributes

Global

Ins tags <ins> work with HTML’s Global Attributes too.

Event

Ins tags <ins> work with HTML’s Event Attributes too.


Browser Compatibility

Element
<ins>YesYesYesYesYes

Predefined CSS

The <ins> element will often be presented with the following default values:

ins {
text-decoration: underline;
}

HTML <ins> Tag Advantages

The HTML <ins> tag provides a number of advantages, including:

  • Using the <ins> tag to indicate inserted content can help improve accessibility for users with screen readers or other assistive technologies. By marking inserted content with the <ins> tag, these users can easily identify changes to the document.
  • Using the <ins> tag to highlight new or changed content can improve the readability of a document. By visually emphasizing inserted content, readers can quickly identify important changes or updates.
  • Search engines use semantic markup to better understand the content of a web page. Using the <ins> tag to indicate inserted content can help search engines better understand the context of changes to the page, potentially improving search engine rankings.
  • When working collaboratively on a document, using the <ins> tag to indicate inserted content can help team members easily identify changes and stay up-to-date on the latest version of the document.
If you liked the content on this page, do share it with your friends by clicking on the links below.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *