When is it best to use HTML presentation tags or CSS to style elements?

The <u> tag

The HTML Unarticulated Annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

Avoiding using of <u>

Non-semantic underlines

To underline text without implying any semantic meaning, use a <span> element with the text-decoration property set to "underline".

NOTE:

Along with other pure styling elements, the original HTML Underline () element was deprecated in HTML 4; however, <u> was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.

Important Note :-

Be careful to avoid using the <u> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.

The <span> tag

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything.

.pro {text-decoration: underline;}

<p>a <u>pro</u>grammar</p> 
<p>a <span class="pro">pro</span>programmer.</p>

Both are nice nice ways to underline your text but I would suggest you to use the html u tag because it will make your html look less messy and more organised. Happy coding

although span is used for styling purposes, u tag is semantically correct.

If your goal is to underline a text, you can use both ways.

The HTML tag was deprecated, but returned in HTML5, so you may find some incompatibility with it.

The usage of style attribute overrides any style set globally. It will override any style set in the HTML tag or external style sheet. As you can see in the first phrase in the snippet.

.override{
text-decoration: overline;
}

.underline{
text-decoration: underline;
}
.line-through{
text-decoration:line-through;
}
.overline{
text-decoration:overline;
}

<p>This is my <u class="override">first</u> phrase</p>
<p >This is my <span class="underline">second</span> phrase</p>
<p >This is my <span class="line-through">third</span> phrase</p>
<p >This is my <span class ="overline">fourth</span> phrase</p>