DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <ins> Insert Tag

The term stand for insert. This tag is mainly used to specify the text which has been inserted into an HTML document. In HTML, the insert tag is sometimes used along with the tag for a markup of deleted text.

By default, most of the browsers display the content between the tag as an underlined text. You can change this behavior by using the CSS text-decoration property.

This tag is found within the tag. Usually, the screen reading technology doesn’t announce the existence of the tag in the default configuration. So you can announce it by using the CSS content property with ::after and ::before pseudo-elements.

Estimated reading time: 3 minutes

Syntax:

The insert tag contains both the starting tag and the ending tag. The content is written between these tho tags.


<ins> Text </ins>

Enter fullscreen mode Exit fullscreen mode

HTML Tag Characteristics:

th, td{ padding: 20px; }

| HTML tag | Used to insert the new text. |
| Content categories | Phrasing content, flow content |
| Permitted content | Transparent |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLModElement |

Sample of the HTML Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <ins> Tag</title>
  </head>
  <body>
<h2>Example of the HTML <ins> Tag</h2>
    <p>My favorite color is <del>violet</del> <ins>green</ins>․</p>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Download Sample File:

HTML-ins-tagDownload

Use CSS property to style an HTML Tag:

You can use the CSS text-decoration properties to style the content within the tag.

Sample of HTML tag with CSS properties:


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <ins> Tag</title>
    <style>
      ins {
        font-size: 16px;
        font-weight: italic;
        color: #C40655;
      }
      ins::before {
        content: " ~ ";
        width: 1px;
      }
    </style>
  </head>
  <body>
<h2>Example of the HTML <ins> Tag</h2>
    <p>
      <q>Always remember that you are absolutely unique. Just like everyone else.</q>
      <ins>Margaret Mead</ins>
    </p>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Attributes:

The HTML insert tag supports both the Global Attributes and the Event Attributes.

th, td{ padding: 20px; }

Attribute value Description
cite URL It will specify the URL of the document , which explains why the text was edited or deleted.
datetime YYYY-MM-DDThh:mm:ssTZD Helps to define the date and time of the deleted text.

Browser Support:

Browser Support

Related Articles:

The post HTML Insert Tag appeared first on Share Point Anchor.

Top comments (0)