How to set underline in HTML? How to underline text in HTML

Underlining in HTML used to be a matter of enclosing text in <u></u> tags, but this approach has been abandoned in favor of the more versatile CSS. Generally speaking, underline is considered a way to draw people's attention to text, so how to set underline in HTML? How to underline html text? Let’s summarize below.

1. Using the "text-decoration" CSS style property, using the <u> tag is no longer the correct way to emphasize text. Instead, use the "text-decoration" CSS property, the syntax is: <span style="text-decoration:underline;">This will underline</span>.

2. If you want to underline a section of text, use the <span> tag and place the opening tag along with the "text-decoration" attribute where you want the underline to start. Place </span>end where you want it to stop.

3. Declare HTML elements in the <style> section of the page. You can also do this on a CSS stylesheet, which makes the underlining process easier by declaring the HTML element as a style first. For example, to make all level 3 headings underlined, add the following to your CSS style section:

4. Create a CSS to quickly implement underline anytime in a stylesheet or <style> section you can create a class name to call later.

Code example:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Underline, strikethrough, underline example</title> 
<style> 
.php{text-decoration:underline} 
 </style> 
</head> 
 <body> 
<div class="php">I am underlined</div>  
</body> 
</html>

The code shows the result:

5. Consider other ways to highlight text. Underlining should be avoided to avoid confusing the reader. One popular method is to use the <em> tag, which italics the text. You can further define this tag using CSS for unique emphasis.

How to remove the underline of HTML a hyperlink

An example HTML a tag code is as follows:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>a tag hyperlink usage example</title>
</head>
<body>
<a href="">Please see if my hyperlink is underlined! </a>
</body>
</html>

The effect is as follows:

As shown in the picture, can you see the familiar underline? Then let's add a style attribute to CSS!

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>CSS hyperlink underline removal example</title>
 <style>
 a{
 text-decoration: none;
 }
 </style>
</head>
<body>
Please look again to see if I still have underline! </a>
</body>
</html>

The effect is as follows:

From the picture, we can see that the underline of the text hyperlink has been removed at this time? Isn’t this effect very simple to achieve? The main style attribute that everyone should master is text-decoration: none;. Adding this attribute to the corresponding a tag text can remove the text hyperlink underline.

This concludes this article on how to set underline in HTML? Methods for underlining HTML text. For more information on setting underline in HTML, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Summary of CJK (Chinese, Japanese, and Korean Unified Ideographs) Characters in Unicode