Though you can add underline a text or an HTML element in different ways, you shouldn’t use one method in every situation. Depending on context, you need to select the appropriate solution.
Check the different contexts mentioned in the problems below and get the solutions you need-
Problem:
You want to underline-
- a misspelled word or
- proper names / proper noun like people, place, organizations etc.
Solution:
Use <u> tag for these purposes. Include the words that you want to apply underline between <u> and </u> tags. See the example below-
<!-- Example of misspelled word.-->
Misspelled words are marked as <u>underlned</u>.
<!-- Example of Chinese proper noun.-->
<u>北京</u> is the capital of China.
Note: you can of course decorate the underlined words using CSS.
Caution: Don’t use <u> for presentation purpose. Developers used to underline text with this tag long before. It was deprecated from HTML 4.1 (meaning it will work technically, but, not recommended to use now) and restored in HTML5 with semantic meaning mentioned in the problem above.
Problem:
You just want to underline to highlight words for styling purpose.
Solution:
For presentation purpose, to underline text in a webpage, you should use CSS text-decoration property. See the example below-
<span style=”text-decoration:underline;”>HTML and CSS</span> are the at first step to learn web development.
Problem:
You want to add underline to any HTML element.
Solution:
Use CSS border-bottom:underline; property. Actually, it adds a line at the bottom across the element. It looks like underline, but, not a underline though. See the example below-
<p style=”text-decoration:underline;”>HTML and CSS are the at first step to learn web development. </p>
Caution: Underline is not a good idea to highlight text, as, user may mix it with hyperlink. Instead consider using <strong>, <em>, <b> etc.