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 ins (inserted) and u (underline) are displayed in the same way by the web browser. Both underline the text that is marked up in this way. This means that they draw a thin horizontal line on the baseline of the text. However, there is a significant difference between these two HTML tags.
Unlike the u tag, the HTML ins tag has a logical meaning. This tag is used for content that is added after the text has been written. The added portion of text begins with the opening tag <ins> and must be closed with </ins>.
In practice, the ins and DEL tags. are often used together. A section of text marked 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 read.
The HTML <ins> Tag
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>Monday, December 30, 2024</del> <ins><b><mark>Monday, January 13, 2025</mark></b></ins>.With a protected space is inserted between the two dates to separate them more clearly.
The HTML <u> Tag
The HTML u tag doesn't have any semantic meaning, but is used for visual styling purposes only. Text marked with u is underlined. Underlined text begins with <u> and must be closed with the end tag </u>.
ExampleCreate 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>Monday, December 30, 2024</s> <u><b><mark>Monday, January 13, 2025</mark></b></u>.With a protected space is inserted again between the two dates to separate them more clearly.
The ins tag is rarely used in practice because it would clutter the web page. It doesn't provide any additional information to the user.
The two HTML tags 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 underlined text is a link. When they realize that they have been fooled by the underlining, they will turn away in frustration and leave your Website 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.