HTML <ins> Tag for Inserted Content

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <ins> Tag in HTML 5

The <ins> tag for insertions is one of the editing tags for tracking changes in HTML 5. It is used to mark up new text and/or HTML code inserted into a document. This approach to editing changes in HTML documents can be used to provide a standing record of the original text of articles, blog entries or other edited documents. A different text color (sometimes color: green) or other style can be used to provide a visual indication of the insertions.

Likewise, the <del> editing tag can be used to mark up text and/or HTML code to indicate that it has in effect been removed instead of actually deleting it from the document.

<ins> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <ins cite="changelog-URL" datetime="yyyy-mm-ddThh:mm:ss+zz:00">
      ... flow content ...
   </ins>
   ...
   ... phrasing content expected ...<ins cite="changelog-URL"
      datetime="yyyy-mm-ddThh:mm:ss+zz:00">...
   ... phrasing content ...</ins>...
   ...
</body>

Rules for coding the HTML ins element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the ins element for inserted text and/or HTML code where either flow content is expected or phrasing content is expected.
Begin the ins element with a starting <ins> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Optionally code a cite attribute with the URL of a document that provides an explanation for the change.
Optionally code a datetime attribute with the date or date and time of the change.
Include any other global attributes inside the starting <ins> tag as appropriate.
Inside the ins element, code the text or other content that is being inserted. If the <ins> tag is coded where flow content is permitted, then the inner HTML of the <ins> tag may contain flow content, otherwise it is restricted to phrasing content.
End the ins element with a matching </ins> closing tag.

<ins> Content Model

Content of the ins element

When coded in flow content

When coded in flow content, the content of the ins element can include HTML comments, text content and any HTML tags that can be used in flow content.

When coded in phrasing content

When coded in phrasing content, the content of the ins element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<ins> Tag Attributes

Attributes of the <ins> tag

global attributes In addition to the personal attributes of the <ins> tag below, any of the common HTML attributes can also be coded.

cite

a URI reference (or IRI reference depending on the encoding) that resolves to the URI of a document that explains the reason for the insertion or a fragment of a document describing multiple changes.

Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference.

If the value of the cite attribute is an HTTP URI, it may contain any of the following components:

protocol scheme, typically http: or else https:
username, followed by an "@"
host name or IP address
port number, which defaults to 80 for the http scheme and 443 for the https scheme
absolute or relative path
search query, indicated by "?"
fragment identifier, indicated by "#"

If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash /..., it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the document.

datetime="mm/dd/yyyy"
datetime="mm/dd/yyyyThh:mm-zz:zz" The datetime attribute contains the date or date and time that the change was made.

<ins> Tag Examples

Examples of the `ins` tag in HTML 5

<p>... <ins datetime="2010-10-31">added to paragraph on Halloween 2010</ins> ...</p>

<ins datetime="2010-11-30T23:59-05:00"><p>This entire paragraph was
   added just before midnight Eastern time on the last day of November.
</p></ins>

<p>... <ins datetime="2010-10-31">This is just one reason for
   always using the &lt;p&gt; tag for paragraphs in HTML.</ins>
</p>
<p><ins datetime="2010-10-31">Another reason is that it</ins>
   <del>Using the &lt;p&gt; tag</del>
   is highly recommended by the HTML specifications, which says
   <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#edits-and-paragraphs">
      "authors are strongly encouraged to always mark up all paragraphs with the p element"</a>.
</p>

The last example includes a deletion using HTML editing code and also shows that a single <ins> tag cannot be used to mark up part of one paragraph along with another paragraph since that would result in mismatched tags. Two <ins> tags need to be used for that. This rule applies even if the <p> tags for one of the paragraphs were implied rather than coded explicitly.

Inserting List Items in HTML 5

A new list item inserted into an HTML list is indicated by coding the <ins> tag inside the <li> tag:

<ul>
<li>original list item</li>
<ins><li>new list item</li></ins>
<li><ins>new list item</ins></li>
</ul>

Changes in HTML 5 - <ins> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the ins element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5