2 Easy Ways to Underline Text in CSS and HTML

PDF download Download Article
A user-friendly guide to underlining text with codes
PDF download Download Article

Do you want to use the underline tag in HTML? In the past, the HTML code for underlining text was the simple <u></u> 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.

Things You Should Know

  • The <u> 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.
Method 1
Method 1 of 2:

Using CSS

PDF download Download Article
  1. The Text-decoration property sets the appearance of decorative lines on text in CSS. [1]
    • 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 <u> 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 .
  2. Place the opening tag along with the "text-decoration" property where you want to start underlining. Place the closing </span> where you want it to stop. [2] 
     < 
 span 
 style 
 = 
 "text-decoration: underline;" 
 > 
This will be underlined. </ 
 span 
 >
    Advertisement
  3. 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 underlined </ 
 h3 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  4. . You'll be able to quickly underline at any time. In your style sheet or <style> 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 underline </ 
 div 
 > 
different parts < 
 div 
 class 
 = 
 "underline" 
 > 
of your content </ 
 div 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  5. Underlining should be avoided to keep from confusing your reader. One popular method is to use the <em> 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 red </ 
 em 
 > 
because of the additional 
style settings added above. </ 
 body 
 > 
 </ 
 html 
 >
    6. Advertisement
Method 2
Method 2 of 2:

Using HTML (Deprecated)

PDF download Download Article
  1. 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 <u> tag will still work, but it is now supposed to represent text that is different than the other text, such as misspelled words.
  2. 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 quickly </ 
 u 
 > 
, 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 
 >
    3. Advertisement

Community Q&A

Search
Add New Question
  • Question
    What is the CSS to underline heading image on a web page?
    Community Answer
    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.
    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
    Yes No
    Not Helpful 2 Helpful 4
  • Question
    Why is the image not showing on my mobile phone while creating an HTML file?
    Techdocgeek
    Community Answer
    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.
    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
    Yes No
    Not Helpful 0 Helpful 1
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • There are always new ways to emphasize a content on a webpage other than underlining. Consider sprucing up your text with other CSS elements.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Create Bold and Italicized Text in HTML
      A Guide to Overlining Characters in Microsoft Word
      How to
      Quote and Cite a Poem in an Essay Using MLA Format
      How to
      Write an English Essay
      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      Advertisement

      References

      1. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
      2. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u

      About This Article

      Article Summary X

      1. Open your code for editing.
      2. Scroll to the text to be underlined.
      3. Insert the SPAN tag before and after the text.
      4. Use the "text-decoration: underline" style.
      5. Define the style in your CSS.
      6. Save your document.

      Did this summary help you?
      In other languages
      Thanks to all authors for creating a page that has been read 216,312 times.

      Reader Success Stories

      • Anonymous

        Dec 5, 2016

        "The alternate suggestions (along with the proper way to code it) helped."
      Share your story

      Is this article up to date?

      Advertisement