Add Ins Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the ins tag in HTML.
What is Ins Tag in HTML
The ins tag is used to indicate text that has been inserted into a document. This tag is useful for displaying changes or additions made to a document. It is usually rendered with an underline by most browsers.
The syntax for the ins tag is straightforward. It requires an opening and closing ins tag, and the text that needs to be inserted in the document is placed between these two tags.
Here's an example of how to use <ins> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ins Tag Example</title>
</head>
<body>
<p><ins>Tim Berners-Lee</ins> created HTML in 1993.</p>
</body>
</html>Attributes of Ins Tag
Here are the attributes we can use with the ins tag:
- id
- class
- style
- title
- cite
- datetime
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the ins tag and use it to apply a specific style to that particular tag.
Example
<p>This is a new <ins id="itext">inserted</ins> text.</p>In the above example, we assign an id attribute to the ins tag with a value itext. In CSS and JavaScript, we can use the name itext to access the specific ins tag whose id value is set to the name itext.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the ins tags and use it to apply a specific style to all the ins tags that belong to a particular class.
Example
<p>This is a new <ins class="info">inserted</ins> text.</p>
<p>This is another new <ins class="info">inserted</ins> text.</p>In the above example, both ins tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both ins tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the ins tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>This is a new <ins style="color: red">inserted</ins> text.</p>The style="color: red" will change the color of the ins tag to red color.
title
The title attribute can be used to add a tooltip or additional information to the ins tag, which will only appear when the user places the mouse cursor on the inserted text.
Example
<p><ins title="He is also known as the father of WWW (World Wide Web)">Tim Berners-Lee</ins> created HTML in 1993.</p>cite
The cite attribute can be used to specify a URL that provides more information about the inserted content. The URL is not visible on the web browser and is only used to provide the developer with more information about the inserted content.
Example
<p><ins cite="https://example.com/tim-berners-lee">Tim Berners-Lee</ins> created HTML in 1993.</p>datetime
The datetime attribute can be used to specify the date and time when the content was deleted.
Example
<p><ins datetime="2023-02-18 22:45">Tim Berners-Lee</ins> created HTML in 1993.</p>The syntax of datetime attribute is datetime="YYYY-MM-DDThh:mm:ssTZD".
YYYY - It represents year like 2023.
MM - It represents month like 02 for February.
DD - It represents day like 18 for 18th day of the month.
T - It represents a separator between date and time like space.
hh - It represents hour in 24 hour format like 22 for 10 PM.
mm - It represents minutes like 45 minutes.
ss - It represents seconds like 30 minutes.
TZD - It represents Time Zone Designator where Z refers to Zulu also called GMT (Greenwich Mean Time).
Note: The datetime attribute doesn't have any visible impact on regular web browsers, but it can be used by screen readers to enhance accessibility for users.
Nesting of Bold and Ins Tags
It is possible to nest <ins> tag within the <b> tag and vice versa to draw a higher level of attention of the user.
Example
<p><b><ins>Tim Berners-Lee</ins></b> created HTML in 1993.</p>