HTML <u> Tag
HTML
The <u> tag is used to underline text or present it as misspelled words.
HTML <u> Tag
➔ The <u> element represents a span of inline text that is styled separately from the general text and indicates that it contains a non-textual annotation.
➔ It is rendered by default as a simple solid underline, but can be modified using CSS.
The u tag syntax
<p>This sentence contains words with <u>speling</u> mistake.</p>
Common use cases and best practices
➔ This tag is usually used for semantic purposes. That is, the meaning it conveys is more important than the visible style or dictation.
➔ The text enclosed by the u tag, which is stylistically different from the surrounding text, describes specific, semantic, and non-textual reasons.
➔ The most common use is to highlight spelling errors in words using a red wavy underline in CSS.
➔ If the main purpose is to create a visual difference, use CSS for styling using text-decoration: underline;.
➔ Other semantic elements may also be more appropriate in some scenarios.
- em: To emphasize stress (usually rendered as italics).
- strong: To indicate strong importance (usually rendered as bold).
- ins: To mark inserted text into a document (usually rendered with underline).
HTML u tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML u tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h3>HTML u tag example</h3>
<p>This sentence contains words with <u>speling</u> mistake.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
HTML underline using css example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML underline using css example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<style>
span{
text-decoration-line:underline;
text-decoration-style:wavy;
text-decoration-color:red;
/* use shorthand syntax, text-decoration: underline wavy red; */
}
</style>
</head>
<body>
<h3>HTML underline using css example</h3>
<p>This sentence contains words with <span>speling</span> mistake.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Example
<p>This tag is used to <u>highlight spelling mistakes</u> in text so that they can be <u>corrected</u> later</p>
Click on the "Try it Now" button to see how it works.