Learn How to use HTML u tag

HTML: tag

In this series of learning HTML, we will teach you how to use the HTML u tag with proper syntax and lots of examples. Let’s start on the HTML u tag.

Description of HTML u tag

The HTML u tag is used to underline text. It is typically used to indicate that the text is a hyperlink, although it can be used to underline any text that needs to stand out for emphasis.

Here’s an example of how to use the u tag in HTML:

<p>Click <u><a href="https://www.example.com">here</a></u> to visit our website.</p>

In this example, the text “here” is underlined using the u tag to indicate that it is a hyperlink. When rendered in a web browser, it might look something like this:

Click here to visit our website.

Note that the u tag is not recommended for use in modern HTML, as it is not semantically meaningful and can create visual clutter on a page. Instead, it is recommended to use CSS styles to create underlines for hyperlinks or other emphasized text.

Syntax of HTML u tag

The HTML  tag is used to underline text. The syntax of the  tag is as follows:

<u>text</u>

Here, the opening tag  is used to indicate the start of the underlined text, and the closing tag  is used to indicate the end of the underlined text.

Example:

<p>This text is <u>underlined</u>.</p>

In this example, the  element is used to indicate that the word “underlined” should be underlined. When rendered in a web browser, the word “underlined” will appear with a line underneath it, indicating that it is underlined.

Global Attributes

The  tag in HTML is used to indicate that the enclosed text should be underlined. It was commonly used in the past to indicate links, but it is no longer recommended for that purpose. Instead, links are typically styled using CSS.

There are several global attributes that can be used with the  tag, including:

class: This attribute is used to specify one or more classes that can be used to apply CSS styles to the element.
id: This attribute is used to give the element a unique identifier that can be used for scripting purposes.
style: This attribute is used to specify inline CSS styles for the element.
title: This attribute is used to provide additional information about the element, typically displayed as a tooltip when the user hovers over the element with their mouse.
accesskey: This attribute is used to specify a keyboard shortcut that can be used to activate the element.
contenteditable: This attribute is used to specify whether the content of the element can be edited by the user.
dir: This attribute is used to specify the directionality of the element’s text.
hidden: This attribute is used to indicate that the element should not be displayed.
lang: This attribute is used to specify the language of the element’s text.
tabindex: This attribute is used to specify the order in which the element should be focused when the user navigates using the Tab key.

Event Attributes

Event attributes are used to define JavaScript functions that should be executed when certain events occur on an HTML element. However, the  tag in HTML does not have any intrinsic events associated with it, so there are no event attributes that are specific to this tag.

That being said, the  tag can still be used with event attributes that are common to many HTML elements, such as onclick, onmouseover, onmouseout, etc. These event attributes can be used to execute JavaScript code when the user performs certain actions, such as clicking the element or moving their mouse over it.

Here’s an example of how you could use the onclick event attribute with the  tag to execute a JavaScript function when the user clicks the underlined text:

<u onclick="myFunction()">Click me</u>

<script>
function myFunction() {
alert("Hello world!");
}
</script>

In this example, the onclick attribute is used to specify that the myFunction JavaScript function should be executed when the user clicks the underlined text. When the function is executed, it displays an alert box with the message “Hello world!”.

Other Attributes

In HTML, there are two types of attributes: global attributes, which can be used on any HTML element, and specific attributes, which are specific to certain elements. The  tag does not have any specific attributes other than the standard global attributes that can be used with any HTML element.

However, it’s worth noting that the  tag is no longer recommended for use in HTML. Instead, it’s recommended to use CSS to style text as underlined. The recommended approach is to use the text-decoration property in CSS, like this:

<style>
u {
text-decoration: underline;
}
</style>

<u>Underlined text</u>

This CSS rule will underline any text enclosed in a  tag. Note that the  tag itself is not necessary – you could also underline text using a  tag with a class, like this:

<style>
.underline {
text-decoration: underline;
}
</style>

<span class="underline">Underlined text</span>

Using CSS to style text as underlined is considered a better approach than using the  tag because it separates the styling from the content, which makes it easier to maintain and update the styling of the website.

Notes on HTML: u tag

Here are some important notes to keep in mind when using the  tag in HTML:

The  tag is no longer recommended for use in HTML, and instead, it’s recommended to use CSS to style text as underlined.
If you do use the  tag, be aware that it may not be accessible to all users. Some users may have difficulty perceiving underlined text, and some screen readers may not announce the underlined text as being any different from non-underlined text. For this reason, it’s important to ensure that the meaning of underlined text is also conveyed through other means, such as context, text color, or bolding.
The  tag should not be used to indicate links. Instead, links should be indicated using the <a> tag, which has built-in support for linking and can be styled using CSS.
If you do use the  tag, be sure to apply it sparingly and only to text that actually needs to be underlined. Overusing underlined text can make the text harder to read and can reduce its visual impact.
Always use valid HTML syntax when using the  tag, and make sure to close the tag properly.

Browser Compatibility

The HTML u tag has essential support with the following browsers:

Chrome
Internet Explorer (IE)
Opera
Safari (WebKit)
Firefox (Gecko)
Android
Firefox Mobile (Gecko)
Edge Mobile
Opera Mobile
Safari Mobile

Examples of HTML u tag

We will discuss the HTML u tag below, with some examples of how to use the u tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

HTML5
HTML4
XHTML

HTML5 Document

Here is an example of using the  tag in an HTML5 document:

<!DOCTYPE html>
<html>
<head>
<title>Example using the u tag in HTML5</title>
</head>
<body>
<h1>Underlined Text Example</h1>
<p>This paragraph contains some <u>underlined text</u>.</p>
<p>Here is another paragraph with some more <u>underlined text</u>.</p>
</body>
</html>

In this example, we have an HTML5 document with a <head> and a <body> section. Inside the <body> section, we have two paragraphs, each containing some underlined text enclosed in  tags.

When you open this HTML file in a web browser, you will see two paragraphs of text, with the underlined text appearing underlined. The text is underlined because we have used the  tag to indicate that it should be underlined.

Note that this example uses the  tag to style text as underlined, but as mentioned earlier, it’s recommended to use CSS to style text as underlined instead. So, a better approach would be to use the following CSS rule to style underlined text:

<style>
u {
text-decoration: underline;
}
</style>

This CSS rule would apply an underline to any text enclosed in a  tag, just like the example above, but it separates the styling from the content, which makes it easier to maintain and update the styling of the website.

HTML 4.01 Transitional Document

Here is an example of using the  tag in an HTML 4.01 Transitional document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example using the u tag in HTML 4.01 Transitional</title>
</head>
<body>
<h1>Underlined Text Example</h1>
<p>This paragraph contains some <u>underlined text</u>.</p>
<p>Here is another paragraph with some more <u>underlined text</u>.</p>
</body>
</html>

In this example, we have an HTML 4.01 Transitional document with a <head> and a <body> section. Inside the <body> section, we have two paragraphs, each containing some underlined text enclosed in  tags.

Note that HTML 4.01 Transitional is an older version of HTML that is no longer recommended for use. Instead, it’s recommended to use HTML5, which is the latest version of HTML. Also, as mentioned earlier, it’s recommended to use CSS to style text as underlined instead of using the  tag.

XHTML 1.0 Transitional Document

Here is an example of using the  tag in an XHTML 1.0 Transitional document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using the u tag in XHTML 1.0 Transitional</title>
</head>
<body>
<h1>Underlined Text Example</h1>
<p>This paragraph contains some <u>underlined text</u>.</p>
<p>Here is another paragraph with some more <u>underlined text</u>.</p>
</body>
</html>

In this example, we have an XHTML 1.0 Transitional document with a <head> and a <body> section. Inside the <body> section, we have two paragraphs, each containing some underlined text enclosed in  tags.

When you open this XHTML file in a web browser, you will see two paragraphs of text, with the underlined text appearing underlined. The text is underlined because we have used the  tag to indicate that it should be underlined.

Note that XHTML is a stricter version of HTML that uses XML syntax. It’s recommended to use HTML5 instead of XHTML, which is easier to write and maintain. Also, as mentioned earlier, it’s recommended to use CSS to style text as underlined instead of using the  tag.

XHTML 1.0 Strict Document

Here is an example of using the  tag in an XHTML 1.0 Strict document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using the u tag in XHTML 1.0 Strict</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Underlined Text Example</h1>
<p>This paragraph contains some <u>underlined text</u>.</p>
<p>Here is another paragraph with some more <u>underlined text</u>.</p>
</body>
</html>

In this example, we have an XHTML 1.0 Strict document with a <head> and a <body> section. Inside the <body> section, we have two paragraphs, each containing some underlined text enclosed in  tags.

Note that XHTML 1.0 Strict is a stricter version of XHTML that does not allow the use of some tags and attributes that are allowed in XHTML 1.0 Transitional. It’s recommended to use HTML5 instead of XHTML, which is easier to write and maintain. Also, as mentioned earlier, it’s recommended to use CSS to style text as underlined instead of using the  tag.

XHTML 1.1 Document

Here is an example of using the  tag in an XHTML 1.1 document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example using the u tag in XHTML 1.1</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body>
<h1>Underlined Text Example</h1>
<p>This paragraph contains some <u>underlined text</u>.</p>
<p>Here is another paragraph with some more <u>underlined text</u>.</p>
</body>
</html>

In this example, we have an XHTML 1.1 document with a <head> and a <body> section. Inside the <body> section, we have two paragraphs, each containing some underlined text enclosed in  tags.

Note that XHTML 1.1 is a version of XHTML that is designed to be modular and extensible, and it has a stricter syntax than XHTML 1.0. It’s recommended to use HTML5 instead of XHTML, which is easier to write and maintain. Also, as mentioned earlier, it’s recommended to use CSS to style text as underlined instead of using the  tag.

HTML: <u> tag