HTML markup consists of tags with CSS properties by default.

Paragraphs, words or letters in web pages can be formatted with CSS help (underline, bold, Italic…), also HTML architecture includes HTML formatting tags with these features by default;

Bold Tags <b> & <strong>

<b> Tag

In the use of the <b> (bold) tag, internet browsers visually show the web site visitors the text between the tags as bold and black, it is used to attract the attention of the web site visitors, it does not emphasize the importance of the word or text to the browser side.

The use of <b> tag in headings is unnecessary, instead heading tags (h1, h2, h3, h4, h5, h6) should be used.

If the <b> tag is not used much by assigning a class, the text can be bolded from the CSS settings instead of using the <b> tag.

Usage:

<p>Heading tags should be used instead of <b>the bold</b> tag in the titles of the website content.<p>

Browser View:

Heading tags should be used instead of the bold tag in the titles of the website content.

<strong>

When the <strong> tag is used, internet browsers show the text between the <strong> tag as bold and black to the website visitors as in the <b> tag, emphasizing the importance of the text on the browser side.

Usage:

<p><strong>The strong tag</strong> emphasizes the importance of the text.</p>

Browser View:

The strong tag emphasizes the importance of the text.

Difference between <b> and <strong> Tags

The <b> tag generally helps crawlers to visually bold text, while the <strong> tag helps the browser to highlight the importance of text relevant to the entire page content.

These two tags offer website visitors the same image, black and bold text, but the main difference is on the browser side. Instead of using the <b> tag, the same image can be given by changing the font settings of the text with CSS, but the preference of the CSS settings instead of this tag will not give the same result, since the <strong> tag is important.

In terms of SEO, the <strong> tag should be used instead of the <b> tag.

Underline Tag <u>

The <u> (underline) tag is used to highlight any part of the text and draw attention.

Usage:

<p>The text between <u>the underline tag<u> appears underlined in the browser.</p>

Browser View:

The text between the Underline tag appears underlined in the browser.

Italic Tags <i> & <em> & <cite> & <var>

<i>

The HTML i tag (<i> Italic) tag displays the text in Italics, as the name suggests. It is generally used when describing biological Latin terms and when describing technical terms.

Like the <b> tag, it doesn’t just visually present it, but rather specifies the text inside the <i> tag to the browser.

Usage:

<p><i>Proxy</i> servers control and route traffic.</p>

Browser View:

Proxy servers control and route traffic.

<em>

When using the <em> (emphasis) tag, it will show text like the <i> tag in Italics. Derived from the initials of the words emphasis, this tag is used to emphasize, as the name suggests.

The emphasis <em> tag is used to highlight words that are more relevant to the content, rather than marking long text on the page.

The use of the <em> tag for the purpose of giving italic appearance is meaningless, instead, the Italic appearance of the font can be preferred from the CSS settings.

Usage:

<p><em>The emphasis</em> tag is used to emphasize the content.</p>

Browser View:

The emphasis tag is used to emphasize the content.

Difference between <i> and <em>

The <i> tag represents a foreign word or a technical expression, while the <em> tag represents the word that highlights the content. Both look visually the same to website visitors, but the situation is different on the browser side.

<cite>

Cite (citation element) tag is used when talking about a book, song, poem or movie, to indicate the name of the work in question.

Internet browsers display the text in the <cite> tag as Italic, but the main purpose of this tag is of course not to be used as an Italic font.

Usage:

<p><cite>The Lord of the Rings</cite> by J.R.R Tolkien</p>

Browser View:

The Lord of the Rings by J.R.R Tolkien

<var>

The <var> (variable) tag is used to specify variables within the page, the variables inside the <var> tag appear Italic by default.

While specifying the formulas of science branches such as mathematics and physics, the variables are shown in the <var> tag.

Usage:

<p><var>E</var>=<var>m</var><var>c<sup>2</sup></var></p>

Browser View:

E=mc²

<address>

As the name suggests, the <address> tag should be used when specifying an address. It is displayed in Italics by browsers, but using the <address> tag to give it the appearance of italics is incorrect.

Usage:

<p>Google Headquarters</p><address>1600 Amphitheatre Parkway Mountain View, CA 94043, ABD</address>

Browser View:

Google Headquarters

HTML Crossing Out Tags

<s>

When using the <s> (strikethrough) strikethrough tag, internet browsers show the text between the <s> tag as strikethrough.

It can be used to cross out a previously written phrase that is no longer important.

Usage:

<p><s>Products in stock with 50% discount!</s>Out Of Stock!</p>

Browser View:

Products in stock with 50% discount!Out Of Stock!

<del>

When the <del> (delete) tag is used, it shows the text between the <del> tag as crossed out by internet browsers, similar to the <s> tag.

It represents that part of the text has been deleted, but it is not a label that is in much use.

Usage:

<p>HTML is a <del>programming</del> markup language.</p>

Browser View:

HTML is a programming markup language.

<mark>

The <mark> tag is used for a specific area in the text to be marked, by default the background color of the text inside the <mark> tag is marked yellow.

It does not emphasize the importance of the content like the <strong> tag. The <mark> tag is used to show the designated area to the website visitor with color difference.

Usage:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <mark>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</mark>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Browser View:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<small>

Normally browsers default font size is 16px for <p> tag. When using the <small> tag, the font size of the text between the <small></small> tag changes to 13.3333px.

It is not a very preferred tag because it can give the same look with CSS.

Usage:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</small> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Browser View:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Subscript and Superscript

<sub> Tag

When using <sub> (subscript), the subscript tag, the part between the  tag is displayed as a subscript on the browser side. It can be used in chemistry to specify the atomic number of molecules or in mathematics to specify sequences.

Usage:

<p>The formula of water, is H<sub>2</sub>O.</p>

Browser View:

The formula of water, is H₂O.

<sup> Tag

<sup> (superscript), when using the superscript tag, the part between the  tag is displayed as a superscript on the browser side. It is used to represent exponential expressions in mathematics and to specify order in languages.

Usage:

<p>(a-b)<sup>2</sup> =a> <sup>2</sup> -2ab +b<sup>2</sup></p><p>5<sup>th</sup></p>

Browser View:

(a-b)² =a> ² -2ab +b²

5^th

Heading Tags

Each of the 6 heading tags (h1,h2,h3,h4,h5,h6) in the HTML structure reflects the part between the tag to the browser with a different font size. As you go from H1 to H6, the importance of the tag and the font size decrease.

<h1> Tag

The H1 tag has the largest font among the heading tags. By default, the title between the <h1> tag is displayed as 32px by browsers.

<h2> Tag

The default font size is 24px.

<h3> Tag

The default font size is 18.72px.

<h4> Tag

The default font size is 16px.

<h5> Tag

The default font size is 13.28px.

<h6> Tag

The default font size is 10.72px.

Usage:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Browser View:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Source:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element