HTML Text Formatting

❮ PreviousNext ❯

HTML provides various exclusive tags to enhance the look and feel of the text. These tags make HTML text formatting easy, and there is no need to apply CSS or the style attribute.

There are tags for making text bold, italic, small, superscript etc.

Let's study all main HTML formatting elements in detail with corresponding examples.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting Tags Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Bold-->
<p><b>Welcome to Result University.</b></p>

<!--The Text in Strong-->
<p><strong>Welcome to Result University.</strong></p>

<!--The Text in Italic-->
<p><i>Welcome to Result University.</i></p>

<!--The Text in Emphasize-->
<p><em>Welcome to Result University.</em></p>

<!--The Text in Small-->
<p><small>Welcome to Result University.</small></p>

<!--The Text in Highlight-->
<p><mark>Welcome to Result University.</mark></p>

<!--The Text in Superscript-->
<p>Welcome to <sup>Result University.</sup></p>

<!--The Text in Subscript-->
<p>Welcome to <sub>Result University.</sub></p>

<!--The Text in Insert-->
<p>Welcome to <ins>Result University.</ins></p>

<!--The Text in Delete-->
<p>Welcome to <del>Result University.</del></p>

</body>
</html>

We noticed these HTML elements alter text appearance when defined. Below is the list of all HTML text formatting tags.

HTML Text Formatting Tags

<b> Makes Text Bold
<strong> Makes Text Strong
<i> Makes Text Italic
<em> Makes Text Emphasized
<mark> Makes Text Highlighted
<sup> Makes Text Superscript
<sub> Makes Text Subscript
<ins> Makes Text Inserted
<del> Makes Text Deleted

HTML <b> Element

To make a text bold, we define it with HTML <b> element.

Syntax
<b>The Text</b>

The element <b> is not an 'Empty Element'. So it has both the start and end tags.

The text that we want to make bold is written between the opening <b> and closing </b> tags.

Example
<!DOCTYPE html>
<html>
<head>
<title>b Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Bold-->
<p><b>Welcome to Result University.</b></p>

</body>
</html>

HTML <strong> Element

The element <strong> is defined to make the text strong with semantic importance.

Syntax
<strong>The Text</strong>

The text inside the opening <strong> and closing </strong> tags make an HTML <strong> element.

The text is generally displayed in bold on the browser's screens.

Example
<!DOCTYPE html>
<html>
<head>
<title>strong Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Strong-->
<p><strong>Welcome to Result University.</strong></p>

</body>
</html>

HTML <i> Element

To make text italic, we define the text with an HTML <i> element.

The text stays inside the start tag <i> and end tag </i>.

Syntax
<i>The Text</i>

We italicize particular texts to make them stand out from the surrounding sentence.

Generally, names, titles or technical terms and someone's thoughts are italicized.

Example
<!DOCTYPE html>
<html>
<head>
<title>i Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Italic-->
<p><i>Welcome to Result University.</i></p>

</body>
</html>

HTML <em> Element

The HTML <em> element is defined to emphasize the text.

The content within the start tag <em> and end tag </em> are displayed in italics.

Syntax
<em>The Text</em>

The difference between the tag <i> and <em> is that the text defined with element <em> is pronounced with an emphasis when the screen reader reads it.

Example
<!DOCTYPE html>
<html>
<head>
<title>em Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Emphasize-->
<p><em>Welcome to Result University.</em></p>

</body>
</html>

HTML <small> Element

To make text small, we use the HTML <small> tag. The content is placed inside the <small> and </small> tags.

Syntax
<small>The Text</small>
Example
<!DOCTYPE html>
<html>
<head>
<title>small Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Small-->
<p><small>Welcome to Result University.</small></p>

</body>
</html>

HTML <mark> Element

To highlight a text in HTML, we use <mark> element.

All we need to do is to put content within the start <mark> and end </mark> tags.

Syntax
<mark>The Text</mark>
Example
<!DOCTYPE html>
<html>
<head>
<title>mark Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Highlight-->
<p><mark>Welcome to Result University.</mark></p>

</body>
</html>

HTML <sup> Element

A text is defined with <sup> element to make it superscript.

The text to be superscripted is written inside the opening <sup> and closing </sup> tags.

Syntax
<sup>The Text</sup>

Superscript texts are generally used in mathematical formulas like x2, y4 etc.

Example
<!DOCTYPE html>
<html>
<head>
<title>sup Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Superscript-->
<p>Welcome to <sup>Result University.</sup></p>

</body>
</html>

HTML <sub> Element

We use the HTML <sub> element to make text subscripted. In HTML, we widely use <sub> tags to show chemical formulas like NH3, O2 etc.

To subscript a text, we should write it between <sub> and </sub> tags.

Syntax
<sub>The Text</sub>
Example
<!DOCTYPE html>
<html>
<head>
<title>sub Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Subscript-->
<p>Welcome to <sub>Result University.</sub></p>

</body>
</html>

HTML <ins> Element

The HTML <ins> element is defined on a text to mark them as an inserted text.

The text to be inserted is written between the <ins> and </ins> tags.

The browser will display the inserted text as underlined.

Syntax
<ins>The Text</ins>
Example
<!DOCTYPE html>
<html>
<head>
<title>ins Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Insert-->
<p>Welcome to <ins>Result University.</ins></p>

</body>
</html>

HTML <del> Element

To strikethrough the text, we define <del> element. It indicates that the text is deleted. The text that is shown to be deleted is written between the start <del> and end </del> tags.

Syntax
<del>The Text</del>
Example
<!DOCTYPE html>
<html>
<head>
<title>del Tag Example</title> </head>
<body>

<!--The Normal Text-->
<p>Welcome to Result University.</p>

<!--The Text in Delete-->
<p>Welcome to <del>Result University.</del></p>

</body>
</html>

Browser Support

Tags Chrome Edge Firefox Safari Opera
<b> Yes Yes Yes Yes Yes
<strong> Yes Yes Yes Yes Yes
<i> Yes Yes Yes Yes Yes
<em> Yes Yes Yes Yes Yes
<small> Yes Yes Yes Yes Yes
<mark> Yes Yes Yes Yes Yes
<sup> Yes Yes Yes Yes Yes
<sub> Yes Yes Yes Yes Yes
<ins> Yes Yes Yes Yes Yes
<del> Yes Yes Yes Yes Yes
❮ PreviousNext ❯
1. HTML Tutorial
2. Introduction to HTML
3. Basic HTML Page
4. HTML Editors
5. Web Browser
6. HTML History
7. Basic HTML Tags
8. HTML Elements
9. HTML Attributes
10. HTML Headings
11. HTML Paragraphs
12. HTML Text Formatting
13. HTML Styles
14. HTML Comment
15. HTML Quotation
16. HTML Colors
17. HTML RGB Colors
18. HTML HEX Colors
19. HTML HSL Color
20. HTML CSS
21. HTML Links
22. HTML Link Colors
23. Link within Page
24. HTML Images
25. HTML Background Image
26. HTML Image Map
27. HTML Picture Element
28. HTML Favicon
29. HTML Table
30. HTML Table Border
31. HTML Table Size

  • Disclaimer: ResultUniversity.com is an independent private website and it is in no way affiliated to any Indian Government official website. The sole purpose of this website is to provide notifications regarding the latest results published. Though utmost care is being taken, we can not guarantee 100% correctness of information. Using this website confirms that you agree to all the terms and conditions.