HTML Underline <u> Tag
HTML <u> element is employed to specify a section of inline text with a non-textual annotation. It is displayed as solid underlined text by default, although its appearance can be customized using CSS styles. This element was marked as obsolete in HTML 4.0 but was reintroduced with a new definition in HTML5.
In HTML5, the <u> tag is employed to indicate text that has a distinct style from regular text.
Tips: The use of <u> tag should be ignored as it may generate confusion for a hyperlinked text.
Syntax
Following are some details regarding the HTML <u> element:
The following syntax is used for the basic HTML underline tag.
<u> write any data <u>
The following syntax is used for the basic HTML underline tag with CSS properties.
<u> write any data <u>
<style>
u {
text-decoration: blue wavy underline;
}
</style>
| Display | Inline |
|---|---|
| Start tag/End tag | Start and End tag |
| Usage | Formatting |
Examples
The upcoming instances exhibit the highlighted tag in HTML featuring animated and CSS effects.
Example 1:
The instance demonstrates the fundamental <u> tag in HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML u tag</title>
<style>
u {
text-decoration: red wavy underline;}
</style>
</head>
<body>
<h2>Example of u tag</h2>
<p>This tag can be useful to identifying <u>spelling mistakes </u>in an document.</p>
</body>
</html>
Output:
The output shows the wavy underline.
Example 2
The given instance demonstrates the fundamental HTML underline element.
<!DOCTYPE html>
<html>
<head>
<title> Html underline tag
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color:beige;
height: 200px;
width: 350px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> <u> Html underline tag </u> </h3>
<h4> We can see the underline to the word for the Html </h4>
<div class = "flex-containers" style = "font-size:20px;">
If we use <u> underline tag </u> without an end tag, then underline works the rest of the information on the web page.
</div>
</div>
</body>
</html>
Output:
The output shows the basic html underline tag.
Example 3
The subsequent instance illustrates the main HTML <u> tag alongside the closing tag.
<!DOCTYPE html>
<html>
<head>
<title> Html underline tag
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color:beige;
height: 200px;
width: 350px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Html underline tag </h3>
<h4> <u> We can see the underline to the word for the Html </h4>
<div class = "flex-containers" style = "font-size:20px;">
If we use <u> underline tag </u> without an end tag, then underline works the rest of the information on the web page.
</div>
</div>
</body>
</html>
Output:
The output shows the basic html underline tag.
Example 4
The HTML underline element is demonstrated below with the closing tag.
<!DOCTYPE html>
<html>
<head>
<title> Html underline tag
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color:beige;
height: 250px;
width: 350px;
border : 2px solid grey;
}
u{
text-decoration: red double underline;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Html underline tag </h3>
<h4> We can see the underline to the word for the Html </h4>
<div class = "flex-containers" style = "font-size:20px;">
If we use <u> underline tag </u> without an end tag, then underline works the rest of the information on the web page.
</div>
</div>
</body>
</html>
Output:
The output shows the HTML underlined tag.
Example 5
The given illustration demonstrates the utilization of the underline tag following the hover effect.
<!DOCTYPE html>
<html>
<head>
<title> Html underline tag
</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
.main_div {
background-color:beige;
height: 250px;
width: 350px;
border : 2px solid grey;
}
.main_div:hover{
text-decoration: navy dotted underline;
}
</style>
</head>
<body>
<div class = "main_div">
<h3> Html Underline Tag After Hover Effet </h3>
<h4> We can see the underline to the word for the Html </h4>
<div class = "flex-containers" style = "font-size:18px;">
html underline tag uses the 'u' tag in the html elements. <br>
If we use the underline tag without the end tag, then the underline works with the rest of the information on the web page.
</div>
</div>
</body>
</html>
Output:
The output shows the basic html underline tag.
Attribute:
Tag-specific attributes:
The <u> tag does not possess any particular attribute.
Global attribute:
The <u> tag facilitates the implementation of Global attributes within HTML.
Event attribute:
The <u> element facilitates the usage of Event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<u> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
The underscore tag is utilized for emphasizing text in a formal context. It assists users in quickly identifying crucial information or sentences within a paragraph on a webpage.