HTML Formatting: HTML Tags for Text Formatting (With Examples)
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.
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.
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
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.
Must Check: How to Create Table in HTML
Explore Popular HTML Courses
Read Later
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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>
Output
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.
This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio
Top Picks & New Arrivals
