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)