How to Underline Text in HTML: A Quick Guide

One popular way to emphasize text is by underlining it. In this blog post, we will explore the different methods to underline text in HTML, from the basic <u> tag to CSS styling techniques. HTML (Hypertext Markup Language) is the backbone of the web, allowing us to structure and format our content be it layout, formatting text or forming the basis of navigation. We have published a full HTML tutorial where you can learn all you need to know about HTML.

Underline Text Using the <u> Tag

The most straightforward way to underline text in HTML is by using the <u> tag. This tag is used to enclose the text you want to underline. Here’s an example:

<p>This is an <u>underlined</u> text.</p>

By wrapping the desired text with the <u> opening and closing tags, the text will appear underlined when rendered in a web browser.

Note: The <u> element was deprecated in HTML 4.01, but in HTML5 it was redefined to represent text that should be displayed in a way that is an unarticulated but stylistically distinct from the surrounding text.

Using CSS Styling

HTML provides us with various options to customize the appearance of our content. By leveraging CSS (Cascading Style Sheets), we can achieve more control over underlined text.

a) Inline CSS: Inline CSS allows you to apply styling directly to individual HTML elements. To underline text using inline CSS, you can use the text-decoration property with the value underline. Here’s an example:

<p style="text-decoration: underline;">This is an underlined text.</p>

The text-decoration property sets the decoration to be applied to the text, and the underline value specifies that the text should be underlined.

b) Internal CSS: Internal CSS is defined within the <style> tags in the <head> section of an HTML document. To underline text using internal CSS, you can target the desired HTML element and apply the text-decoration property with the value underline. Here’s an example:

<head>
  <style>
    p {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p>This is an underlined text.</p>
</body>

In this example, the <style> block targets the <p> element and sets the text-decoration property to underline, resulting in the text being underlined.

c) External CSS: External CSS allows you to define the styles in a separate CSS file, which can be linked to multiple HTML documents. To underline text using an external CSS file, create a CSS file (e.g., styles.css) and define the styling rules. Here’s an example:

styles.css:

p {
  text-decoration: underline;
}

The HTML file:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is an underlined text.</p>
</body>

In this example, the styles.css file is linked to the HTML document using the <link> tag. The CSS rule in the file applies the text-decoration property with the value underline to the <p> element.

Conclusion

Adding emphasis to your text by underlining it is a simple yet effective way to draw attention to important information on your web page. Whether you choose to use the <u> tag or leverage CSS styling options, HTML provides you with the flexibility to underline text according to your design preferences. Experiment with these techniques and create visually appealing content that captivates your audience.

How to Underline Text in HTML: A Beginner’s Guide

Underline Text Using the <u> Tag

Using CSS Styling

Conclusion