How to Underline Text using CSS?

How to Underline Text in HTML?

Last Updated : 21 Nov, 2024

Here are two methods to underline text in HTML.

1. Underlining text using <u> Tag

The <u> tag is used to underline text content. It wraps the content to be underlined with a horizontal line beneath it. This tag is commonly used for hyperlinks or emphasized text.

Syntax

<u> Underlined Text </u>

html

<p><u>This is the Underlining example</u></p>

Output

This is the Underlining example

2. Using CSS text-decoration Property

We can use CSS text-decoration property inline, internal or external which will allow for the decoration of text, including underlining. By setting text decoration to "underline", text within HTML elements can be visually emphasized with a line beneath it, providing a clear indication of emphasis or link styling.

Syntax

text-decoration: underline:

html

<p style="text-decoration: underline;">This is the Underlining example</p>

Output

This is the Underlining example

Both methods underline text, but the decision to use one over the other depends on your needs

Use <u> when you need quick underlining in simple projects where semantic meaning is less important.
Use CSS text-decoration for more control, better separation of concerns, and cleaner code.

How to Underline Text using CSS?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to Wrap Text in HTML?

To wrap text in HTML, you can use the default behaviour of block-level elements like <p>, <div>, and <h1>, which automatically wrap text to fit within their parent container. For more control over text wrapping, you can use CSS properties like word-wrap, white-space, and overflow-w

How to Underline Text using CSS?

To underline a text using CSS, the CSS text-decoration property is used with the value set to underline.Using text-decorationWe use the text-decoration CSS property to underline a text using CSS. The text that is to be underlined is inserted in a <p> tag and the property is applied.Syntaxtext-

HTML DOM Underline Object

The DOM underline object is used to represent the HTML <u> element. The underline element is accessed by getElementById(). Syntax: document.getElementById("id"); Where 'id' is the ID assigned to the <u> tag. Example 1: In this example, we will use the DOM underline object. HTML <!DOCT

How to Style Text in HTML?

The HTML style attribute adds styles to an element, such as color, font, size, and more. Here, we are going to learn how to style Text in HTML.These are the following methods:Table of ContentUsing CSS StylesUsing Element for StylingUsing CSS StylesThe <b> tag makes text bold, while <strong

How to indent text in HTML by using CSS ?

Text indentation in an HTML document sets the length of empty white space before lines of text in a block, typically marking the beginning of a paragraph. Proper indentation can enhance the readability and layout of your web content. Here, we will explore several common approaches for text indentati

How to change the underline color in CSS?

In this article, we are going to learn how to change the underline color in CSS, To change the underline color in CSS, use the text-decoration-color property. Set it to the desired color value. Styling is implemented in HTML text to make it catchy and attractive. The text can be made italic, underli

How to set smaller text using HTML?

To create smaller text in HTML5, use the <small> tag. This element is designed specifically to reduce font size, providing a straightforward method to display text in a smaller font within web documents.Syntax:<small> Content... </small>Example:Â The following is the explanation of

How to define important text using HTML5 ?

In this article, we define an important text by using the <strong> tag in HTML. It is the parsed tag and used to show the importance of the text. It reflects the text as bold. Syntax: <strong> Contents... </strong> Example 1: html <!DOCTYPE html> <html> <head>

How to overrule underlining Hyperlinks ?

In CSS, the hyperlinks are underlined by default. This is due to the default decoration that is imposed by HTML/CSS. To get rid of this underline, we need to do the following changes in the default decoration of the anchor tag using CSS. We can get rid of underlying hyperlinks by using CSS text-deco

How to Remove Underline from Links in CSS?

The text-decoration property is used to remove the underline from links in CSS. You can use the below syntax on anchor element to remove underline from link.Syntaxa { text-decoration: none;}It is very basic to remove underline from link with text-decoration property. The none value removes the under