Underlining words in 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,339 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

Источник

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> 
 

Источник

text-decoration

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness property.

Try it

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can’t remove the decoration. For example, in the markup

This text has some emphasized words in it.

, the style rule p < text-decoration: underline; >would cause the entire paragraph to be underlined. The style rule em < text-decoration: none; >would not cause any change; the entire paragraph would still be underlined. However, the rule em < text-decoration: overline; >would cause a second decoration to appear on «some emphasized words».

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

text-decoration: underline; text-decoration: overline red; text-decoration: none; /* Global values */ text-decoration: inherit; text-decoration: initial; text-decoration: revert; text-decoration: revert-layer; text-decoration: unset; 

The text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

Values

Sets the kind of decoration used, such as underline or line-through .

Sets the color of the decoration.

Sets the style of the line used for the decoration, such as solid , wavy , or dashed .

Sets the thickness of the line used for the decoration.

Formal definition

• text-decoration-color : currentcolor
• text-decoration-style : solid
• text-decoration-line : none

• text-decoration-line : as specified
• text-decoration-style : as specified
• text-decoration-color : computed color
• text-decoration-thickness : as specified

• text-decoration-color : a color
• text-decoration-style : discrete
• text-decoration-line : discrete
• text-decoration-thickness : by computed value type

Formal syntax

Examples

Demonstration of text-decoration values

.under  text-decoration: underline red; > .over  text-decoration: wavy overline lime; > .line  text-decoration: line-through; > .plain  text-decoration: none; > .underover  text-decoration: dashed underline overline; > .thick  text-decoration: solid underline purple 4px; > .blink  text-decoration: blink; > 

p class="under">This text has a line underneath it.p> p class="over">This text has a line over it.p> p class="line">This text has a line going through it.p> p> This a class="plain" href="#">link will not be underlineda>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. p> p class="underover">This text has lines above em>andem> below it.p> p class="thick"> This text has a really thick purple underline in supporting browsers. p> p class="blink"> This text might blink for you, depending on the browser you use. p> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The individual text-decoration properties are text-decoration-line , text-decoration-color , text-decoration-style , and text-decoration-thickness .
• The text-decoration-skip-ink , text-underline-offset , and text-underline-position properties also affect text-decoration, but are not included in the shorthand.
• The list-style attribute controls the appearance of items in HTML and lists.

Found a content problem with this page?

This page was last modified on Apr 20, 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.

Источник