Skip to content
Related Articles

Related Articles

HTML Text Formatting

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 13 Dec, 2021

In this article, we will know HTML Text Formatting, & will understand various ways of formatting the text. HTML facilitates the ability for formatting text just like we do in MS Word or any text editing software. We will go through a few such options.

Example: In this example, we simply display text in HTML strong, small, and Highlight formatting respectively.

HTML




<!DOCTYPE html>
<html>
  
<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

The below are the various options available to format the text:

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>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>Italic</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 <I> & <em> tags

Highlighting a text: It is also possible to highlight a text in HTML using the <mark> tag. It has a 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</title>
</head>
  
<body>
      
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Highlight-->
    <p>
        <mark>Hello GeeksforGeeks</mark>
    </p>
  
</body>
  
</html>


Output:

Using <mark> Tag


Making a text 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:

Using <sub> & <sup> Tag

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 size.

HTML




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


Output:

Using <small> 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>Delete</title>
</head>
  
<body>
      
    <!--Text in Normal-->
      
<p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Delete-->
      
<p> <del>Hello GeeksforGeeks</del> </p>
  
</body>
  
</html>


Output:

Using <del> 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</title>
</head>
  
<body>
      
    <!--Text in Normal-->
      
<p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Insert-->
      
<p><ins>Hello GeeksforGeeks</ins></p>
  
</body>
  
</html>


Output:

Using <ins> tag

Supported Browsers:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!