HTML Formatting | Text Styling and Formatting in HTML

HTML contains several elements for defining text with a special meaning.

As an example:

Editor

Loading...

Exmplanation:

• <b>: This is a bold element. It makes the text inside it bold.

• <i>: This is an italic element. It makes the text inside it italic.

• <sub>: This is a subscript element. It makes the text inside it smaller and positioned below the baseline.

• <sup>: This is a superscript element. It makes the text inside it smaller and positioned above the baseline.

HTML Formatting Elements

HTML Formatting Elements are used to add formatting to text and content on a webpage.

Here are some commonly used HTML formatting elements:

Formatting Element	Example Output
**Bold text**	Bold text
<b>Bold text</b>	Bold text
*Italic text*	Italic text
<i>Italic text</i>	Italic text
<u>Underlined text</u>	Underlined text
<mark>Highlighted text</mark>	Highlighted text
<small>Small text</small>	Small text
<sub>Subscript text</sub>	H2O
<sup>Superscript text</sup>	23
<del>Deleted text</del>	Deleted text
<ins>Inserted text</ins>	++Inserted text++
**Strong text**	Strong text
<strong>Strong text</strong>	Strong text

HTML <b> and <strong> Elements

The <b> and <strong> elements are used to add bold formatting to text in HTML documents.

But, there is a semantic difference between the two:

• <b> is a presentational element that simply makes the enclosed text bold without conveying any additional meaning or importance.

• <strong> is a semantic element that indicates that the enclosed text is of strong importance or emphasis. It is used to convey meaning to both human readers and assistive technologies, such as screen readers.

HTML <i> and <em> Elements

Both <i> and <em> elements are used to add italic formatting to text in HTML documents.

But, there is a semantic difference between the two:

• <i> is a presentational element that simply makes the enclosed text italic without conveying any additional meaning or importance.

• <em> is a semantic element that indicates that the enclosed text is of emphasis or importance.

HTML <small> Element

The <small> element is an HTML formatting element that is used to indicate that the enclosed text should be displayed in a smaller font size than the surrounding text.

As an example:

Editor

Loading...

In this example:

• The words "smaller text" would be displayed in a smaller font size than the rest of the text in the paragraph.

<small> deprecated

Use of the <small> element has been deprecated in HTML5, which means that it may not be supported in all browsers.

HTML <mark> Element

The <mark> element is an HTML formatting element that is used to highlight a portion of text on a webpage. It is often used to draw attention to important or relevant information, such as search terms or key phrases.

As an example:

Editor

Loading...

HTML <sub> Element

The HTML <sub> element is used to indicate subscript text in a document. Subscript text is text that appears slightly below the normal line of text, and is typically used for mathematical or chemical formulas, footnotes, or any other text that should be displayed in a smaller size and lower position than the surrounding text.

Editor

Loading...

HTML <sup> Element

The HTML <sup> element is used to indicate superscript text in a document. Superscript text is text that appears slightly above the normal line of text, and is typically used for mathematical exponents, ordinal numbers, and other similar content.

As an example:

Editor

Loading...