How to underline a text content in HTML ?
Last Updated :
19 Mar, 2024
HTML, the foundation of web content, offers a variety of ways to emphasize text. One such method is underlining text. This guide will provide a comprehensive walkthrough on how to underline text in HTML, ensuring your content stands out.
Underlined text serves an important role in web content. It not only highlights important information but also improves readability by drawing the reader’s attention.
Before that let’s first create some sample HTML code to underline the text. The below example code demonstrates the sample HTML code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Underlining Text using HTML</title>
</head>
<body>
<h1> GeeksforGeeks </h1>
<p>Underlining Text Content</p>
<p> GeeksforGeeks: A computer science portal for geeks</p>
</body>
</html>
Now that we have written the sample HTML code to make the text underline. let’s discuss the different approaches to do that.
Different Approaches to Underline Text using HTML
1. Underlining text by HTML <u> Tag:
HTML <u> tag is used to underline text content. It wraps around the text to be underlined, visually emphasizing it with a horizontal line below. This tag is commonly employed for hyperlinks or emphasized text.
Syntax:
<u> Contents... </u>
Example: This example uses <u> tag to create an underlined text.
html
<!DOCTYPE html>
<html>
<head>
<title>Underlining Text using HTML</title>
</head>
<body>
<h1> GeeksforGeeks </h1>
<p>Underlining Text Content</p>
<p> GeeksforGeeks: A computer science portal for geeks</p>
</body>
</html>
Output: This example illustrates the straightforward method of applying underline styling in HTML.
Underlining text by HTML u Tag
Explanation:
- In the above example we use the <u> tag to underline text content.
- Second paragraph element is in <u> tag and underlined.
2. Underlining text by CSS text-decoration Property:
We can use use CSS text-decoration property inline, interanl or external which will allows for the decoration of text, including underlining. By setting text-decoration to “underline”, text within HTML elements can be visually emphasized with a line beneath it, providing a clear indication of emphasis or link styling.
Syntax:
text-decoration: underline:
Example: This example we will use CSS text-decoration property as inline css to underline the text content.
html
<!DOCTYPE html>
<html>
<head>
<title>Underlining Text using CSS text-decoration Property</title>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>Underlining Text Content</p>
<p style="text-decoration: underline;">
GeeksforGeeks: A computer science portal for geeks
</p>
</body>
</html>
Output:
Underlinin text by CSS text-decoration Property
Explanation:
In this example we have used CSS text-decoration property to underline the text. In this approach you can use the css property inline, internal and external.
Choosing Between <u> and text-decoration
While both <u> and text-decoration render text as underlined, they have different uses. The <u> tag is a semantic element, while text-decoration is a CSS property used for styling1. Use the method that best suits your needs
Share your thoughts in the comments
Please Login to comment...