What are the various formatting tags available in HTML ?
Last Updated :
15 May, 2023
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>.
HTML
<!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>.
HTML
<!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>
HTML
<!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
HTML
<!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>
HTML
<!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
HTML
<!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:
Similar Reads
What are various tags available to add special meaning to the text in HTML ?
In this article, we will discuss the tags that will add special meaning to the text in HTML. 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>
2 min read
What are the HTML tags used to display the data in the tabular form ?
In this article, we will know the HTML tags that can be used to display the data in tabular form. A table is a representation of data in rows and columns, that helps to organize the complex structured data. Tables are widely used in communication, research, and data analysis. For instance, if we nee
4 min read
What are Self Closing Tags in HTML?
Self-closing tags, also known as void elements, are HTML elements that do not require a separate closing tag. These tags are self-contained and are typically used for elements that do not have any content between an opening and closing tag. Self-closing tags help keep the HTML structure clean and co
3 min read
What are various heading elements used to add heading in HTML ?
An HTML heading tag is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the least. In this article, we will discuss various heading elements used to add a heading i
2 min read
What are the different kinds of Doctypes available ?
A doctype declaration or document type declaration is information to the browser about what document type should it expect. It is not an HTML tag. All the HTML documents that you code should start with a <!DOCTYPE> declaration. The doctype declaration is written just above the <html> tag
3 min read
What are the HTML tags that deprecated in HTML5 ?
In this article, we will see the various deprecated Html tags & their alternative tags in HTML5. Deprecated tags are those tags that are allowed, but not recommended for use and are being replaced by newer ones. The tag or attributes depreciated when the same attributes are achieved in some othe
3 min read
Which tags are used to displaying data in tabular form in HTML ?
In this article, we will discuss the tags used to display the data in tabular form. Tags: Tags are the starting and ending parts of an HTML element. Every tag starts with the "<" symbol and ends with the">" symbol. Whatever inside these symbols are called tags. Opening and closing tags are use
3 min read
What is the Formatting Toolbar?
The Formatting Toolbar is a standard component of many WPS and text editors that allows users to format the text quickly. Using this toolbar allows the user to improve the appearance and legibility of the textual content in a rather short period of time. In this article, I want to shed some light on
6 min read
What are the media element tags introduced by HTML5 ?
HTML5 introduced 5 most popular media element tags i.e. <audio>, <video>, <source>, <embed>, <track>. These media element tags changed the entire development using HTML. In this article, you will get to know about these five media element tags briefly.Media Tags:Media T
3 min read
What are different video formats supported by browsers in HTML ?
In this article, we will see what are the different video formats that are supported by the browser, along with understanding their implementation.Browsers support text in different colors with different fonts and along with supporting various media which includes images, music, videos, animations,
3 min read