Underline text in HTML

Author: John Pratt
Date Of Creation: 17 April 2021
Update Date: 1 July 2024
Anonim
HTML Underline - How to underline text in HTML and CSS
Video: HTML Underline - How to underline text in HTML and CSS

Content

Underlining in HTML used to be a matter of enclosing the text between u> / u> tags, but this method has since been deprecated in favor of the more versatile CSS. Underlining in web pages is generally considered an inconvenient way to emphasize a particular section of text. This is because underlined text is easily confused with a link.

To step

Method 1 of 2: Current method

  1. Use the text-decoration property in your CSS style. Using the u> tag is no longer a suitable way to underline text. Instead, we use the CSS property "text-decoration".
    • This makes the code easier to modify, so that you don't have to change anything about the old code if it has become unusable.
  2. Use the span> tag when you want to underline a certain part of the text. Place the start tag along with the "text-decoration" property where you want the underlining to begin. Place the end tag / span> where the underlining should stop.

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

  3. Declare HTML elements in the style> part of your page. You can also do this in the CSS style sheet. Underlining can be made much easier by associating a style with an HTML element. For example, to underline all your level 3 headers, add the following CSS style:

    html> head> style> h3 {text-decoration: underline; } / style> / head> body> h3> This heading is underlined / h3> / body> / html>

  4. Create a CSS class to quickly underline at any time. You can create classes in your style sheet or style>, to be called later. The class can have any name you want.

    html> head> style> .underline {text-decoration: underline; } / style> / head> body> You can use this class to quickly underline div> / div> from different parts div> from your content / div> / body> / html>

  5. Consider other methods of emphasizing text. Underlining should be avoided to avoid confusion for the reader. A popular method is to use the em> tag, which makes text italic. You can use CSS to further specify this tag, for a unique way of emphasizing.

    html> head> style> em {color: red; } / style> / head> body> Everything inside the em element will become em> italic (because of the default settings), and red / em> because of the style added above. / body> / html>

Method 2 of 2: Outdated method

  1. Avoid using the old u> / u> tags. These are "discouraged", meaning it still works, but is no longer used or recommended. This is because HTML is in principle not designed as a markup language. The u> tag will still work, but is now intended to indicate text that is different from the other text, such as a misspelled word or Chinese proper nouns.
  2. Use the tag u> / u> for underlining (for illustration purposes only). Under no circumstances should you use this method again. It may be good to know how it was used in case you need to update an older website.

    html> body> With the old tag u> in HTML you could quickly underline things / u>, but things quickly get messy when other style elements were used. That is why we now underline "text-decoration" with the CSS element. / body> / html>

Tips

  • There is almost always a better way to emphasize something on a web page than with underlining. It can be very confusing for readers. Make your text more beautiful with CSS, to make it stand out positively.