HTML Formatting Tags
HTML provides several formatting tags that allow you to apply various effects to text. These tags are essential for creating visually appealing and well-structured web pages. In this article, we will discuss the most commonly used formatting tags in HTML and provide examples and outputs to demonstrate how to use them.
HTML Bold Text
<b> tag: The <b> tag is used to make text bold. Here is an example of how to use the <b> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <b>bold text</b>.</p> 8 </body> 9</html>
Output:
This is an example of bold text.
HTML Italic Text
<i> tag: The <i> tag is used to make text italicized. Here is an example of how to use the <i> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <i>italicized text</i>.</p> 8 </body> 9</html>
Output:
This is an example of italicized text.
HTML Underlined Text
<u> tag: The <u> tag is used to make text underlined. Here is an example of how to use the <u> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <u>underlined text</u>.</p> 8 </body> 9</html>
Output:
This is an example of underlined text.
HTML Strong Text
<strong> tag: The <strong> tag is used to make text strong. The text will be displayed in bold, but the primary purpose of this tag is to emphasize the importance of the text. Here is an example of how to use the <strong> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <strong>strong text</strong>.</p> 8 </body> 9</html>
Output:
This is an example of strong text.
HTML Emphasized Text
<em> tag: The <em> tag is used to emphasize text. The text will be displayed in italicized, but the primary purpose of this tag is to indicate the importance of the text. Here is an example of how to use the <em> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <em>emphasized text</em>.</p> 8 </body> 9</html>
Output:
This is an example of emphasized text.
HTML Highlighted Text
<mark> tag: The <mark> tag is used to highlight text. The text will be displayed with a yellow background. Here is an example of how to use the <mark> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <mark>highlighted text</mark>.</p> 8 </body> 9</html>
Output:
This is an example of highlighted text.
HTML Superscript Text
<sup> tag: The <sup> tag is used to make text superscript. The text will be displayed in a smaller font size and raised above the baseline. Here is an example of how to use the <sup> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of E=mc<sup>2</sup>.</p> 8 9</body> </html> '
Output:
This is an example of E=mc2.
HTML Subscript Text
<sub> tag: The <sub> tag is used to make text subscript. The text will be displayed in a smaller font size and lowered below the baseline. Here is an example of how to use the <sub> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>The molecular formula for water is H<sub>2</sub>O.</p> 8 </body> 9</html>
Output:
The molecular formula for water is H2O.
HTML Deleted Text
<del> tag: The <del> tag is used to indicate that text has been deleted. The text will be displayed with a strikethrough. Here is an example of how to use the <del> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>The original price was $10, but now it's on sale for $8.<del>$10</del></p> 8 </body> 9</html>
Output:
The original price was $10, but now it's on sale for $8.$10
HTML Inserted Text
<ins> tag: The <ins> tag is used to indicate that text has been inserted. The text will be displayed with an underline. Here is an example of how to use the <ins> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>The new feature is <ins>now available</ins>.</p> 8 </body> 9</html>
Output:
The new feature is now available.
HTML Big Text
<big> tag: The <big> tag is used to make text bigger. Here is an example of how to use the <big> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <big>big text</big>.</p> 8 </body> 9</html>
Output:
This is an example of big text.
HTML Small Text
<small> tag: The <small> tag is used to make text smaller. Here is an example of how to use the <small> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <p>This is an example of <small>small text</small>.</p> 8 </body> 9</html>
Output:
This is an example of small text.