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>