Open In App

HTML Text Formatting

Improve
Improve
Like Article
Like
Save
Share
Report

HTML Text Formatting provides various tags for text formatting to enhance the visual presentation of content on a webpage. You can make your text bold, italic, etc. by using some HTML tags.

Text Formatting can be categorized into 2 techniques, i.e., the logical tag where the tags denote the logical or semantic value of the text, and the Physical tag, which denotes the visual appearance of the text.

HTML Formatting Elements

Tags Descriptions
<i> Showcases italicized text.
<small> Renders text in a smaller font size.
<ins> Highlights added or inserted text.
<sub> Creates subscript text.
<strong> Emphasizes text with importance, often in bold.
<b> Displays text in a bold format.
<mark> Accentuates text with a background highlight.
<del> Strikes through text to signify deletion.
<em> Adds emphasis to text, commonly styled as italic.
<sup> Formats text as superscript.

Example: This example display text in HTML strong, small, and Highlight formatting respectively.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML text formatting
    </title>
</head>
 
<body>
    <h2>Welcome To GeeksforGeeks</h2>
 
    <!--Text in Strong-->
    <strong>Hello Geeks</strong>
    <br>
 
    <!--Text in small-->
    <small>Hello Geeks</small>
    <br>
 
    <!--Text in Highlight-->
    <mark>Hello Geeks</mark>
</body>
 
</html>


Output:

Formatting the text using various HTML tags

Making text Bold or Strong

We can make the text bold using the <b> tag. The tag uses both opening and closing tags. The text that needs to be made bold must be within <b> and </b> tag. We can also use the <strong> tag to make the text strong, with added semantic importance. It also opens with <strong> and ends with </strong> tag.

Example 1: The below example describes the formatting of the text to normal, bold, & strong.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML bold Text</title>
</head>
 
<body>
    <!--Normal text-->
    <p>Hello GeeksforGeeks</p>
     
    <!--Text in Bold-->
    <p>
        <b>Hello GeeksforGeeks</b>
    </p>
     
    <!--Text in Strong-->
    <p>
        <strong>Hello GeeksforGeeks</strong>
    </p>
</body>
 
</html>


Output: 

Formatting the text using different tags

Making text Italic or emphasize

The <i> tag is used to italicise the text. It opens with <i> and ends with </i> tag. The <em> tag is used to emphasize the text, with added semantic importance. It opens with <em> and ends with </em> tag.

Example 2: The below example describes the formatting of the text to Italic or emphasize.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML italic formatting</title>
</head>
 
<body>
    <!--Normal text-->
    <p>Hello GeeksforGeeks</p>
 
    <!--Text in Italics-->
    <p>
        <i>Hello GeeksforGeeks</i>
    </p>
 
    <!--Text in Emphasize-->
    <p>
        <em>Hello GeeksforGeeks</em>
    </p>
</body>
 
</html>


Output:

Formatting the text using & tags

Highlighting a Text

It is also possible to highlight a text in HTML using the <mark> tag. It has an opening tag <mark> and a closing tag </mark>.

Example: The below example describes the use of the <mark> tag that is used to define the marked text.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Highlight the text in HTML</title>
</head>
 
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
 
    <!--Text in Highlight-->
    <p>
        <mark>Hello GeeksforGeeks</mark>
    </p>
</body>
 
</html>


Output:

Using Tag

Making a text as Subscript or Superscript

The <sup> element is used to superscript a text and the <sub> element is used to subscript a text. They both have an opening and a closing tag.

Example: The below example describes the use of the <sup> & <sub> tags that are used to add the superscript & subscript texts to the HTML document.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Superscript and Subscript</title>
</head>
 
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
 
    <!--Text in Superscript-->
    <p>Hello
        <sup>GeeksforGeeks</sup>
    </p>
 
    <!--Text in Subscript-->
    <p>Hello
        <sub>GeeksforGeeks</sub>
    </p>
</body>
 
</html>


Output:

Making text smaller

The <small> element is used to make the text smaller. The text that needs to be displayed smaller should be written inside <small> and </small> tag.

Example: The below example describes the use of the <small> tag that is used to set small font sizes.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML <small></title>
</head>
 
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
 
    <!--Text in small-->
    <p>
        <small>Hello GeeksforGeeks</small>
    </p>
</body>
 
</html>


Output:

Using Tag

Striking through the text

The <del> element is used to strike through the text marking the part as deleted. It also has an opening and a closing tag.

Example: The below example describes the use of the <del> tag that is used to mark a portion of text which has been deleted from the document.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML striking </title>
</head>
 
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
 
    <!--Text in Delete-->
    <p> <del>Hello GeeksforGeeks</del> </p>
</body>
 
</html>


Output:

Using Tag

Adding a Text

The <ins> element is used to underline a text marking the part as inserted or added. It also has an opening and a closing tag.

Example: This example describes the use of the <ins> tag to used to specify a block of inserted text.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Inserting the text in HTML</title>
</head>
 
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
 
    <!--Text in Insert-->
    <p>
        <ins>Hello GeeksforGeeks</ins>
    </p>
</body>
 
</html>


Output:

Using tag

Supported Browsers

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Opera 12.1
  • Safari 1


Last Updated : 15 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads