HTML – Formatting


What is formatting ?

Its is the process of arranging something in a format.

What is formatting in HTML ?

HTML formatting is the process of formatting the text.

HTML formatting is done for getting better look of the webpages.

HTML facilitates us to format the text without using CSS.

Some of the basic formatting tags are listed below,

SnoTagsDescription
1<b></b>Bold text
2<strong></strong>Important text
3<i></i>Italics text
4<em></em>Emphasised text
5<mark></mark>Marked text
6<small></small>Smaller text
7<del></del>Deleted text
8<ins></ins>Inserted text
9<sub></sub>Subscript text
10<sup></sup>Superscript text

Basic HTML programming !!!

Click to Learn More about – HTML Tutorial for beginners

1. Bold and Strong text

Bold and Strong texts are similar tags.

This makes the text in Bold letters.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Bold and Strong text</title>
</head>
<body>
    <!--Normal text-->
    <p>This is normal paragraph text</p>
    <!--Text in Bold-->
    <p><b>This is paragraph tag with Bold</b></p>
    <!--Text in Strong-->
    <p><strong>This is paragraph tag with Strong</strong></p>
</body>
</html>

Output :

2. Italic and Emphasised text

Italics and Emphasised text are similar.

This makes the text in Italics format.


Example :

<!DOCTYPE html>
<html>
<head>
    <title>Italic and Emphasize text</title>
</head>
<body>
    <!--Normal text-->
    <p>This is normal paragraph text</p>
    <!--Text in Italics-->
    <p><i>This is paragraph tag with Italics</i></p>
    <!--Text in Emphasize-->
    <p><em>This is paragraph tag with Emphasized</em></p>
</body>
</html>

Output :

Want to Learn More About – HTML Headings

Let Us Discover More About – HTML Headings

3. Smaller text

The element makes the text smaller.

The text that needs to be displayed smaller should be written inside <small> and </small> tag.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Small</title>
</head>
<body>
    <!--Text in Normal-->
    <p>This is normal paragraph text</p>
    <!--Text in small-->
    <p><small>This is paragraph tag with small size</small></p>
</body>
</html>

Output :

4. Marked text

This element defines text that should be marked or highlighted.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Marked</title>
</head>
<body>
    <!--Text in Normal-->
    <p>This is normal paragraph text</p>
    <!--Text in marked-->
    <p>Marked text with  <mark> Abdul Kalaam </mark> is marked.</p>
</body>
</html>

Output :


Want to Learn More About – HTML Class

Let Us Discover More About – HTML Class

5. Deleted text

This element defines text that has been deleted from a document.

Usually Browsers will strike a line through deleted text.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Deleted Text</title>
</head>
<body>
    <!--Text in Normal-->
    <p>This is normal paragraph text</p>
    <!--Text in deleted-->
    <p>My counntry is  <del>America</del> India.</p>
</body>
</html>

Output :


6. Inserted text

This element defines a text that has been inserted into a document.

Usually Browsers will underline inserted text.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Inserting</title>
</head>
<body>
    <!--Text in Normal-->
    <p>This is normal paragraph text</p>
    <!--Text in Insert-->
    <p><ins>Home is Heaven</ins></p>
</body>
</html>

Output :

HTML Tags Full Tutorial For Beginners !!!

Let Us Discover More About – HTML Tags

7. Subscript text

The subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font.


Usually subscript text is used for chemical formulas, like H2O.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Subscript</title>
</head>
<body>
    <!--Normal text-->
    <p>This is normal paragraph text</p>
    <!--Text in Subscript-->
    <p>This is <sub>subscripted</sub> text.</p>
</body>
</html>

Output :

8. Superscript text

The superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.

Usually superscript text can be used for footnotes.

Example :

<!DOCTYPE html>
<html>
<head>
    <title>Superscript</title>
</head>
<body>
    <!--Normal text-->
    <p>This is normal paragraph text</p>
    <!--Text in Superscript-->
    <p>This is <sup>superscripted</sup> text.</p>
</body>
</html>

Output :

Free html learning – HTML Elements

Let Us Discover More About – HTML Elements

Video Tutorial – Watch on Youtube

Want to Learn More About – HTML Attributes

Let Us Discover More About – HTML Attributes