Different types of formatting in HTML.

There are many types of formatting in HTML. They are used in different instances. All of these methods are a must while designing a webpage. Take a look at each one for better understanding...

Bold Formatting

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bold Formatting</title>
    </head>
    <body>
        <p>The following word used a <b>bold</b> typeface.</p>
    </body>
</html>

The output of the above code will be this:

The following word used a bold typeface.

Italic formatting

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Italic text example</title>
    </head>
    <body>
        <p>The following word used an <i>italic</i> typeface.</p>
    </body>
</html>

The output of the following code is like:

The following word used an italic typeface.

Underlined Formatting

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Underlined text</title>
    </head>
    <body>
        <p>HTML is developed by <u>Tim Breners-Lee</u>.</p>
    </body>
</html>

The output of the above is code is:

HTML is developed by Tim Breners-Lee.

Marked Text

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Marked Text</title>
    </head>
    <body>
        <p>HTML is developed by <mark>Tim Breners-Lee</mark>.</p>
    </body>
</html>

The output of the above code is this:

HTML is developed by Time Breners-Lee.

Subscript text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Atomic number of a Sodium atom is <sub>11</sub>Na</p>
</body>
</html>

The output of the following code is:

Atomic number of a Sodium atom is ₁₁Na

Superscript text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Mass number of a Sodium atom is <sup>23</sup>Na</p>
</body>
</html>

The output of the following code is:

Mass number of a Sodium atom is ²³Na

So, that's all for this session. See you all in the next post...

Happy c()ding

Blog