HTML Underline Tag

HTML tag is used to define a span of inline text with a non-textual annotation. It rendered as an solid underlined text, but it can be changed using CSS properties. This tag was deprecated in HTML 4.0 and redefined in HTML5.

In HTML5, tag is used to represent the text that is stylistically different with normal text.

Tips: The use of tag should be ignored as it may generate confusion for a hyperlinked text.

Syntax

Following are some specifications about the HTML tag

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 following examples show the underlined tag in HTML with the animated and CSS effects.

Example 1:

The example shows the basic underline 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 following example shows the basic html underline 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> <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 following example shows the primary HTML underline tag with the end 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 following example shows the HTML underline tag with the end 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 following example shows the underline tag after 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 tag does not contain any specific attribute.

Global attribute:

The tag supports the Global attributes in HTML.

Event attribute:

The tag supports the Event attributes in HTML.

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<u>	Yes	Yes	Yes	Yes	Yes

Conclusion

The underline tag is used to highlight the text in the formal method. It helps the user easily get important data or lines from a paragraph on the web page.

Next TopicHTML ul Tag

← prev next →