HTML has many formatting elements, with the help of which you can format the text as bold, italicized, or underlined without using CSS. These tags are used to defining text with a special meaning.
In this article, you will read about HTML formatting and also learn various types of HTML text formatting with the help of examples. But before learning these html formatting tags, let's take an overview about what is html formatting or html text formatting.
HTML Formatting
HTML formatting is a kind of art in which you can make your text more stylish and attractive by using some formatting elements. These Formatting elements were specially designed to display special types of text on Web page. It can be bold, Italic, superscript, subscript etc.
There are 11 basic HTML formatting elements that can be used to make text stylish and attractive. In the following table, HTML text formatting tags with description are explained.
| S.No | Tag | Description |
|---|---|---|
| 1. | <b> | To display bold text |
| 2. | <strong> | To display important text |
| 3. | <i> | To display italic text |
| 4. |
<em> | To display emphasized text |
| 5. | <mark> | To display marked/highlighted text |
| 6. | <u> | To display underline text |
| 7. | <small> | To display smaller text |
| 8. | <sub> | To display subscripted text |
| 9. | <sup> | To display superscripted text |
| 10. | <del> | To display a portion of text that has been deleted from a document |
| 11. | <ins> | To display portion of text that has been inserted to a document |
Let's understand these HTML formatting tags and elements one by one with depth.
Html <b> and <strong> Elements
The html <b> element is used to display text in bold font on a web page. The <b> is a physical tag (without any logical importance). It begins with <b> tag and ends with </b> tag.
Now let's understand html bold text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html bold text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <b>bold text</b> formatting.</p>
</body>
</html>
Output
The html <strong> element is also used to display text in bold font on a web page but <strong> is an logical tag that command the browser to show the importance of the text. It begins with <strong> tag and ends with </Strong> tag.
Now let's illustrate html strong text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html strong text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <strong>important text</strong> formatting.</p>
</body>
</html>
Output
Html <i> and <em> elements
The html <i> element is used to display text in italic style on a web page. The <i> tag is a physical tag (without any extra importance) that is used in order to show alternative mood, thought, voice etc. It begins with <i> tag and ends with </i> tag.
Now let's illustrate html italic text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html italic text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <i>italic text</i> formatting.</p>
</body>
</html>
Output
The html <em> element is used to display emphasized text in italic style on a web page. It begins with <em> tag and ends with </em> tag.
Now let's understand html Emphasized text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html emphasized text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <em>emphasized text</em> formatting.</p>
</body>
</html>
Output
Html <mark> Element
The html <mark> element is used to display text in highlighted or marked form on web page. It begins with <mark> tag and ends with </mark> tag.
Now let's understand html mark text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html marked text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <mark>marked text</mark> formatting.</p>
</body>
</html>
Output
Html <u> Element
The html <u> element is used to underline the text that is unarticulated annotation or misspelled. It begins with <u> tag and ends with </u> tag.
Now let's illustrate html underline text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html underline text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <u>underline text</u> formatting.</p>
</body>
</html>
Output
Html <small> Element
The html <small> element is used to display text in smaller font size on web page. It begins with <small> tag and ends with </small>
Now let's understand html small text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html small text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <small>small text</small> formatting.</p>
</body>
</html>
Output
Html <sub> Element
The html <sub> element is used to display text in subscript form (character appears half a below the normal line) on web page. It begins with <sub> tag and ends with </sub> tag.
Now let's illustrate html subscript text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html subscript text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <sub>subscript text</sub> formatting.</p>
</body>
</html>
Output
Html <sup> Element
The html <sup> element is used to display text in superscript form(character appears half a above the normal line) on web page. It begins with <sup> tag and ends with </sup> tag.
Now let's understand html superscript text formatting with the help of following code;
<!DOCTYPE html><html>
<head>
<title>Html superscript text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <sup>superscript text</sup> formatting.</p>
</body>
</html>
Output
Html <del> Element
The html <del> element is used to display a portion of text that has been deleted from a document. It begins with <del> tag and ends with </del> tag.
Now let's understand HTML delete text formatting with help of following illustration;
<!DOCTYPE html><html>
<head>
<title>Html delete text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <del>delete text</del> formatting.</p>
</body>
</html>
Output
Html <ins> Element
The html <ins> element is used to display a portion of text that has been inserted to a document. It begins with <ins> tag and ends with </ins> tag.
Now let's illustrate html insert text formatting with the help of following example;
<!DOCTYPE html><html>
<head>
<title>Html insert text formatting Example</title>
</head>
<body>
<p> This is a paragraph with <del>delete text</del> <ins>insert text</ins> formatting.</p>
</body>
</html>
Output
Conclusion
From above we have learnt about HTML formatting and also learn various types of HTML text formatting with the help of examples. HTML formatting is a kind of art in which you can make your text more stylish and attractive by using some formatting elements. There are 11 basic HTML formatting elements that can be used to make text stylish and attractive.