Introducing the <ins> HTML Tag

The <ins> tag is a powerful tool in HTML that allows you to highlight inserted text within your document. It’s particularly useful when you want to draw attention to text that has been added since a previous version of your content. This tag can also be used in conjunction with the <del> tag to mark deleted text.

When you use the <ins> tag, most browsers automatically underline the inserted text and strike through the deleted text. However, as with any HTML element, you have the flexibility to apply your own custom styles to the <ins> element using CSS.

Syntax

To utilize the <ins> tag, simply enclose the inserted text between the opening and closing tags like this: <ins></ins>. Additionally, you can enhance the tag by using attributes such as cite to link to the source of the quotation or provide more information about the edit, as well as datetime to specify the date and/or time of the edit.

Here’s an example without any attributes:

<ins>Inserted text</ins>

And here’s an example with attributes:

<ins cite="https://example.com">Inserted text with citation</ins>

Examples

Basic Usage Example – A “To Do” List

The <ins> tag can be incredibly handy in a “to do” list to mark items that have been added. In this example, I’ve also utilized the <del> tag to indicate completed tasks.

<ins>Buy groceries</ins>
<del>Walk the dog</del>
<ins>Call mom</ins>

Date & Time

The datetime attribute allows you to include the date and (optionally) the time. While mainly intended for server-side scripts to collect statistics about a site’s edits, it can potentially be displayed to users.

See also  Learn HTML and CSS with ProgramMatek

To illustrate, we can add date and time information to the <ins> and <del> tags to indicate items that have been added or deleted.

<ins datetime="2022-01-01T12:00:00">New content</ins>
<del datetime="2021-12-31T18:30:00">Outdated content</del>

Citations

You have the option to add a citation using the cite attribute. Please note that the value of this attribute should be the URL of a document that explains the change. It’s important to remember that this attribute is not intended for readers of the document, but rather for private use like server-side scripts collecting statistics about a site’s edits.

<ins cite="https://example.com/change-explanation">Updated information</ins>

Inserting Table Rows and/or Columns

When inserting a table row or column, you must apply the <ins> tag to the content within those rows or columns. Simply enclosing a <tr> or <td> tag within <ins> tags won’t achieve the desired effect. To further customize your table, you can apply CSS styles as needed. In this example, the CSS background-color property has been applied to the <ins> element.

<table>
  <tr>
    <td>Original content</td>
    <ins><td>New content</td></ins>
  </tr>
</table>

Remove Underline

While most browsers automatically underline the <ins> element, you may prefer to remove the underline to avoid potential confusion with hyperlinks. You can accomplish this with the CSS text-decoration property. In this example, we remove the underline and apply a background color to the <ins> element.

<style>
  ins {
    text-decoration: none;
    background-color: yellow;
  }
</style>

<ins>No underline, customized background color</ins>

Attributes

Attributes provide additional information about how an HTML element should appear or behave. The <ins> element accepts the following attributes:

  • cite: Indicates a source that explains the reason for the change.
  • datetime: Specifies the date and time of the change.
See also  Blogger HTML Code

Global Attributes

The following attributes are standard across all HTML elements, including <ins>. Feel free to use them with the <ins> tag, as well as with other HTML elements:

  • accesskey
  • autocapitalize
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • part
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a complete explanation of these attributes, refer to the HTML 5 global attributes.

Event Handlers

Event handler content attributes allow you to incorporate scripts within your HTML. These scripts are triggered when specific events occur. Different event handler content attributes correspond to different events.

Some of the event handler content attributes that can be used on most HTML elements are:

  • onabort
  • onauxclick
  • onblur
  • oncancel
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • oncopy
  • oncuechange
  • oncut
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformdata
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onlanguagechange
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onpaste
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreset
  • onresize
  • onscroll
  • onsecuritypolicyviolation
  • onseeked
  • onseeking
  • onselect
  • onslotchange
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • ontoggle
  • onvolumechange
  • onwaiting
  • onwheel

Most event handler content attributes can be used on all HTML elements, but please be aware that some event handlers have specific rules regarding their usage and the applicable elements.

For more detailed information, please consult the HTML event handler content attributes.

Remember, the <ins> tag is a powerful tool that can enhance your HTML documents. Give it a try and take advantage of its versatility in highlighting inserted text. Happy coding with ProgramMatek – your go-to source for all things programming!

See also  ProgramMatek's HTML Report Designer: Create Professional Reports with Ease