HTML Underline Tag – Understand u Tag with Examples

HTML Underline Tag – Understand u Tag with Examples

3 mins read3.5K Views Comment
clickHere
Updated on Oct 27, 2023 15:13 IST

This blog explains the u tag to underline text in HTML. You will also understand when to use the underline tag.

2022_04_HTML-Underline-Tag.jpg

While browsing through web pages, we often see underlined words or sentences. An underlined text in a document has a line running beneath it. But what does the underlined text mean? The primary use of underlined text is to draw the reader’s attention to the text. In this blog, we will explore the HTML underline tag to underline text in HTML.

Table of Contents

What is Underline Tag in HTML?

The underline tag or the <u> tag in HTML helps us underline the text. The <u> tag is commonly used to underline misspelled words. We can write it inside the start tag <u> and closing tag </u> to underline the text.

HTML Underline Text Syntax:

 
<u> Content Goes Here. </u>
Copy code
 
<!DOCTYPE html>
<html>
<head>
<title>HTML underline tag</title>
</head>
<body>
<h1>Underline Tag Example</h1>
<h2>The below text will be underlined.</h2>
<p><u>Shiksha Online is an upskilling platform for professionals.</u></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Underline Text in HTML</title>
</head>
<body>
<h1>Underline Text using CSS Property</h1>
<h2>The below text will be underlined.</h2>
<p style="text-decoration: underline;"> Shiksha Online is an upskilling platform for professionals.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Underline Text Example </title>
</head>
<html>
<body>
<h1>HTML Text Underline Color and Style Example</h1>
<p>This is an example to show how the <u style="text-decoration: red underline">text will be underlined with a red line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red wavy underline ">text will be underlined with a red wavvy line.</u></p>
<p>This is an example to show how the <u style="text-decoration: green dashed underline ">text will be underlined with a green dashed line.</u></p>
<p>This is an example to show how the <u style="text-decoration: blue dotted underline ">text will be underlined with a blue dotted line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red double underline ">text will be underlined with a red double line.</u></p>
</body>
</html>
Copy code
 
<!DOCTYPE html>
<html>
<head>
<title>HTML underline tag</title>
</head>
<body>
<h1>Underline Tag Example</h1>
<h2>The below text will be underlined.</h2>
<p><u>Shiksha Online is an upskilling platform for professionals.</u></p>
</body>
</html>
Copy code

Underline Tag in HTML5

The <u> tag deprecated in HTML4.1. It has been re-introduced with semantic meaning in HTML5. While the <u> tag was known as the underline tag, it is now called the unarticulated annotation tag. It means that we may not use it for simple styling purposes. It is useful for indicating non-textual annotations.

Explore the Difference Between HTML4 and HTML5.

Underline Text Using CSS property

We can also use the HTML attribute ‘style’ to underline text. The style attribute helps in describing an inline style for an element. We can use the style attribute with the HTML <p> tag with the CSS property text-decoration.

However, using the style attribute will override any style in the HTML <style> tag set globally or external style sheet.

Below is an example to underline text on an HTML page, using the CSS text-decoration property:

 
<!DOCTYPE html>
<html>
<head>
<title>Underline Text in HTML</title>
</head>
<body>
<h1>Underline Text using CSS Property</h1>
<h2>The below text will be underlined.</h2>
<p style="text-decoration: underline;"> Shiksha Online is an upskilling platform for professionals.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Underline Text Example </title>
</head>
<html>
<body>
<h1>HTML Text Underline Color and Style Example</h1>
<p>This is an example to show how the <u style="text-decoration: red underline">text will be underlined with a red line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red wavy underline ">text will be underlined with a red wavvy line.</u></p>
<p>This is an example to show how the <u style="text-decoration: green dashed underline ">text will be underlined with a green dashed line.</u></p>
<p>This is an example to show how the <u style="text-decoration: blue dotted underline ">text will be underlined with a blue dotted line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red double underline ">text will be underlined with a red double line.</u></p>
</body>
</html>
Copy code
 
<!DOCTYPE html>
<html>
<head>
<title>Underline Text in HTML</title>
</head>
<body>
<h1>Underline Text using CSS Property</h1>
<h2>The below text will be underlined.</h2>
<p style="text-decoration: underline;"> Shiksha Online is an upskilling platform for professionals.</p>
</body>
</html>
Copy code

Changing the Text Underline Style & Color

When using the <u> tag in HTML, the text gets a solid line beneath it. We can modify it by using the CSS text-decoration property.

Here is an example to change the style and color of the text underline:

 
<!DOCTYPE html>
<html>
<head>
<title> Underline Text Example </title>
</head>
<html>
<body>
<h1>HTML Text Underline Color and Style Example</h1>
<p>This is an example to show how the <u style="text-decoration: red underline">text will be underlined with a red line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red wavy underline ">text will be underlined with a red wavvy line.</u></p>
<p>This is an example to show how the <u style="text-decoration: green dashed underline ">text will be underlined with a green dashed line.</u></p>
<p>This is an example to show how the <u style="text-decoration: blue dotted underline ">text will be underlined with a blue dotted line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red double underline ">text will be underlined with a red double line.</u></p>
</body>
</html>
Copy code
 
<!DOCTYPE html>
<html>
<head>
<title> Underline Text Example </title>
</head>
<html>
<body>
<h1>HTML Text Underline Color and Style Example</h1>
<p>This is an example to show how the <u style="text-decoration: red underline">text will be underlined with a red line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red wavy underline ">text will be underlined with a red wavvy line.</u></p>
<p>This is an example to show how the <u style="text-decoration: green dashed underline ">text will be underlined with a green dashed line.</u></p>
<p>This is an example to show how the <u style="text-decoration: blue dotted underline ">text will be underlined with a blue dotted line.</u></p>
<p>This is an example to show how the <u style="text-decoration: red double underline ">text will be underlined with a red double line.</u></p>
</body>
</html>
Copy code

When to use the <u> Tag?

As mentioned before, the underline tag was widely used to style the text earlier. But now, the usage of the <u> tag has changed. Below are some use cases for the <u> tag in HTML.

When to use the HTML <u> Tag:

  • Specify spelling errors.
  • When applying a proper name mark to denote proper names in Chinese text.

When not to use the HTML <u> tag:

  • To underline text for presentation.
  • To underline text without implying any semantic meaning. Instead, you can use the <span> element with the text-decoration property as ‘underline.’
  • Denote titles of books. You can instead use the <cite> element for the same.

If you need to use an underline on your web page without any semantic meaning, you can use the ‘underline’ as the text-decoration property value.

Also Read:

10 Best HTML Editors for 2024
10 Best HTML Editors for 2024
Have you ever wondered which HTML editor best suits your coding needs in 2024? Choosing the right tool is crucial in the ever-evolving landscape of web development. Let us read...read more
Creating HTML Tables (Tutorial With Examples)
Creating HTML Tables (Tutorial With Examples)
This guide offers an introduction to HTML tables. You will learn how to create tables in HTML to present tabular data. Tables are a great way to present data visually....read more
How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more
About the Author

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio

Comments