<ins> : Inserted Text element

by

Introduction

The <ins> element in HTML is used to represent text that has been inserted into a document. It is typically used in conjunction with the <del> (Deleted Text) element to show content changes over time. The <ins> element is commonly used in version control systems, collaborative editing environments, or any situation where it’s necessary to highlight added or inserted text.

Here is an example :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <p>
      The quick brown fox jumps over the lazy dog.
    </p> 
    <p>
      <del>The</del> <ins> A</ins> quick red fox jumps over <del>the</del> <ins> a</ins> lazy dog.
    </p>
</body>
</html>

Output :

In this example:

  • <del> is used to represent deleted or removed text.
  • <ins> is used to represent inserted or added text.

In the second paragraph, the changes between the original and modified text are visually highlighted. The word “The” is deleted, and the word “A” is inserted. Similarly, “the” is deleted, and “a” is inserted.

Attributes like ‘datetime‘ can be added to provide additional information about when the changes were made.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    The quick brown fox jumps over the lazy dog.
  </p>
  <p>
    <del datetime="2023-01-18T12:00">The</del> <ins datetime="2023-01-18T12:05"> A</ins> quick red fox jumps over <del datetime="2023-01-18T12:10">the</del> <ins datetime="2023-01-18T12:15"> a</ins> lazy dog.
  </p>
</body>
</html>

In this case, the ‘datetime‘ attribute provides timestamps indicating when the changes were made. This information can be useful in applications that track document revisions or edits.

It’s worth noting that while the <ins> and <del> elements are part of the HTML specification, their visual rendering may vary depending on the browser, and developers often use CSS to customize the appearance of inserted and deleted text.

Leave a Comment