How to Underline in HTML and What Is the Purpose?
Coding for underlining text in HTML is not as simple as it looks. In HTML, the text-decoration property is used to specify the decorations that are to be applied to the text. This property is used to apply or remove the underline from the text. It can also be used to strike through or over line the text. The text-decoration property can be applied to all the elements except the <base> and <br> elements.
The <u> HTML tag was removed in the latest version of HTML, but then re-introduced in HTML5. It is now used to represent the text that should be styled differently from the surrounding text, such as misspelled words.
The style attribute can be used to underline HTML elements. This is inline CSS styling for an element, and it can be specified with the HTML <p> tag using the property text-decoration.
The <u> HTML element represents a portion of inline text that should be displayed in such a way to suggest it has non-textual annotations. By default, this renders as a simple solid underline, but may be customized using CSS (Cascading Style Sheets). So, how to underline in HTML?
How to Underline in HTML Using the “U” Tag
The usage of the element is simple. You just need to create an opening and a closing tag, and then put your content inside. So, how to underline in HTML with the “u” tag?
To underline in HTML, you can use the <u> tag. This tag was introduced in HTML 3.2, and it gives developers an easy way to create text with a line underneath. The <u> tag has no attributes, and it should be used only for styling purposes. So, how to underline in HTML? Simply surround the text that you want to underline with the <u> tag.
The underline produced using this element will not extend across block elements such as paragraph breaks (created with the <p> HTML element).
Coding – An Example of an Underlined HTML Element
So, how to underline in HTML? The answer is actually pretty simple: You use the <u> tag. Here’s the example of an underlined text in HTML:
<p>This is an example of <u>underlined</u> text.</p>
As you can see, the <u> tag is very easy to use. Just surround the text that you want to underline with the <u> tag, and it will appear as underline in the web browser.
The Style Attribute – Use CSS Text Decoration Property
Now that you know how to underline in HTML, it’s worth to mention text-decoration property. To underline text using CSS:
p {
text-decoration: underline;
}
Or:
p.underline {
text-decoration: underline;
}
This is a shorthand property for setting the following individual properties:
- text-decoration-color;
- text-decoration-line;
- text-decoration-style;
- text-decoration-thickness.
You can also set the “text-decoration” property to “none” to remove any underlines from text. When setting the text-decoration property to “underline”, you can also specify additional values for line thickness, style, and color.
How to Underline Text in HTML – Conclusion
Now, you know how to underline in HTML, but there are a few things to keep in mind when using the HTML underline attribute. First, it’s important to note that not all browsers support it. So if you’re creating a page that will be viewed on a browser that doesn’t support the underline attribute, your text will not be underlined.
Second, adding too many <u> tags can actually make your text look bad and difficult to read. So use them sparingly.
Additionally, the <u> tag should only be used for styling purposes of your content. If you want to add meaning to your underlined text, use other tags, such as the <em> or <strong> tags.
In conclusion, the <u> tag is a simple and easy way to underline text in HTML. Just surround the text that you want to underline with the <u> tag, and that is all.
Similar Posts:
- How to Center a Table in HTML? Align Text in Table Cells With These Tips
- How to Add Spaces in HTML? Here’s Everything You Need to Know
- Formatting – How to Bold in HTML? Here’s How to Make the Text Bold
- How to Make a Navigation Bar in HTML? A Step-by-Step Guide
- What Is a Wrapper in HTML and CSS? Wrapper Elements in HTML