DEV Community

Cover image for Different types of formatting in HTML.
Noel V Abraham
Noel V Abraham

Posted on

Different types of formatting in HTML.

#html #programming #webdev #beginners

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • The output of the following code is:

Atomic number of a Sodium atom is 11Na

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>
Enter fullscreen mode Exit fullscreen mode
  • The output of the following code is:

Mass number of a Sodium atom is 23Na

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

Happy c()ding

Top comments (0)

Read next

gravgor profile image

🌍 Landmark API: Real-time Data for Landmarks, Tourism, and Travel Tech

Marceli Borowczak -

devmakasana profile image

The Ultimate Guide to Creating a Personal Website as a Developer

Sanjay M. -

aliyuadeniji profile image

Variables and Data types in Rust: A simplified approach.

Aliyu Adeniji -

abayomijohn273 profile image

Deploying NestJS Application using Vercel and Supabase

Abayomi Olatunji -