totn HTML

HTML: <ins> tag

This HTML tutorial explains how to use the HTML element called the <ins> tag with syntax and examples.

Description

The HTML <ins> tag is used to markup new text that has been inserted into a document to show the history of changes to a document. Browsers traditionally render the text found within the <ins> tag as underlined text. You can use the companion tag called the <del> tag to markup text that has been deleted from a document but retained to show the history of changes to a document. This tag is also commonly referred to as the <ins> element.

Syntax

In HTML, the syntax for the <ins> tag is:

<body>
<p><ins cite="https://www.techonthenet.com">This new text has been inserted</ins> but this text has not.</p>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <ins> tag:

Attribute Description HTML Compatibility
cite URL for the source that explains why the text was inserted into the document HTML 4.01, HTML5
datetime Date and time that the text was inserted into the document HTML 4.01, HTML5

Note

  • The HTML <ins> element is found within the <body> tag.
  • The <ins> tag is traditionally used to track changes to a document and highlight insertions into the document. The <ins> tag can also be used in diff tools to show source code additions.

Browser Compatibility

The <ins> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <ins> tag below, exploring examples of how to use the <ins> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <ins> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p><ins cite="https://www.techonthenet.com">This text has been inserted</ins> but this text has not.</p>
</body>

</html>

In this HTML5 Document example, we have created an <ins> tag that includes the text "This text has been inserted" and we have cited the source of the insertion as https://www.techonthenet.com. Most browsers will render the text within the <ins> tag as underlined text but you can change this with CSS.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <ins> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p><ins cite="https://www.techonthenet.com">This text has been inserted</ins> but this text has not.</p>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created an <ins> tag that includes the text "This text has been inserted" and we have cited the source of the insertion as https://www.techonthenet.com. Most browsers will render the text within the <ins> tag as underlined text but you can change this with CSS.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <ins> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p><ins cite="https://www.techonthenet.com">This text has been inserted</ins> but this text has not.</p>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created an <ins> tag that includes the text "This text has been inserted" and we have cited the source of the insertion as https://www.techonthenet.com. Most browsers will render the text within the <ins> tag as underlined text but you can change this with CSS.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <ins> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p><ins cite="https://www.techonthenet.com">This text has been inserted</ins> but this text has not.</p>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created an <ins> tag that includes the text "This text has been inserted" and we have cited the source of the insertion as https://www.techonthenet.com. Most browsers will render the text within the <ins> tag as underlined text but you can change this with CSS.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <ins> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<h1>Heading 1</h1>
<p><ins cite="https://www.techonthenet.com">This text has been inserted</ins> but this text has not.</p>
</body>

</html>

In this XHTML 1.1 Document example, we have created an <ins> tag that includes the text "This text has been inserted" and we have cited the source of the insertion as https://www.techonthenet.com. Most browsers will render the text within the <ins> tag as underlined text but you can change this with CSS.

Share on: