CodesJava

Easy learning with example program codes

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.

 

TAGUSES
<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 which is added
<big>Used to increase the font size by one conventional unit.
<small>Used to decrease the font size by one unit from 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>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 1b: Bold Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<p><strong>Hello World!!</strong></p>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 2a: Italic Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><i>Hello World!!</i></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 2b: Italic Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><em>Hello World!!</em></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 3: HTML Marked Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <mark>World</mark>!!</h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 4: Underlined Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <u>World</u>!!</h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 5: Strike Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <strike>World</strike>!!</h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 6: Monospaced Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1><tt>Hello World!!</tt></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 7: Superscript Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <sup>World!!</sup></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 8: Subscript Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <sub>World!!</sub></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 9: Deleted Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <del>World!!</del></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 10: Inserted Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <del>World!!</del><ins> Friends!!!</ins></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!! Friends!!!

Example 11: Larger Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <big>World!!</big></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Example 12: Smaller Text.

<!DOCTYPE>  
<html>  
<head>  
<title>Example</title>  
</head>  
<body>  
<h1>Hello <small>World!!</small></h1>    
</body>  
</html>

Output:

  
  
  
Example  
  
  

Hello World!!

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status