HTML Underline Tag – Understand u Tag with Examples
This blog explains the u tag to underline text in HTML. You will also understand when to use the underline tag.
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?
- Underline Tag in HTML5
- Underline Text Using CSS property
- Changing the Text Underline Style & Color
- When to use the <u> Tag?
- Conclusion
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
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>
<!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>
<!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>
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>
<!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>
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>
<!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>
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:
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
Top Picks & New Arrivals
