Related Articles

Related Articles

How to underline a text content using HTML ?
  • Last Updated : 05 Jun, 2020

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 exampl uses <u> tag to create an underline text.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported browsers:

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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :