Formatting tags in HTML

HTML Formatting

The process of formatting text in an HTML document is called HTML Formatting. It is done with the purpose to make the text more user-friendly. It is a method to format text using HTML formatting tags and without using CSS. Below is a list of all the HTML formatting tags.

TAG USES
<b> Physical tag.

Used to bold the text written between it.

<strong> Physical tag.

Used to inform the browser that the text is important.

<i> Physical tag.

Used to make text italic.

<em> Logical tag.

Used to display content in italics.

<mark> Used to highlight text.
<u> Used to underline text written between it.
<tt> Used to appear a text in teletype.
<strike> Used to draw a strikethrough on a section of text.
<sup> Used to display the content slightly above the normal line.
<sub> Used to display the content slightly below the normal line.
<del> Used to display the deleted content.
<ins> Used to display the content that is added
<big> Used to increase the font size by one conventional unit.
<small> Used to decrease the font size by one unit from the base font size.

 

Types of HTML formatting tags:

Physical tag:

Provides a visual appearance to the text.

Logical tag:

Adds some logical or semantic value to the text.

Example 1a: Bold Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<p><b>Hello World!!</b></p>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <p><b>Hello World!!</b></p> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<p><b>Hello World!!</b></p>    
</body>  
</html>
Example 1b: Bold Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<p><strong>Hello World!!</strong></p>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <p><strong>Hello World!!</strong></p> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<p><strong>Hello World!!</strong></p>    
</body>  
</html>
Example 2a: Italic Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1><i>Hello World!!</i></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1><i>Hello World!!</i></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><i>Hello World!!</i></h1>    
</body>  
</html>
Example 2b: Italic Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1><em>Hello World!!</em></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1><em>Hello World!!</em></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><em>Hello World!!</em></h1>    
</body>  
</html>
Example 3: HTML Marked Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <mark>World</mark>!!</h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <mark>World</mark>!!</h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <mark>World</mark>!!</h1>    
</body>  
</html>
Example 4: Underlined Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <u>World</u>!!</h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <u>World</u>!!</h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <u>World</u>!!</h1>    
</body>  
</html>
Example 5: Strike Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <strike>World</strike>!!</h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <strike>World</strike>!!</h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <strike>World</strike>!!</h1>    
</body>  
</html>
Example 6: Monospaced Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1><tt>Hello World!!</tt></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1><tt>Hello World!!</tt></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><tt>Hello World!!</tt></h1>    
</body>  
</html>
Example 7: Superscript Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <sup>World!!</sup></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <sup>World!!</sup></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <sup>World!!</sup></h1>    
</body>  
</html>
Example 8: Subscript Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <sub>World!!</sub></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <sub>World!!</sub></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <sub>World!!</sub></h1>    
</body>  
</html>
Example 9: Deleted Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <del>World!!</del></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <del>World!!</del></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <del>World!!</del></h1>    
</body>  
</html>
Example 10: Inserted Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <del>World!!</del><ins> Friends!!!</ins></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <del>World!!</del><ins> Friends!!!</ins></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <del>World!!</del><ins> Friends!!!</ins></h1>    
</body>  
</html>
Example 11: Larger Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <big>World!!</big></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <big>World!!</big></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <big>World!!</big></h1>    
</body>  
</html>
Example 12: Smaller Text.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello <small>World!!</small></h1>
</body>
</html>
<!DOCTYPE> <html> <head> <title>Example</title> </head> <body> <h1>Hello <small>World!!</small></h1> </body> </html>
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <small>World!!</small></h1>    
</body>  
</html>