HTML Formatting - How to Apply Text Formatting in HTML?

1. Introduction To HTML Formatting

You may be familiar, whenever you use Microsoft Office i.e Word, Excel, Powerpoint, you change text properties like making text bold, italic or strike through. Sometime you change the font-size, make it small, or extra large, this is called text formatting. Interestingly HTML or XHTML provides the same facility in the form of HTML formatting elements. These are the super cool elements incorporating some special property and we can only use them for that special purpose only. We surround our text with these  elements and get the output in the form of bold text, italic text, etc. Meanwhile following is a list of all these elements:

• <b> - Bold Text
• <i> - Italic Text
• <strong> - Important Text
• <em> - Emphasized Text
• <small> - Small Text
• <mark> - Marked Text
• <ins> - Inserted Text
• <del> - Deleted Text
• <sub> - _{Subscript Text}
• <sup> - ^{Superscript Text}

2. Bold <b> HTML Formatting Element

Without adding any importance to the text, it just bolds the text. For instance:

<p>Text is bold using b element.</p>
<p>
<b>HTML is not a programming language.</b> Therefore HTML has nothing to do with programming language.</p>

3. Italic <i> HTML Formatting Element

It do not add any extra importance to the text, it just italicise the text. For Example:

<p>Certain portion is italic using i element. See the results.</p>
<p>
<i>Do you know HTML produce results without closing tags too?</i> That is to say HTML is loosely typed language.
</p>

4. Strong <strong> HTML Formatting Element

Luckily it adds an extra importance to the text unlike <b>. It bolds the text as well as gives importance . For understanding, see below example:

<p>We used strong element to make some text strog. Strong text has some importance unlike bold text. See results in codelab.</p>
<p>
<strong><marquee> tag is not supported by all browsers.</strong> Only Iternet explorer supports it.</p>

5. Emphasized <em> HTML Formatting Element

It has similar behaviour to <strong> and similar property like <i>. Besides making text italic, it adds an extra importance to the text unlike <i>. Consider below example:

<p>Unlike i element, use em element to make the text italic and important. See results in Pielab.</p>
<p>
<em>There was a time when browsers fights was very common</em>,Some of the browsers has their own tags.</p>

6. Small <small> HTML Formatting Element

Sometime we need to make our text look small from the surrounding text, for that purpose we use <small> element. To understand completely, see the below instance:

<p>You can see a portion of text is seen small on the screen from the surrounding text. We do this by using small element.</p>
<p>
<small>This text is looking small,</small> Because a small tag surrounds it changing its formatting.
</p>

7. Mark <mark> HTML Formatting Element

Interestingly this tag can make the text marked or highlighted. The text will look super cool from the remaining text. Visit Codelab for example:

<p>A certain portion of text looks highlighted from the surrounding text. We do this by using mark element.</p>
<p> 
<mark>Do you Know first HTML description released was a group of 18 tags.</mark> And at that time, it brought revolution over the internet. 
</p>

8. Delete <del> HTML Formatting Element

Previously you might be familiar with strikethrough property of word processing softwares. Meanwhile HTML uses <del> element to strike through or you may say delete the text. Visit Codelab for understanding:

<p>A small portion of text is deleted by using del element. We do this for users to neglect the striked text.</p>
<p>
<del>Initially Tim Berners Lee invented the internet in 1989.</del> As you see the first line is deleted using del element.
</p>

9. Insert <ins> HTML Formatting Element

Previously we delete the text using <del> element, similarly we insert some text using <ins> element. The text we insert gets underlined. Visit Codelab for understanding:

<p>A small piece of text is inserted by using ins element into the paragraph. The inserted text seems underlined.</p>
<p>
<ins>This text is inserted.</ins> However this is normal text and have no underline.
</p>

10. Subscript <sub> HTML Formatting Element

Sometime we add some in a paragraph or a heading but we want it to look in subscript i.e below the normal text. We do this by using <sub> element.

<p>Some of the text looks in subscript using sub element.</p>
<h2>Tuts Insider<sub>HTML History</sub></h2>
<p>
<sub>Hey, this is subscript text, don't mess with it.</sub> While this is normal text, you can happily mess with this portion. Also, this statement is just for fun.
</p>

11. Superscript <sup> HTML Formatting Element

Unlike <sub>, <sup> add the text in superscript that looks above the normal text in a paragraph or a heading.

<p>Some of the text looks in superscript using sup element.</p>
<h2>Tuts Insider<sup>HTML History</sup></h2>
<p>
<sup>This text will go in superscript</sup>, meanwhile this text will remain in normal position.
</p>