<ins> Tag in HTML
FREE
Overview
The <ins> HTML tag specifies a new block of text that has been introduced into a document. Web browsers portray the entered text as underlined text, although this property can be modified using the CSS text-decoration property. It is not an empty tag and requires an ending and closing tag. The <ins> tag in HTML is more beneficial when combined with the <del> element because <del> represents the text that has been deleted, and <ins> represents the content that has been newly added to the page. The following tutorial provides information about this element, including examples of its usage, related properties, and browser compatibility.
Syntax
Note: The <body> tag contains the HTML <ins> element.
Attributes
Attributes are applied to tags to provide more information to the browser about how the tag should appear or behave. You can use one or more attributes with HTML tags. Attributes are made up of a name and a value separated by an equals sign =, with the value enclosed in double-quotes. For example, <del datetime="2022-11-06T15:55:03Z"> . . . \</del>.
Element-Specific Attributes
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies a link to another document that explains why the new text is inserted into the document. |
| datetime | YYYY-MM-DDThh:mm | Specifies the time and date of the inserted text, which must be a valid date string with an optional time. The element lacks a time stamp if the value cannot be interpreted as a date with an optional time string. |
The following are explanations of datetime components:
| Component | Description |
|---|---|
| YYYY | It specifies the year of the datetime object (e.g., 2020). |
| MM | It specifies the month of the datetime object (e.g., 01 for January). |
| DD | It specifies the month and day of the datetime object (e.g., 24). |
| T | It is a necessary separator. |
| hh | It specifies the hour of the datetime object (e.g., 22 for 10.00 pm). |
| mm | It specifies the minutes of the datetime object (e.g., 54). |
| ss | It sets the seconds of a datetime object (e.g., 03). |
| TZD | Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time) |
Global Attributes
Global attributes are properties that can be applied to all HTML elements and are shared by all of them. As both standard and non-standard HTML elements support them, they're referred to as global. However, they may have no effect on some.
Global properties can be applied to any HTML element, including ones that aren't mentioned in the standard. This means that even if utilizing non-standard elements causes the content to be non-HTML5 compliant, some characteristics must be allowed. Despite the fact that <foo hidden>...</foo> is not a valid HTML element, HTML5-compliant browsers conceal content marked as <foo hidden>...</foo>.
List of Global Attributes
| Attribute | Value | Description |
|---|---|---|
| accesskey | shortcut key | It provides guidance on how to create a keyboard shortcut for the currently selected element. The browser should use the first one on the computer keyboard layout. |
| autocapitalize | off / none, on / sentences, words, characters | Controls whether or not text input is automatically capitalized when entered/edited by the user and how it is capitalized. |
| autofocus | false | Indicates that an element will be highlighted when the page loads or when the <dialogue> in which it is included is displayed. |
| class | classname | It is a list of classes for the element, separated by spaces. CSS and JavaScript use classes to identify and access specific components using class selectors or functions. |
| contenteditable | true / false | An enumerated attribute that indicates whether or not the element should be user-modifiable. If this is the scenario, the browser modifies its widget to allow customization. |
| contextmenu | menu-id | The context menu of an element is defined. A context menu appears when the user clicks the right mouse button on an element. |
| data- | data | Custom data attributes allow private information to be communicated between HTML and its DOM representation, which scripts can use. All such custom data can be accessed using the HTML Element interface of the element on which the attribute is set. |
| dir | ltr / rtl / auto | Specifies the element's text's base direction of directionality. |
| draggable | true / false / auto | An enumerated attribute is used to specify whether or not the element may be dragged using the Drag and Drop API. |
| dropzone | copy / move / link | This parameter determines whether dragged data is copied, relocated, or linked when it is dropped. |
| enterkeyhint | On virtual keyboards, this value indicates the action label (or icon) for displaying the enter key. | |
| exportparts | It can be used to transitively export shadow components from a nested shadow tree to a contained light tree. | |
| hidden | hidden | The value of a Boolean attribute indicates whether or not the element is still relevant. For example, It can be used to hide parts of a website that can't be accessible until the login procedure is finished. Such things will not be rendered by the browser. |
| Id | name | Defines a distinct/unique identifier (ID) that must be consistent and unique throughout the document. It identifies the element when linking (through a fragment identifier), scripting, or styling (with CSS). |
| lang | language-code | It is used to specify the primary language for the element's text content. |
| Spellcheck | true / false | It is used to specify whether or not the element should be checked for spelling mistakes. |
| tabindex | number | It is used to specify the tabbing order of an element. |
| title | text | It includes text that presents advisory information about the element to which it belongs. Generally, but not always, such information is given to the user in the form of a tooltip. |
| slot | The slot established by the element whose name attribute matches the value of the slot property is assigned to an element with a slot attribute. | |
| Style | style | Inline CSS is applied to the currently chosen element using style. It is recommended that styles should be defined in separate files or files. This attribute and the <style> element are designed for quick stylings, such as for testing purposes. |
| translate | yes / no | It is used to specify whether or not the content of the element should be converted when the page is localized. |
| xml | language-code | It is used to specify the predominant language for the element's text content in XHTML documents. |
How to use <ins> tag in HTML?
- The <ins> (short for inserted) tag in HTML is used to identify content in the document that has been recently added in the document in order to show the history of changes made to the page.
- The <ins> tag becomes more useful when it is combined with the <del> tag because <del> represents the text that has been deleted, and <ins> represents the content that has been added to the page.
- Browsers will ordinarily display the newly entered text through an underline, but you can change this with the CSS text-decoration property. The <ins> tag requires a beginning and an ending tag. You just have to enter the newly added text between the opening and closing tags.
Examples
Example 1: In this example, we will illustrate the <ins> element in HTML.
Output:
Example 2: In this example, we will use the datetime attribute with the <ins> tag.
Output:
Example 3: In this example, we will use CSS to style <del> and <ins> tags.
Output:
Accessibility concerns
- Most screen reading technology does not detect the presence of the ins element in its default setup. It can be announced by combining the CSS content property along with the ::before and ::after pseudo-elements.
- Some screen readers deliberately turn off content delivery, which adds excessive verbosity. As a result, it's crucial to avoid overuse of this technique and to utilize it only when understanding will be negatively impacted by not being aware of inserted content.
Browser support
The <ins> tag in HTML is supported by the following browsers:
| Browser | Google Chrome | Internet Explorer | Microsoft Edge 12+ | Firefox | Opera | Safari |
|---|---|---|---|---|---|---|
| Support | Yes | Yes | Yes | Yes | Yes | Yes |
Learn more
Conclusion
- The <ins> tag in HTML is used to markup the range of text that has been recently inserted into the document.
- Browsers will generally display the inserted text with an underline, but you can change this with the CSS text-decoration property by setting it to none. To annotate deleted content into a document, use the companion tag called the <del> tag.
- The <ins> tag in HTML has two event-specific attributes. One is the cite attribute, which specifies a link to another document that explains why the new text is inserted into the document, while the other is the datetime attribute which specifies the date and time of the newly inserted text into the document.
Related tags
- <del>
- <s>
- <strike>