Skip to content
Related Articles

Related Articles

Improve Article

HTML | Text Formatting

  • Difficulty Level : Basic
  • Last Updated : 20 Sep, 2021

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: 
 

HTML provides us with the ability for formatting text just like we do it in MS Word or any text editing software. In this article, we would go through few such options. 

  • Making text Bold or Strong: We can make the text bold using the <b> tag. The tag uses both opening and closing tag. 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

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Bold</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



  • 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

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

  • 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

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

  • Making a text Subscript or Superscript: The <sup> element is used to superscript a text and <sub> element is used to subscript a text. They both have opening and a closing tag. 
    Example

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

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



  • 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

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

  • 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

HTML




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

Output

 
Supported Browsers:

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :