As we know, HTML provides many predefined elements that are used to change the formatting of text. The formatting can be used to set the text styles (like – bold, italic, or emphasized, etc.), highlight the text, make text superscript and subscript, etc.
In this article, we will discuss different formatting tags in HTML.
<b> and <strong> Tags: Both tags are used to make the text bold. The text content of the tag is shown as important information on the webpage.
Syntax:
<b> ... </b> <strong> ... </strong>
Example: In this example, we will use <b>and <strong>.
<!DOCTYPE html><html>
<head>
<title>Bold and strong</title>
</head>
<body>
<!--Normal text-->
<p>Normal Text</p>
<!--Text in Bold-->
<p><b>Bold Text</b></p>
<!--Text in Strong-->
<p><strong> Strong Text</strong></p>
</body>
</html>
|
Output:
<i> and <em> Tags: Both tags are used to make the text italic and emphasized. Both the element have opening and closing tags.
Syntax:
<i> ... </i> <em> ... </em>
Example: In this example, we will use <i> and <em>.
<!DOCTYPE html><html>
<head>
<title>Italic and emphasized</title>
</head>
<body>
<!--Normal text-->
<p>Normal Text</p>
<!--Text in Italics-->
<p><i>The Text inside italic Tag</i></p>
<!--Text in Emphasize-->
<p><em>Emphasized Text</em></p>
</body>
</html>
|
Output:
<small> and <big> Tags: The <small> tag is used to set small font-size where as <big> tag is used to set big font-size.
Syntax:
<small> ... </small> <big> ... </big>
Example: In this example, we will use <small> and <big>
<!DOCTYPE html><html>
<head>
<title>Small and Big</title>
</head>
<body>
<!--Text in Normal-->
<p>Normal text</p>
<small>The text inside small Tag</small>
<p>
<big>The text inside big Tag</big>
</p>
</body>
</html>
|
Output:
<sup> and <sub> Tags: The <sup> tag is used to superscript a text whereas <sub> tag is used to subscript a text.
Syntax:
<sup> ... </sup> <sub> ... </sub>
Example: In this example, we will use <sup> and <sub> tags
<!DOCTYPE html><html>
<head>
<title>Superscript and Subscript</title>
</head>
<body>
<!--Text in Normal-->
<p>Normal Text
<!--Text in Superscript-->
<p>
<sup>superscript </sup> Text
</p>
<!--Text in Subscript-->
<p>
<sub>subscript</sub>Text
</p>
</body>
</html>
|
Output:
<ins> and <del> Tag: The <ins> tag is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag. This tag is mainly used in text in place of deleted text whereas the <del> tag is used to delete the text it adds a strike line to the text.
Syntax: In this example, we will use <mark> tag
<ins> ... </ins> <del> ... </del>
Example: In this example, we will use <ins> and <del>
<!DOCTYPE html><html>
<head>
<title>Inserting and deleting</title>
</head>
<body>
<!--Deleting andText in Insert-->
<b>
<p>The TajMahal is located in
<del>Bombay</del>
<ins>Agra</ins>
</p>
</b>
</body>
</html>
|
Output:
HTML <mark> Tag: The <mark> tag is used to highlight a text. It has an opening and closing tag.
Syntax:
<mark> ... </mark>
Example: In this example, we will use <mark> tag
<!DOCTYPE html><html>
<head>
<title>Highlight</title>
</head>
<body>
<!--Text in Normal-->
<p>Normal Text</p>
<!--Text in Highlight-->
<p>
<mark>Highlighted Text</mark>
</p>
</body>
</html>
|
Output: