Day-4 Formatting Tags in HTML

Text Formatting Tags of HTML :

In the previous days we learnt how to create a web page with basic elements in HTML. In this section, we are going to learn about how to format the text such as making bold, italic, underline, changing font size and more. Formatting text is very important as well as interesting task in creating web pages.

1.Bold, Italics, Underline:
2. , and tags :
3. Subscript and Superscript :
4.Inserting and Deleting :
5.Comparison of tags:

1) <bold> , <italic>, <underline>:

, ,  are the tags to make the text as bold, italic and underline. These are all container tags. You know well about container tags. All container tags required a closing tag. These tags are otherwise known as “Physical Style” tags.

<b>This is used to bold the text</b>
<p>Below are listed the formatting tags available in the latest 
version of HTML</p>
<i>This is used to make the text italic</i>

2) , and tags :

In addition to bold and italic tags i.e. and , HTML provides , tags to make the text as bold and italics. These tags are container tags. tag keep text in small size.

<strong>This is used to bold the text</strong><br/>
    <small>This is used to make the text small</small><br/>
    <em>This is used to make the text italic</em>

3) Subscript and Superscript :

In HTML, the  and  tags are used to create subscript and superscripts respectively. As like as other formatting tags, this is also a container tag.

The text or number given between  and  will be displayed as subscript. Same as subscript, the text or number given between  and  will be displayed as superscript.

<p>H<sub>2</sub>O</p>
   <p>(a+b)<sup>2</sup></p>

4) Inserting and Deleting :

The text what you specify between <del> and </del> will be displayed as strike through.

The text you specify between <ins> and </ins> will be shown as underlined.

<del>mobiles</del>
   <ins>laptops</ins>

5) Comparison of tags:

A few tags do the same things you have learned so far. For example,  and ,  and ,  and <ins> and so on. These tags may be shows the same output, but the usage of tags are varying. The following table shows the usage of this kind of tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting Tags</title>
</head>
<body>
    <h1>Formatting Tag Demo</h1>
    <img src="https://qph.cf2.quoracdn.net/main-qimg-953adb64071e441bcf54bbe71c9d9b60-pjlq" alt="Formatting tags image" height="200">
    <p>Below are listed the formatting tags available in the latest version of HTML
    <b>This is used to bold the text</b>
    <!-- b and strong both are used for same purpose but search engines understand them differently 
        and will give more preference to strong--> <br/>
    <strong>This is used to bold the text</strong><br/>
    <i>This is used to make the text italic</i><br/>
    <em>This is used to make the text italic</em><br/>
   <u>This will make text underline</u><br/>
   <p>H<sub>2</sub>O</p>
   <p>(a+b)<sup>2</sup></p>
   <del>mobiles</del>
   <ins>laptops</ins>
   <big>Big text</big>
   <small>small text</small>
   <pre>
    roses are red
    voilets are blue
    yada yada
   </pre>
   <code>
    /* Hi this is my code*/ <br>
    import java.io.*;
   </code>
    <p></p>
</body>
</html>