1. html
  2. /tags
  3. /ins

<ins>

Definition

The HTML <ins> element is used to mark up inserted text in a document, indicating that the text has been added or inserted into the document after the original content was written. The content within the <ins> element is typically underlined by default, but this can be changed through CSS styling.

Examples

Here's an example of how the <ins> element can be used in HTML:

<p>John is <ins>very</ins> happy.</p>

In this example, the word "very" is added or inserted into the sentence, and is therefore marked up with the <ins> element. When rendered in a web browser, the word "very" would typically be underlined to indicate that it has been added.

Attributes

This element's attributes include the global attributes.

AttributeDescriptionDeprecated?
citeSpecifies the URL of the document that the inserted text was taken from or inspired byNo
datetimeSpecifies the date and time at which the inserted text was added. This attribute can be used to provide additional context or to facilitate version control of the documentNo
titleProvides additional information about the inserted text, typically displayed as a tooltip when the user hovers over the elementNo

Best Practices

  • Use the <ins> element only to mark up inserted text that has been added to the document after it was originally written.
  • Whenever possible, include the datetime attribute to provide context about when the inserted text was added.
  • Use the cite attribute to provide attribution for the inserted content if appropriate.
  • Avoid using the <ins> element to markup text that has been modified or updated rather than added. For these cases, use the <mark> or <em> elements instead.
  • Use the <ins> and <del> elements together to show changes made to a document over time, such as in a version control system or in a collaborative writing environment.
  • Don't rely solely on the default underline styling applied to the <ins> element. Use CSS to customize the appearance of the inserted text as needed.
  • Avoid using the <ins> element for purely decorative purposes. Instead, use CSS to style text for visual effects.

Accessibility Considerations

  • Screen reader users may not be aware of the presence of the <ins> element or the fact that text has been inserted. Therefore, it's important to provide additional context about the inserted text using the title attribute, the datetime attribute, or adjacent text.
  • Some users with visual impairments may have difficulty distinguishing between underlined text and regular text, especially if they have color vision deficiencies. Consider using additional visual cues such as bolding, italicizing, or changing the font color to help differentiate inserted text from regular text.
  • Users with cognitive or learning disabilities may have difficulty understanding the purpose of the <ins> element or the context in which it is used. Consider providing additional explanatory text or using alternative markup (such as the <mark> element) to make the purpose of the inserted text more clear.
  • When using the <ins> element in conjunction with the <del> element to show changes made to a document over time, be sure to provide clear and concise explanations of the changes made to the document. This can help users understand the context of the changes and why they were made.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes