HTML | Text Formatting

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.

  1. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    

  2. 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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

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

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    3. 

  3. 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:

    
        
          
          
          
        
    
            

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

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

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    4. 

  4. 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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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 Subcript-->    
    

        <p>Hello <sub>GeeksforGeeks</sub></p> 
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    5. 

  5. 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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

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

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    6. 

  6. 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:
    

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

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

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    7. 

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

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

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

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    
Image
    8. 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
Chinmoy Lenka
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.