This page demonstrates how to create an underlining under any text or other
HTML/CSS elements, also underline in HTML.
There are two main ways of creating an underlining. The method you use will depend on what you’re trying to achieve. Actually, there are three main ways, but one of these is outdated. More on that below. Code and style.
You can use the CSS
text-decoration property to specify that an
HTML underline related should appear under your content. Like this:
Removing a tag
The CSS property is commonly used to remove underlines from hyperlinks. To do that, simply use style property
To demonstrate this, the following example uses a paragraph that has been underlined, but which also contains text inside a
<span> element which has had the
CSS style and
HTML to underline removed.
HTML Underline Any Element
You can get the CSS style border-bottom property to add an under line to any HTML element. Related: actually, it’s not really an underline. It’s simply a border that runs along the bottom of the element. Here’s an example:
The good thing about the
border-bottom property (as with all properties), is that you can specify different styles for the border. Here are some to give you an idea:
A Note on Usability
underline text normal text on the web can related usability problems. This is because most web users have become accustomed to associating underlined text with a hyperlink. This is because browsers typically under-line hyperlinks (unless the developer has specified otherwise). Therefore it’s not recommended to under-line text unless you really need to (or the text is a hyperlink).
If you need to emphasize text, use the
<em> tag. To place extra importance on text, use the
<strong> tag. These elements were created specifically for those purposes, and browsers usually render this text appropriately.
Removing underlines from hyperlinks can also cause usability issues. If you choose to do this, make sure users have some other way of distinguishing hyperlinks from normal text. Usually different colored text will suffice, but be sure to use a color related that won’t cause problems for users who are color-blind.
How do you make a line in HTML?
HTML/CSS text is easily underlined with the text-decoration CSS property.
Another way to underline text is with the
<u> tag in HTML. Although this tag was deprecated in HTML 4.01, it was re-introduced in HTML5 to represent text that should be stylistically different from normal text.
It is preferable to use the text-decoration CSS property to underline text as it works on all browsers and provides additional styling options.
In the example below, the text-decoration property is used:
How do you underline an image in HTML?
- Text underlining in HTML was deprecated in HTML4. However, it was reintroduced with semantic meaning in HTML5.
- Now it’s used to indicate that a span of inline text has a non-textual meaning in HTML
- This tag supports global attributes.
- Both starting and ending tags are mandatory.
- Browser support: supported by all modern browsers
When to Use u Tag
<u> was called HTML under-line tag before, it is now officially known as the unarticulated annotation tag. Thus, you shouldn’t use it for simple styling purposes. It is meant to indicate non-textual annotations.
When you use the
<u> tag, its content receives a simple solid underline HTML:
However, you can modify it by using the CSS
text-decoration property. In the example below, we will use a red wavy line to indicate a spelling mistake in the text:
if you’re simply looking at how to underline text in HTML to make it look bolder, this CSS property is your best option as well.