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.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<p><b>Hello World!!</b></p>    
</body>  
</html>
Example 1b: Bold Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<p><strong>Hello World!!</strong></p>    
</body>  
</html>
Example 2a: Italic Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><i>Hello World!!</i></h1>    
</body>  
</html>
Example 2b: Italic Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><em>Hello World!!</em></h1>    
</body>  
</html>
Example 3: HTML Marked Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <mark>World</mark>!!</h1>    
</body>  
</html>
Example 4: Underlined Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <u>World</u>!!</h1>    
</body>  
</html>
Example 5: Strike Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <strike>World</strike>!!</h1>    
</body>  
</html>
Example 6: Monospaced Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><tt>Hello World!!</tt></h1>    
</body>  
</html>
Example 7: Superscript Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <sup>World!!</sup></h1>    
</body>  
</html>
Example 8: Subscript Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <sub>World!!</sub></h1>    
</body>  
</html>
Example 9: Deleted Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <del>World!!</del></h1>    
</body>  
</html>
Example 10: Inserted Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <del>World!!</del><ins> Friends!!!</ins></h1>    
</body>  
</html>
Example 11: Larger Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <big>World!!</big></h1>    
</body>  
</html>
Example 12: Smaller Text.
<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <small>World!!</small></h1>    
</body>  
</html>