PRO Courses Hot Guides Tech Help Pro Expert Videos About wikiHow Pro Upgrade
QUIZZES All Quizzes Hot Love Quizzes Personality Quizzes Trivia Quizzes Taylor Swift Quizzes
EDIT Edit this Article
EXPLORE Tech Help ProAbout UsRandom ArticleQuizzes Request a New ArticleCommunity DashboardTrendingForums Arts and EntertainmentArtworkBooksMoviesComputers and ElectronicsComputersPhone SkillsTechnology HacksHealthMen's HealthMental HealthWomen's HealthRelationshipsDatingLoveRelationship Issues Hobbies and CraftsCraftsDrawingGamesEducation & CommunicationCommunication SkillsPersonal DevelopmentStudyingPersonal Care and StyleFashionHair CarePersonal Hygiene Quizzes Love Quizzes Personality Quizzes Fun Games ForumsArts and EntertainmentFinance and BusinessHome and Garden Relationship QuizzesCars & Other VehiclesFood and EntertainingPersonal Care and Style Sports and FitnessComputers and ElectronicsHealthPets and Animals TravelEducation & CommunicationHobbies and CraftsPhilosophy and Religion Work WorldFamily LifeHolidays and TraditionsRelationships Youth
LOG IN
Log in
Social login does not work in incognito and private browsers. Please log in with your username or email to continue. FacebookGooglewikiHow Account No account yet? Create an account
RANDOM
Home
Random
Browse Articles
TrendingNew
Quizzes & Games
All QuizzesHot
Love Quizzes
Personality Quizzes
Fun Games
Dating Simulator
Learn Something New
Forums
Courses
Happiness Hub
Explore More
Support wikiHow
About wikiHow
Log in / Sign up
Terms of Use wikiHow is where trusted research and expert knowledge come together. Learn why people trust wikiHow
Categories
Computers and Electronics
Internet
Website and Blog Creation
Markup Languages
HTML
2 Easy Ways to Underline Text in CSS and HTML Download Article A user-friendly guide to underlining text with codes Co-authored by Christopher Batchelor and Rain Kengly
Last Updated: January 5, 2024 Tested
Download Article
Using CSS
|
Using HTML (Deprecated)
|
Video
|
Q&A
|
Tips
|Show more|Show less X
This article was co-authored by Christopher Batchelor and by wikiHow staff writer, Rain Kengly. Christopher Batchelor is a wikiHow community member and technology enthusiast. He has experience using a range of different platforms and software, and likes to keep up with updates and new features. The wikiHow Tech Team also followed the article's instructions and verified that they work. This article has been viewed 218,834 times.
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.
Steps
Method 1 Method 1 of 2:
Using CSS
Download Article
1 Use the "text-decoration" CSS style property. The Text-decoration property sets the appearance of decorative lines on text in CSS.[1]XResearch source
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 Use the <span> 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 </span> where you want it to stop.[2]XResearch source<spanstyle="text-decoration: underline;">This will be underlined.</span> Advertisement
3 Declare HTML elements in the <style> 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 underlined</h3></body></html>
4 Define a CSS Class Style. 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 <divclass="underline">quickly underline</div> different parts <divclass="underline">of your content</div></body></html>
5 Consider other methods for highlighting text. 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>
Advertisement Method 2 Method 2 of 2:
Using HTML (Deprecated)
Download Article
1 Avoid using the old <u></u> 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 <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 Use the <u></u> 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 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>
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 2
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 toUnderlineHow to Change Text Color in HTML and CSSHow to Create a Horizontal Line in HTML How toCreate Bold Text With HTMLHow toCenter Text in HTMLHow toLearn Web DesignHow toCreate a Simple CSS Stylesheet Using NotepadHow to Insert Spaces in HTML & CSS: 5 Easy Ways with ExamplesHow to Make Text Blink in HTML: Easy TutorialHow to Create a Basic HTML Website: A Step-by-Step GuideHow toUse Font Color Tags in HTMLHow toLearn HTMLHow toUpload Your Own Fonts to HTML Using CSSSimple Ways to Bold or Italic Your Text in Discord Advertisement
CB Co-authored by: Christopher Batchelor Tech Enthusiast This article was co-authored by Christopher Batchelor and by wikiHow staff writer, Rain Kengly. Christopher Batchelor is a wikiHow community member and technology enthusiast. He has experience using a range of different platforms and software, and likes to keep up with updates and new features. This article has been viewed 218,834 times. How helpful is this? Co-authors: 12Updated: January 5, 2024 Views: 218,834 Categories: HTMLArticle SummaryX
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?YesNo
In other languages Spanish Russian Italian French Indonesian German Dutch
Print
Send fan mail to authors
Thanks to all authors for creating a page that has been read 218,834 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?
Yes No Advertisement Cookies make wikiHow better. By continuing to use our site, you agree to our cookie policy. CB Co-authored by: Christopher Batchelor Tech Enthusiast Click a star to vote Co-authors: 12Updated: January 5, 2024 Views: 218,834
Anonymous
Dec 5, 2016
"The alternate suggestions (along with the proper way to code it) helped." Share yours!
Quizzes & Games
Cursed Text GeneratorGenerateMusic Notes & Symbols TestTake QuizDiscord Username Idea GeneratorGenerate NamesImpossible English TestTake QuizWhat Makeup Should I Wear QuizTake QuizWhat Eyeliner Type Looks Best on Me QuizTake Quiz
You Might Also Like
How toUnderlineHow to Change Text Color in HTML and CSSHow to Create a Horizontal Line in HTML How toCreate Bold Text With HTML
Featured Articles
How toExercise Your BrainHow toBe a Fun Person to Hang out WithWhat Does Your Morning Routine Say About You?How toDevelop Productive HabitsHow toPractice Self CareWhat Song Matches Your Life Right Now?
Trending Articles
How toMake OutHow Rare Is My Birthday QuizWhat Am I Craving QuizIs Your Personality More 6 or 7?What Should My Name Really Be QuizIs a Guy You Don't Know Well Interested in You?
Featured Articles
Your 2026 Vision: What Does Next Year Hold?Understanding the Most Attractive Face Shapes (& Determining Your Own)Type A B C D Personality Test250+ Messages to Reassure Your Partner (For Him & Her)What Is My Favorite Color Quiz215+ Funny & Creative Personalized Vanity Plate Ideas
Featured Articles
100+ Creative Ways to Say Good NightWhy Can't I Sleep Quiz150+ Love Paragraphs to Make Him Feel SpecialWhat Does Your Tattoo Placement Mean? Spiritual & Aesthetic Meanings19 of the Rarest Wonders from around the WorldWhat Is the Fun Scale? The 3 Types of Fun & Their Benefits
Watch Articles
How toWrap a Round GiftHow toSteam in an OvenHow to Make Plant-Based Meat: 4 Incredible RecipesHow toClean a Silver Necklace4 Easy Ways to Open a Can of SodaHow toPart Your Hair
Trending Articles
Can We Guess If You're a Cat or Dog Person?30 of the Hardest Riddles on Earth: The Harvard Riddle & BeyondWhich of the Big Three Are Your Parents? (Percy Jackson)How to Perform Magic: 8 Tricks for BeginnersWhat’s My Personality Based on My K-Pop Taste?What School Subject Are You?
Quizzes & Games
Uwu Text ConverterGenerateTurn Your Message into EmojisGenerateGrammar TestTake QuizAm I a Femboy QuizTake QuizLeetspeak TranslatorGenerateWhat Color Should I Dye My Hair QuizTake Quiz
Categories
Computers and Electronics
Internet
Website and Blog Creation
Markup Languages
HTML
wikiHow Newsletter You're all set! Helpful how-tos delivered toyour inbox every week! Sign me up! By signing up you are agreeing to receive emails according to our privacy policy.
Home
About wikiHow
Experts
Jobs
Contact Us
Site Map
Terms of Use
Privacy Policy
Do Not Sell or Share My Info
Not Selling Info
Contribute
Follow Us
×
wikiHow Tech Help:
Tech troubles got you down? We've got the tips you need
Download Article A user-friendly guide to underlining text with codes Co-authored by Christopher Batchelor and Rain Kengly 
Advertisement 
Generate
Take Quiz
Generate Names
Take Quiz
Take Quiz
Take Quiz 
Generate
Generate
Take Quiz
Take Quiz
Generate
Take Quiz 
1388 
1 Use the "text-decoration" CSS style property. The Text-decoration property sets the appearance of decorative lines on text in CSS.[1] 
2 Use the <span> 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 </span> where you want it to stop.[2] <span style="text-decoration: underline;">This will be underlined.</span> Advertisement 
3 Declare HTML elements in the <style> 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 underlined</h3> </body> </html> 
4 Define a CSS Class Style. 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 Consider other methods for highlighting text. 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> Advertisement 
1 Avoid using the old <u></u> 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 <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 Use the <u></u> 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 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> Advertisement 
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 
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 2 