Skip to content
Related Articles

Related Articles

Improve Article

How to underline a text content using HTML ?

  • Last Updated : 09 Feb, 2021

In this article, we will create an underline text by using the <u> tag in the document. It stands for underline and it is used to underline the text enclosed within the <u> tag. This tag is generally used to underline misspelled words. This tag requires a starting as well as ending tag. 
Syntax: 
 

<u> Contents... </u>

Example 1: This example uses <u> tag to create an underline text.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to underline a text
        content using HTML?
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
 
        .geeks {
            font-size: 25px;
            font-weight: bold;
        }
 
        p {
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
        GeeksforGeeks
    </div>
 
    <div class="geeks">
        HTML5: How to underline a text
        in an HTML document
 
         
<p>
            GeeksforGeeks: A <u>computer
            science</u> portal for geeks
        </p>
 
</body>
 
</html>

Output:

Example 2: This example is an alternate way of <u> tag to underline the text. In this example, we will use CSS text-decoration property to underline the text content.



html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to underline a text
        content using HTML?
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
 
        .geeks {
            font-size: 25px;
            font-weight: bold;
        }
 
        p {
            font-size: 20px;
        }
 
        span {
            text-decoration: underline;
        }
    </style>
</head>
 
<body>
    <div class="gfg">
        GeeksforGeeks
    </div>
 
    <div class="geeks">
        HTML5: How to underline a
        text in an HTML document
 
         
<p>
            GeeksforGeeks: A <span>
            computer science</span>
            portal for geeks
        </p>
 
</body>
 
</html>

Output:

Supported browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :