Underline Text in HTML

Underlining in HTML used to be a matter of enclosing the text in <u></u> tags, but this method has since been abandoned in favor of the much more versatile CSS. Underlining in general is considered a poor way to draw attention to text. This is because underlined text is easily mistaken for a link.

Steps

Current Method

  1. Use the "text-decoration" CSS style property. Using the <u> tag is no longer the proper way to underline text. Instead, use the "text-decoration" CSS property.
    • This helps make your code future-proof so that you don't have to go back and change things once the old code becomes unusable.
  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.[1]
  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:
  4. Create a CSS class 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.
  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 Style-a-Page-Using-CSS to further define this tag for unique emphasis.

Deprecated Method

  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 is now supposed to represent text that is different than the other text, such as misspelled words or Chinese proper nouns.
  2. Use the <u></u> tags to underline (demonstration only). There is virtually no case where you should be using this method anymore. It can be good to know how it was used in case you have to update an old website.

Tips

  • There is almost always a better way to emphasize content on a web page instead of underlining. It can be very confusing for your readers. Consider sprucing up your text with CSS to make it stand out.

Related Articles

Sources and Citations

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

You may like

Retrieved from "https://kipkis.com/index.php?title=Underline_Text_in_HTML&oldid=266082"