Home
HTML

HTML Formatting

Here, 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..

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. 

HTML Formatting

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

html bold text formatting example

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 strong text formatting example

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

html italic text formatting example

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 emphasized text formatting example

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 marked text formatting example

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 underline text formatting example

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 small text formatting example

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 subscript text formatting example

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 superscript text formatting example

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 delete text formatting example

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

html insert text formatting example

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.