Formatting Elements in HTML

Dot Net Tutorials

Back to: HTML Tutorials

Formatting Elements in HTML with Examples

In this article, I am going to discuss Formatting Elements in HTML with Examples. Please read our previous article where we discussed
Classes and Ids in HTML with Examples. At the end of this article, you will learn everything about HTML Formatting Elements with
Examples.

What is HTML Formatting?

HTML Formatting is a process of formatting text for a better look and feel. HTML provides us the ability to format text without using CSS. There
are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined, etc.

HTML Formatting Elements

In Html, there are many tags that are useful to highlight text with special meaning. These tags are known as formatting tags. There is a total of 10
formatting tags in Html. Formatting tags are designed to highlight special types of text.

<b> – Bold text

<strong> – Important text

<i> – Italic text

<em> – Emphasized text

<U> – Underline text

<mark> – Marked text

<small> – Smaller text

<del> – Deleted text

<ins> – Inserted text

<sub> – Subscript text

<sup> – Superscript text

<tt> – monospaced font

<big> – big font

The HTML <b> and <strong> Formatting Element

The <b> tag is used to make the text bold. The <strong> tag is used to make the text bold and give extra importance to the text. The text inside
the strong tag is considered as important.

<p> This text is normal.</p>

<p> <b>This text is bold.</b> </p>

<p> <strong>This text is very important!</strong> </p>

<p> This text is normal.</p> <p> <b>This text is bold.</b> </p> <p> <strong>This text is very important!</strong> </p>

<p> This text is normal.</p>

<p> <b>This text is bold.</b> </p>
<p> <strong>This text is very important!</strong> </p>

Output: When you run the above code, you will get the following output in the browser.

<p> To learn HTML visit <b> Dot Net Tutorial </b> </p>

<p> To learn HTML visit <strong> Dot Net Tutorial </strong> </p>

<p> To learn HTML visit <b> Dot Net Tutorial </b> </p> <p> To learn HTML visit <strong> Dot Net Tutorial </strong> </p>

<p> To learn HTML visit <b> Dot Net Tutorial </b> </p>
<p> To learn HTML visit <strong> Dot Net Tutorial </strong> </p>

Output: When you run the above code, you will get the following output in the browser.
The HTML <i> and <em> Formatting Element

In Html, <i> and <em> elements are used to italicize a text. Both <i> and <em> have the same functionality.

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

<p><em>This text is italic.</em></p>

<p>This text is normal.</p> <p><i>This text is italic.</i></p> <p><em>This text is italic.</em></p>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>
<p><em>This text is italic.</em></p>

Output: When you run the above code, you will get the following output in the browser.
The HTML <u> Element

The underline tag is used to add underline to the text enclosed inside it.

<p><u>This is an underlined text</u></p>

The HTML <mark> Formatting Element

In Html, the <mark> element is used to highlight a particular text.

<p>Learning <mark>Html</mark> is very important</p>

Output:

The HTML <small> Formatting Element

In Html <small> element is used to define a smaller text.

<p>This is normal text.</p>

<p><small>This is smaller text.</small></p>

<p>This is normal text.</p> <p><small>This is smaller text.</small></p>

<p>This is normal text.</p>

<p><small>This is smaller text.</small></p>

Output:

The HTML <del> Formatting Element

The <del> element in HTML is used to display the element that has been deleted. It will strikethrough the deleted element to show that it has
been removed.

<p>My favorite color is <del>red</del> blue.</p>

Output:

The HTML <ins> Formatting Element

The <ins> element in HTML is used to indicate the text that has been inserted into the document. Inserted items are denoted by an underline.

<p>My favorite color is <del>red</del> <ins>blue</ins>.</p>

Output:
The HTML <sub> Formatting Element

In Html, the <sub> element is used to define subscript text. The subscript text normally appears half a character lower than the regular line.

<p>This text is _subscripted.</p>

<p>H₂O, CH₄</p>

<p>This text is _subscripted.</p> <p>H₂O, CH₄</p>

<p>This text is _subscripted.</p>

<p>H₂O, CH₄</p>

Output:
The HTML <sup> Formatting Element

In Html, the <sup> element is used to define superscript text. The superscript text normally appears half a character higher than the regular line.

<p>This text is ^{superscripted}.</p>

<p>2², x³ </p>

<p>This text is ^{superscripted}.</p> <p>2², x³ </p>

<p>This text is ^{superscripted}.</p>

<p>2², x³ </p>

Output:
The HTML <tt> Formatting Element

The content of a <tt>…</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters
are of different widths (for example, the letter ‘m’ is wider than the letter ‘i’). In a monospaced font, however, each letter has the same width.

<p>The following word uses a <tt>monospaced</tt> font.</p>

Output:
The HTML <big> Formatting Element

The content of the <big>…</big> element is displayed one font size larger than the rest of the text surrounding.

<p>The following word uses a <big>big</big> Font</p>

Output:
In the next article, I am going to discuss Quotations in HTML with Examples. Here, in this article, I try to explain Formatting Elements in
HTML with Examples and I hope you enjoy this HTML Formatting Elements with Examples article.

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies,
Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud
Computing, Microservices, Design Patterns and still learning new technologies.