Underlining text in html

: The Unarticulated Annotation (Underline) element

The HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.

Warning: This element used to be called the «Underline» element in older versions of HTML, and is still sometimes misused in this way. To underline text, you should instead apply a style that includes the CSS text-decoration property set to underline .

Try it

See the Usage notes section for further details on when it’s appropriate to use and when it isn’t.

Attributes

This element only includes the global attributes.

Usage notes

Along with other pure styling elements, the original HTML Underline ( ) element was deprecated in HTML 4; however, was restored in HTML 5 with a new, semantic, meaning: to mark text as having some form of non-textual annotation applied.

Note: Avoid using the element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default.

Use cases

Valid use cases for the element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation.

You should not use to underline text for presentation purposes, or to denote titles of books.

Other elements to consider using

In most cases, you should use an element other than , such as:

To provide textual annotations (as opposed to the non-textual annotations created with ), use the element.

To apply an underlined appearance without any semantic meaning, use the text-decoration property’s value underline .

Examples

Indicating a spelling error

This example uses the element and some CSS to display a paragraph which includes a misspelled error, with the error indicated in the red wavy underline style which is fairly commonly used for this purpose.

HTML

p>This paragraph includes a u class="spelling">wrnoglyu> spelled word.p> 

In the HTML, we see the use of with a class, spelling , which is used to indicate the misspelling of the word «wrongly».

CSS

u.spelling  text-decoration: red wavy underline; > 

This CSS indicates that when the element is styled with the class spelling , it should have a red wavy underline underneath its text. This is a common styling for spelling errors. Another common style can be presented using red dashed underline .

Result

The result should be familiar to anyone who has used any of the more popular word processors available today.

Avoiding

Most of the time, you actually don’t want to use . Here are some examples that show what you should do instead in several cases.

Non-semantic underlines

To underline text without implying any semantic meaning, use a element with the text-decoration property set to «underline» , as shown below.

HTML

span class="underline">Today's Specialspan> br /> Chicken Noodle Soup With Carrots 

CSS

.underline  text-decoration: underline; > 

Result

Presenting a book title

Book titles should be presented using the element instead of or even .

Using the cite element

p>The class read cite>Moby Dickcite> in the first term.p> 

Styling the cite element

The default styling for the element renders the text in italics. You can override that using CSS:

p>The class read cite>Moby Dickcite> in the first term.p> 

cite  font-style: normal; text-decoration: underline; > 

Technical summary

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	HTMLElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

How to underline a text in HTML?

Underlined text is used to help draw attention to the text.

We use the tag, to underline a text in HTML. It represents a text in a different style from another text in the content of the web page.

We can also use the style attribute, to underline a text in HTML. The style attribute specifies an inline style for an element. This attribute is used inside the HTML

tag, with the CSS property text-decoration property.

Syntax

Following is the syntax to underline a text in HTML.

The content to be underlined 

Example

Following is the example program to underline a text in HTML.

DOCTYPE html> html> head> head> body> p>DLF stands for u>Delhi Land and Finance u>. br> Delhi Land and Finance is one of the largest commercial real estate developer in India.p> body> html> 
 

Example

In the example below, we underlined the text inside the element.

DOCTYPE html> html> head> title>HTML u tagtitle> head> body> h1>u>we are underlining the text inside the 'h>' element.u>h1> body> html> 
 

Underlining text by inline CSS

Underlining text using CSS property. This property is used inside the

tag.

Syntax

Following is the syntax for underlining a text using CSS property.

The content to be underlined
 

Example

Following is the example program to underline a text using CSS property.

DOCTYPE html> html> head> head> body> p>DLF stands forp>p style="text-decoration:underline;">Delhi Land and Finance. p> p> Delhi Land and Finance is one of the largest commercial real estate developer in India.p> body> html> 
 

Источник

2 Easy Ways to Underline Text in CSS and HTML

This article was co-authored by wikiHow staff writer, Rain Kengly. Rain Kengly is a wikiHow Technology Writer. As a storytelling enthusiast with a penchant for technology, they hope to create long-lasting connections with readers from all around the globe. Rain graduated from San Francisco State University with a BA in Cinema.

The wikiHow Tech Team also followed the article’s instructions and verified that they work.

This article has been viewed 194,388 times.

Do you want to use the underline tag in HTML? In the past, the HTML code for underlining text was the simple tag. However, this method has been abandoned in favor of the much more versatile CSS «text-decoration» style property. Using CSS ensures your code stays future-proof. This wikiHow will show you how to underline text in CSS using the current «text-decoration» method, as well as the past deprecated method of HTML.

• The tag is deprecated, meaning it technically works, but it’s not recommended to use.
• When using CSS, use the «text-decoration» CSS style property to underline text.
• While underlining takes only a few steps, consider other methods for emphasizing text. Underlining may confuse your readers.

Using CSS

• Text-decoration is shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.
• In older versions of HTML, this element used to be known as the «Underline» element. Using the tag is deprecated, meaning it is still allowed but not recommended to use.
• Using the «text-decoration» property is a newer, better alternative to underlining.
• You can use Windows Notepad to create a simple CSS stylesheet.

Use the tag when you want to underline a certain piece of text. Place the opening tag along with the «text-decoration» property where you want to start underlining. Place the closing where you want it to stop. [2] X Research source

span style="text-decoration: underline;">This will be underlined.span> 

Declare HTML elements in the section of your page. You can also do this on the CSS style sheet. You can make the underlining process much easier by declaring HTML elements to style. For example, to make all of your level 3 headers underlined, add the following to your CSS style section:

html> head> style> h3  text-decoration: underline; > style> head> body> h3>This header will be underlinedh3> body> html> 

Define a CSS Class Style. You’ll be able to quickly underline at any time. In your style sheet or section, you can create classes to call later. The class can have any name you’d like.

html> head> style> .underline  text-decoration: underline; > style> head> body> You can use this class to div class="underline">quickly underlinediv> different parts div class="underline">of your contentdiv> body> html> 

Consider other methods for highlighting text. Underlining should be avoided to keep from confusing your reader. One popular method is to use the tag, which italicizes text. You can use CSS to further define this tag for unique emphasis.

html> head> style> em  color: red; > style> head> body> Anything that uses the em element will be em>italicized (because of the default settings), as well as redem> because of the additional style settings added above. body> html> 

Using HTML (Deprecated)

Avoid using the old tags. This has been «deprecated», which means it works but is no longer in use or recommended. This is because HTML is not designed to style content. The tag will still work, but it is now supposed to represent text that is different than the other text, such as misspelled words.

Use the tags to underline (demonstration only). There is virtually no case where you should be using this method anymore. However, it can be good to know how it was used in the event you have to update an old website.

html> body> The old underline tag in HTML u>allowed you to underline things quicklyu>, but it made things a mess when other style elements got involved. This is why modern underlining is accomplished using the "text-decoration" CSS element. body> html> 

Community Q&A

You’ll first need to ID your image in your HTML file, then go to your CSS file, call your ID, and in the brackets, say ‘text-decoration: underline;’ .

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

There are many potential reasons, check that you have the correct image file path for the image. If the image shows on a computer but not a mobile phone, check if the style sheet has different rules for images on mobile devices.

Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow

Источник