HTML <u> tag
Underline Element/Tag:
The u tag in html is used to specify the important text or phrase by underline. In earlier HTML versions, this element was known as the "Underline" element, and it is still occasionally used inadvertently in this manner.
You can also use a style with the CSS text-decoration attribute for underlying text.
The u element may be used for a variety of annotations, including correcting spelling errors, highlighting proper names in Chinese text, and so on.
You shouldn't use the u character to visually underline text or to denote book titles.
It is a closed tag that means ending tag is required to close this tag. This tag is represented as <u> tag in html documents
Syntax:
<body>
<p>
……………….
<u>……………. </u>
………………
</p>
</body>
Example:
Html:
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This attribute can be used to highlight <u>speling</u>errors, so that the user can <u>corect</u> them all.
</p>
</body>
</html>Css:
p {
font: 1rem 'Fira Sans', sans-serif;
}
u {
text-decoration: #f00 wavy underline;
}Output:
Attributes
Only global attributes are used with this tag.
Global attributes are being supported by this tag. All the event attributes in HTML are also supported by this tag.
Other elements same as U tag:
<em>
This attribute is used to denote stress emphasis.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <em>paragraph includes </em> a Wrnogly spelled word.
</p>
</body>
</html>
Output:
<b>
This attribute is used to draw attention to text.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <b>paragraph includes </b> a Wrnogly spelled word.
</p>
</body>
</html>Output:
<mark>
This attribute is used to mark key words or phrases.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <mark>paragraph includes </mark> a Wrnogly spelled word.
</p>
</body>
</html>Output:
<strong>
This characteristic is used to denote the relevance of the text.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <strong>paragraph includes </strong> a Wrnogly spelled word.
</p>
</body>
</html>
Output:
<cite>
If you want torepresent the titles of books or other publications, then you can use this tag in HTML document.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <cite>paragraph includes </cite> a Wrnogly spelled word.
</p>
</body>
</html>Output:
<i>
In Western writings, this tag is basically used for indicating technical terminology, transliterations, viewpoints, or vessel names.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <i>paragraph includes </i> a Wrnogly spelled word.
</p>
</body>
</html>
Output:
<ruby>
You can add textual annotations with the help of ruby tag in the HTML document.
Utilize the underline value of the text-decoration attribute to impose an underlined look without any semantic significance.
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This <ruby>paragraph includes </ruby> a Wrnogly spelled word.
</p>
</body>
</html>Output:
Examples of U tag:
Example 1: For Indicating an error in spelling:
This example uses the <u> element and css code to show a sentence with a spelling problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
This paragraph includes a
<u class="spelling">
Wrnogly
</u>
spelled word.
</p>
</body>
</html>When the word "wrongly" is spelled incorrectly, the HTML uses the u element with the spelling class.
CSS:
u.spelling
{
text-decoration: red wavy underline;
}
This CSS specifies that when the class spelling is used to style the u element, then its text is shown by the red underline. This is a typical style for typographical problems. Red dashed underlining can be used to illustrate another typical design.
Output of above code:
Avoiding u Tag
Most of the times, if you want to avoid u tag, then you can use few instances that demonstrate various situations for specifying something.
Non-semantic underlines
You can use a <span> tag with the text-decoration attribute set to "underline" to highlight text:
HTML:
<!DOCTYPE html>
<html>
<head>
<tile> html u tag </title>
</head>
<body>
<span class="underline">
Today's Episode
</span>
<br>
Almighty gamer as an ultra-instinct guy
</body>
</html>
CSS:
.underline
{
text-decoration: underline;
}
Output:
Presenting a book title
You can use cite tag instead of u tag for indicating the titles.
Using the cite element
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
The class read
<cite>
Moby Dick
</cite>
in the first term.
</p>
</body>
</html>Result:
Styling the cite element:
The text is shown in italics by the default style of cite element.
HTML:
<!DOCTYPE html>
<html>
<head>
<title> html u tag </title>
</head>
<body>
<p>
The first book is
<cite>
The secret
</cite>
in the early ages.
</p>
</body>
</html>CSS:
cite {
font-style: normal;
text-decoration: underline;
}
Output:
Browser support:
List of browsers that support html u tag are given below:
Chrome: Yes
Microsoft Edge: Yes, version 12 needed
Firefox: Yes, version 1 needed
Safari: Yes
Opera: Yes