HTML Formatting: HTML Tags for Text Formatting (With Examples)

HTML Formatting: HTML Tags for Text Formatting (With Examples)

5 mins read60.6K Views Comment
clickHere
Esha
Esha Gupta
Associate Senior Executive
Updated on Oct 27, 2023 18:41 IST

Have you ever wondered how is text formatting done in HTML using HTML formatting tags? Let us understand it in detail with the help of various examples.

2022_04_HTML-Text-Formatting-1.jpg

Text formatting helps us improve the visual appeal of the text in any document. HTML provides many tags to format the appearance of the text on the web page and make it look attractive to site visitors. In this blog, we will discuss what HTML formatting is. You will understand how to work with HTML text formatting tags to bold, italicize, emphasize, small, large, insert, delete, superscript, and subscript text in an HTML document.

What is HTML Formatting?

HTML Formatting is a process that allows us to format text to increase its visual appeal. Various HTML tags can change how text appears on a web page and make the text attractive. We can use HTML text formatting tags to bold, italicize, underlined text, and do more.

Explore Popular HTML Courses

HTML Underline Tag – Understand u Tag with Examples
HTML Underline Tag – Understand u Tag with Examples
This blog explains the u tag to underline text in HTML. You will also understand when to use the underline tag.
Creating HTML Links – Tutorial With Examples
HTML Heading and Paragraph Tags Explained With Examples
HTML Heading and Paragraph Tags Explained With Examples
This tutorial explains how to create headings and paragraphs in HTML documents using heading and paragraph tags.

HTML Formatting Tags

Now let us begin with the different HTML formatting tags.

HTML <b> and <strong> Tags

In HTML, <b> tag and <strong> tag display the text in bold front. Let us understand about both in detail

HTML <b> tag

The HTML <b> tag specifies bold text, without any logical importance. It opens with <b> and ends with </b> tag.

Syntax

<b>Content Goes Here.</b> 

Example of HTML <b> Element

 
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><b>This is bold text.</b></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-181858.jpg

HTML <strong> Tag

The HTML <strong> tag is a logical tag that specifies text with importance. The content inside the <strong> element appears in the bold text but with semantic importance. It opens with <strong> and ends with </strong> tag.

Syntax

<strong>Content Goes Here.</strong>

Example of HTML <strong> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><strong>This is strong text with logical importance.</strong></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-182027.jpg

HTML <i> Tag

The HTML <i> tag displays the text in italics. It begins with <i> tag and ends with </i> tag.

Syntax

<i>Content Goes Here.</i>

Example of HTML <i> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Italics Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><i>This is italics text.</i></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-182237-2.jpg

HTML <em> Tag

The HTML <em> tag emphasizes the text with semantic importance. It begins with <em> tag and ends with </em> tag.

Syntax

<em>Content Goes Here.</em>

Example of HTML <em> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><em>This is emphasized text.</em></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-182426-1.jpg

HTML <mark> Tag

The <mark> tag in HTML is used to highlight a text. It begins with a <mark> tag and a closes with a </mark> tag.

Syntax

<mark>Content Goes Here.</mark>

Example of HTML <mark> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Highlighted Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p><mark>This is highlighted text.</mark></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-182608-1.jpg

HTML <sup> Tag

The <sup> tag helps us to superscript a text. It has an opening <sup> tag and a closing </sup> tag. Superscript text displays with a raised baseline using a smaller font.

Syntax

<sup>Content Goes Here.</sup>

Example of HTML <sup> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p>This is<sup>superscript</sup>text.</p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-182814.jpg

HTML <sub> Text

The <sub> element helps us to subscript a text on a web page. It has a starting tag <sub> and a closing tag </sub>. The subscript text appears with a lowered baseline using a smaller font.

Syntax

<sub>Content Goes Here.</sub>

Example of HTML <sub> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>This is normal text.</p>
<p>This is<sub> subscript</sub>text.</p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-182941.jpg

HTML <small> Tag

The HTML <small> tag specifies smaller text. It is mostly used for copyright and legal text on a web page. With this tag, the size of the text will reduce one font size more than the previous font size.

Syntax

<small>Content Goes Here.</small>

Example of HTML <small> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>Small Font:<small> This is an example to show Smaller Text.</small></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-183110.jpg

HTML <big> Tag

The HTML <big> tag helps us make the text’s size larger than the surrounding text. Using this tag makes the font size larger than the previous one.

Syntax

<big>Content Goes Here.</big>

Example of HTML <big> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Big Text Example</title>
</head>
<body>
<p>Big Font:<big> This is an example to show Larger Text.</big></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-183412-2.jpg

HTML <del> Tag

The HTML <del> tag specifies that text that has been deleted from a document. The <del> element starts with a <del> tag and ends with a </del> tag. The text between these tags shows as deleted text with a line striking through it.

Syntax

<del>Content Goes Here.</del>

Example of HTML <del> tag

 
<!DOCTYPE html>
<html>
<head>
<title>Delete Text Example</title>
</head>
<body>
<p>Check out this example,<del>this text will be deleted.</del></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-183608-1.jpg

HTML <ins> Element

The HTML <ins> tag specifies that text has been inserted into a document. It has a starting tag <ins> tag and a closing tag </ins>. The text between these tags appears as inserted text with an underline beneath it.

Syntax

<ins>Content Goes Here.</ins> 

Example of HTML <ins> Tag

 
<!DOCTYPE html>
<html>
<head>
<title>Insert Text Example</title>
</head>
<body>
<p> Check out this example,<ins> to insert a new paragraph.</ins></p>
</body>
</html>
Copy code

Output

2023_10_Screenshot-2023-10-27-183740-1.jpg
Creating HTML Tables (Tutorial With Examples)
Creating HTML Tables (Tutorial With Examples)
This guide offers an introduction to HTML tables. You will learn how to create tables in HTML to present tabular data. Tables are a great way to present data visually....read more
How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more
Top Features of HTML5 With Examples
Top Features of HTML5 With Examples
HTML5 is the latest version of Hypertext Markup Language, used for structuring content on the web. It introduces new elements, multimedia support, and improved semantics, making it essential for modern...read more

Conclusion

In this article, we discussed the commonly used HTML formatting tags. We covered the following tags:

HTML Text Formatting Tag Description
<b> To specify bold text
<strong> Denotes important text
<i> Defines italics text
<em> Specifies emphasized text
<mark> Defines highlighted text
<sup> Shows superscripted text
<sub> Shows subscripted text
<small> Specifies text with smaller font size
<big> Specifies text with larger font size
<del> Defines deleted text
<ins> Specifies inserted text

We hope these HTML formatting elements will help you make your next web page more attractive. Explore some other interesting HTML5 elements; read our blog – Understanding HTML Elements With Examples.

FAQs

What is the use of HTML text formatting?

Text formatting in HTML helps us improve the look and feel of web pages. Many text formatting tags are available in HTML to make text bold, italics, small, large, superscript, subscript, insert, delete, and more.

What is the difference between bold and strong tags in HTML?

The difference between a bold tag and a strong tag is that the bold tag makes the text bold visually. On the other hand, the strong tag semantically emphasizes the important text and denotes that this is an important word or text section.

What is the difference between em tag and strong tag in HTML?

The difference between these two tags is that the em tag denotes a stressed emphasis while the strong tag specifies that the text has strong and semantic importance.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio