HTML Basics: Highlight words by underlining • format text • underline text

Underline text – What is the difference between INS and U?

INS and U are inline elements. That means: an automatic linebreak is not generated.

By default, the output of the HTML tags ins (inserted) and U (underline) are displayed identically by the browser. Both underline the text that is marked up in this way. This means that the tags draw a thin horizontal line on the baseline of the text. However, there is a significant difference between these two HTML tags.

The HTML <ins> tag

Unlike the U tag, the HTML INS tag has a logical meaning. This tag is used for content that is added to text after it has been written. The added text starts with the opening tag <ins> and must be closed with </ins>.

In practice, the INS tag is often combined with the DEL tag. A section of text that is marked up in this way has been subsequently changed or corrected. Added text is generally not tagged with INS, as this would make a web page difficult to use.

Example

Subsequently inserted Text is generated using the <ins> tag.

The date that is not valid anymore is crossed out and the new date is inserted using the <ins> tag. To make the corrected date more visible, it is highlighted in color and displayed in bold.

The event is scheduled for <del>Friday, April 19, 2024</del>&nbsp; <ins><b><mark>Friday, May 3, 2024</mark></b></ins>.

With &nbsp; a protected space is inserted between the two dates to separate them more clearly.

Output of the HTML code
The event is scheduled for Friday, April 19, 2024   Friday, May 3, 2024.
An INS tag mustn't be placed directly inside a DEL tag.
Advertisement

The HTML <u> tag

The HTML U tag doesn't have any semantic meaning, but is used for visual styling purposes only. Text marked up with U is underlined. The underlined text starts with <u> and must be closed with the end tag </u>.

Example

Create subsequently inserted text by using the <u> tag.

The new date is added with the <u> tag. It is also marked in color and displayed bolded.

The event is scheduled for <s>Friday, April 19, 2024</s>&nbsp; <u><b><mark>Friday, May 3, 2024</mark></b></u>.

With &nbsp; a protected space is inserted again between the two dates to separate them more clearly.

Output of the HTML code
The event is scheduled for Friday, April 19, 2024  Friday, May 3, 2024.
Advertisement
Notes

In practice, the INS tag is rarely used because it would clutter the webpage. It provides no additional information to the user.

The two HTML tags <ins> and <u> work very well from a technical point of view, but they are not very practical to use because the only things that should be underlined are links.

Most visitors will automatically assume that any text that is underlined is a link. When they then realize that they have been fooled by the underlining, they will turn away in frustration and leave your site with a negative feeling about it.

If at all possible, you should avoid underlining text if the underlined text could be mistaken for a link.

Advertisement