b, i, u, s tags: should we use CSS instead?

<b>, <i>, <u>, and <s> tags are purely "visual" and don't convey any semantic meaning.

I've <em>already</em> told you <em>four</em> times
that I do <em>not</em> like <i>The Lord of the Rings</i> movie.
Please, stop.

Nevertheless, these tags are not officially deprecated and not even marked as "not recommended" on MDN Web Docs and W3Schools.

For instance, here is a note from W3Schools:

> According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should be denoted with the <mark> tag.
>
> You can also use the following CSS to set bold text: "font-weight: bold;".

As you can see, though W3 article somewhat discourages to use <b>, it says nothing about why it is not deprecated at all.

Hence my questions:

• Why these tags are not deprecated?
• Whether we should replace them with CSS to better follow "separate content from presentation" idea?
• In other words, is CSS font-weight: bold is really a 1-to-1 replacement for <b>? (and the same for <i>, <u>, <s>)

Still valid HTML elements

The <b>, <i>, <s> and <u> are still part of the HTML Living Standards (as at 28 June 2023) - Text-level semantics.

They have all been redefined to some degree to stop being style elements and instead be more semantic elements.

Semantic definitions vs their old style meaning

<b> used to mean bolded text, but is now used to repesent text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede. MDN likes to call it the Bring Attention Text

<i> used to mean italicized text, but is now to bring alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts. MDN likes to call it the Idiomatic Text

<s> has been somewhat interpreted as a <s>strikethrough</s> text, similar to <strike>. <strike> has been deprecated, but <s> has stayed on because it has semantic meaning: it represents content (word, phrase or statement) that is no longer accurate or no longer relevant but is still shown to convey change to the document. MDN still likes to call it the Strikethrough Text which I think dilutes it semantic meaning. I'd rather call it the Substituted Text.

<u> used to just mean underlined text, but is now used to represent span of text with an unarticulated non-textual annotation (e.g. text that is misspelt). MDN likes to call it the Unarticulated Annotation.

So you should not use these tags for their old styling meanings. Instead, you should use them if their semantic meanings apply to your content. Also, particularly for <u> tag, you should ideally add CSS styling to differentiate it from hyperlinks. For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

u {
  text-decoration: underline wavy red;
}

<!-- language: lang-html -->

<p>You could use the <code><u></code> tag to highlight <u>speling</u> mistakes, so the writer can <u>corect</u> them.</p>

<!-- end snippet -->

Other similar HTML elements

Also note there are other semantic elements which are somewhat similar to <b> and <i>: <strong> and <em>. You can refer to their corresponding definitions for details.

MDN also gives better differentiation between <strong> and <b> here as well as <em> and <i> here.

• One guest why it is not deprecated is to support old websites that are not actively developed/maintained.
• IMHO yes it separates the content from the representation, and it also encourages/forces us to enhance CSS skills. But not to replace it, somehow it leaves a structural trace. Since not all will be rendered browser, some content will be scrapped. I rather use that tag, when it is easy and possible, so suits your need.
• no, only visually.