Understanding the HTML `` Element: Semantic Markup for Underlined Text
Learn the proper use of the HTML `` (underline) element for semantically marking up text that is stylistically different, such as misspelled words or proper nouns. This tutorial emphasizes the semantic difference between `` and ``, demonstrates its usage, and shows how to customize its appearance using CSS.
Understanding and Using the HTML `` (Underline) Element
The Purpose of the `` Tag
The HTML `` (underline) tag is used to indicate text that has been styled with an underline. While it might seem simple, the semantic meaning of the underline is important. It’s used to indicate text that is stylistically different, such as misspelled words or proper nouns. It should not be used to create hyperlinks; the `<a>` tag is specifically designed for that purpose.
Using the `` Tag
The `` tag is straightforward to use. The text you want to underline is placed between the opening and closing `` tags.
Example: Basic Underline
<p>This word is <u>underlined</u>.</p>
Most browsers will display underlined text by default, but you can customize the underline's style using CSS (Cascading Style Sheets).
Styling Underlined Text with CSS
The appearance of the underline can be customized using CSS. For example, you can change the underline's style, color, or thickness.
Example: Styling Underline with CSS
u {
text-decoration: underline; /* default */
text-decoration-color: red; /* example */
text-decoration-thickness: 2px; /* example */
}
Browser Support for ``
The `` tag is supported by all major modern browsers.
| Browser | Support |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Opera | Yes |
| Safari | Yes |
Global and Event Attributes
The `` tag supports standard HTML global attributes and event attributes. This allows for further customization of its behavior and interaction within the page.