Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

HTML Text Decoration: How to Underline Text with the HTML Tag

Every web developer seeks to develop aesthetically pleasing and functional websites and web applications that would captivate and also easily communicate functions to users. While trying to achieve this aesthetic and functionality to your users, text-decoration is needed.

Text decoration comprises the decorations that can be added to your texts, this can be underline, strikethrough, colors, text thickness, overline, and dotted. Text-decoration allows you to communicate functions and aesthetics with a user for example ‘Example‘. You default know that ‘Example‘ is a link and a new webpage opens when it is clicked.

Checkout everything you need to know about text decoration from this YouTube video:

In this article, I will walk you through the different ways of using HTML underline tag to convey different messages and aesthetics to your readers. If you are excited as I am writing about this article, let’s dive right in 🚀

Just before diving in, I want to introduce you to our AI tool. PureCode AI is an AI-powered platform that is built by developers for developers. It improves your workflow by allowing you to choose from over 10k AI-generated components.

Purecode AI landing page

Overview of HTML Tags

HTML tags are simple instructions to your web browsers that are used to format texts, images, videos, and elements that are on your webpage. Some HTML tags include:

<p> Paragraph Tag </p> This tag formats any text between the opening <p> tag and the closing </p> tag as a standard paragraph or main body text.

<h2> Heading Tag </h2> Using this tag will format any text between the opening <h2> tag and the closing </h2> tag as a Heading 2 (a type of subheading.)

<b> Bold Tag </b> This tag will format any text between the opening <b> tag and the closing </b> tag as bold.

What is the HTML <u> Tag?

The <u> tag in HTML tag is a semantic tag that allows you to underline text that is contained before its closing tag. The tag allows you to underline texts on your website.The underlined text could serve for aesthetics and or emphasis.

When to Use the <u> Tag

We have already established that the <u> can enhance aesthetics and portray functionality and emphasis to users.

Underlined text is used to help draw attention to the text. We use the <u> tag to underline a text in HTML. It represents a text in a different style from another text in the content of the web page. We can also use the style attribute to underline a text in HTML. The style attribute specifies an inline style for an element.

When do we use the <u> tag:

Identifying Missed spelling

The <u> tag can also help with identifying missed spellings of words. This identification allows for easy correction, which in turn improves the general readability of the website. Using the <u> tag in this scenario allows for efficient detection of missed spells and correction, which enhances the website’s readability.

Proper name marks in Chinese text

In Chinese texts, proper name holds a lot of significance which might require additional aesthetics to communicate their significance. The tag can be utilized by applying it to proper nouns in Chinese texts to portray their significance. The tag would allow web developers to display Chinese text with the visual appeals it requires especially for proper nouns.

Understanding the <u> Tag

The HTML <u> tag also referred to as the Unarticulated Annotation element, represents a span of inline text with a non-textual annotation and should be rendered accordingly. By default, this is rendered as a simple solid underline, but it can be changed with CSS. When text is enclosed within <u> tags, you can visually emphasize specific content while simultaneously conveying implicit cues to users regarding its importance or context.

  • Default Styling: When the <u> tag is used the default style is a single straight line under the enclosed text. The text not enclosed in the tag is not underlined. Although the tag’s default styling is simple, CSS (Cascading Style Sheets) can be used to further modify its appearance to your webpages’ design and aesthetic needs.

  • Semantic meaning and non-textual annotation: It is worth noting that the <u> tag can have other applications in HTML documents aside from text decoration. It can also convey semantic meaning or act as a non-textual annotation. Underlined text occasionally serves as a hyperlink, directing users to relevant content or external websites.

Use Cases for the <u> Tag

Now let’s explore some of the possible use cases for the <u> tag, as the function of the tag scales beyond aesthetics to also functionality.

Misspelled Words

The tag can be utilized to show misspelled errors in webpages that allows for easy identification and improves the site’s readability.

  • Below is an example of using the <u> tag to highlight misspelled words. To demonstrate this, the following example uses a paragraph that has been underlined, but which also contains text inside:

<p>It's important to double-check your <u>spelling</u> before submitting the document.</p>
Underlined Misspelled Word
  • Use of CSS for styling misspelled text with a red wavy line: This code snippet below demonstrates using underline to improve the visual aesthetic of the misspelled:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Tags</title>
    </head>
    <body>
      <style>
        u.spelling {
        text-decoration: underline;
        text-decoration-color: red;
        text-decoration-style: wavy;
      }
      </style>
      <p>It's important to double-check your
        <u class="spelling">spelling</u>
        before submitting the document.
      </p>

    </body>
  </html>
Misspelled word with Wavy line

Proper Name Mark in Chinese Text

  • The proper names are extremely important in Chinese texts, and communicating their significance may necessitate additional aesthetics. The <u> tags are added to ensure that proper names show emphasis.

  • Example of using the <u> tag for proper name. In the example snippet below, the proper names are 李华

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tags</title>
</head>
<body>
<style>
  u.spelling {
  text-decoration: underline;
  text-decoration-color: rgb(0, 255, 123);
  text-decoration-style: wavy;
}

</style>
<p>请欢迎我们的特别嘉宾:<u class="spelling">李华</u>。</p>

</body>
</html>
Proper name mark in Chinese texts

Styling with CSS

Let’s dive into how we can style our <u> tags with CSS

CSS offers a robust approach that can be utilized to customize the <u> tag based on your design specifications. To style the tag in your CSS you have to use the text-decoration property and its suitable values to replicate your design specifications. The text-decoration property specifies the decoration added to the text; it is a shorthand property for:

  • text-decoration-line (required): Possible values are underline, overline, line-through, underline, overline, and none.

  • text-decoration-color: the color of the text

  • text-decoration-style: Possible values are solid, double, dotted, dashed, wavy, and initial.

  • text-decoration-thickness: the thickness of the line used for the text decoration.

u {
  /* Apply underline */
  text-decoration-line: underline;
  /* Set underline color */
  text-decoration-color: blue;
  /* Set underline style */
  text-decoration-style: dashed;
  /* Set underline thickness */
  text-decoration-thickness: 2px;
  /* Specify which parts to skip for underline */
  text-decoration-skip: none;
}

  • Example of styling misspelled text with a red wavy line using CSS

    Misspelled word with a Wavy line

Caution: Avoid Using <u> Tag for Styling

Though the <u> tag allows you to easily underline texts in any suitable design, you have to avoid using it for styling purposes. Some of the reasons why you should avoid using the <u> tag for styling are:

Semantic Implications

When the tag is applied to text it usually gives users the impression of semantic meaning, hence applying the tag for styling purposes only might confuse users. The website accessibility might be affected when the tag is used for styling purposes.

  • Code optimization: Following modern web development processes that optimize codes, your styling for texts should be applied in your CSS, instead of using the <u> tag. This will ensure that styling consistency is maintained in your code.

  • Flexibility: CSS affords you greater flexibility for your styling than you can achieve by using just the <u> tag. In CSS while maintaining the semantic meaning you can add other styling like color, style, and thickness to your text.

Titles of Books

In noting creative works like books, songs, articles, and movies, you have to style the text so users are aware of its purpose. In HTML when styling texts you use the <cite> tag. The <cite> tag is to be used instead of <u> or <i> tags, which ensures that browsers, search engines, and accessibility features are aware the text represents a referenced book, movie, song, or article.

  • Using the <cite> tag for book titles:


<p>One of my favorite books is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
Using the Cite tag

In the example above The Great Gatsby is cited as a book title. This would allow browsers and search engines to know that the book was cited in the webpage. Using tags like <cite> can help improve the search engine optimization(SEO) of a website.

  • Overriding default styles using CSS for <cite> tag: When you use the <cite> tag the default style is to render the text in italics. The default style of italics can be overwritten using CSS to better resonate with your general site design. Using CSS you can adjust the font style, color, and text decorations (underline, overline, and strikethrough).

cite {
  font-style: italic; /* Make text italic */
  color: #0066cc; /* Change text color */
  /* Add additional styles as needed can be added */
}

or

cite {
  font-style: normal; /* Make text normal without italics */
  text-decoration: underline; /* Make text underlined */
  color: #0066cc; /* Change text color */
}

Let’s explore an example where we would make the cited text underlined and also italicized

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tags</title>
  </head>
  <body>
  <style>
  cite {
    font-style: italic; /* Make text normal without italics */
    text-decoration: underline; /* Make text underlined */
    color: #0066cc; /* Change text color */
  }
  </style>
  <p>
    One of my favorite books is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.
  </p>
  </body>
</html>
Overriding the default Cite styling

Specifying Spelling Errors

The <u> tag can help you specify spelling errors. This identification enables easy correction, which improves the overall readability of the website. Using the <u> element improves webpage readability by efficiently detecting and correcting misspelled words.

In the example below, “misspelled” is enclosed within the <u> tag with the class “spelling-error” to show a spelling mistake.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tags</title>
</head>
<body>
<style>
u.spelling-error {
  /* Apply red color for spelling errors */
  color: red;
  /* Apply dashed underline style */
  text-decoration: underline;
}

</style>
<p>Please review the following paragraph for any <u class="spelling-error">misspelled</u> words:</p>
</body>
</html>
Specifying spelling errors

HTML Underline Text Syntax

In HTML, to underline texts, there are two approaches you can use the <u> tag or CSS. Both of the approaches provide the same results, you can choose them based on code consistency and the desired function of the text.

  • Syntax examples for using the <u> tag in HTML Using the <u> is quite simple, basically enclosing the text in the tags would apply the effect to the text.

<p>This is <u>underlined</u> text.</p>
Syntax example using the u tag
  • Examples of using CSS to underline text Using CSS to underline text involves utilizing the text-decoration property in classes to specify the effect. CSS offers more flexibility, than the <u> tag because of the text’s color, thickness, and font style.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Tags</title>
</head>
<body>
  <style>
    .underline {
      /* Apply underline style */
      text-decoration: underline;
      text-decoration-color: blue;
      text-decoration-thickness: 2px;
    }
  </style>

  <p>This is <span class="underline">underlined</span> text using CSS.</p>

</body>
</html>
Using CSS to underline

Tabular Comparison of Different Ways to Underline Text In HTML

MethodUsageExampleNotes
<u> tagSemantic underlining<u>Underlined text</u>Default single underline. Use for misspellings, annotations, etc.
text-decoration CSSPresentational underlining<span style=”text-decoration: underline;”>Underlined text</span>More control over styling. Use when no semantic meaning needed.
text-decoration-line CSSCustom underline styles<span style=”text-decoration-line: red wavy underline;”>Underlined text</span>Set color, style, thickness of underline.
text-decoration: underline overlineUnderline + overline<span style=”text-decoration: underline overline;”>Underlined text</span>Add both underlines and overlines.
<cite> tagBook/publication titles<cite>Book Title</cite>Semantic meaning for citations. Defaults to italics.

This table above compares different techniques for underlining text in HTML, including the semantic <u> tag, presentational CSS underlining, custom underline styles, combining with overlines, and using <cite> for book titles. The key is choosing the right approach based on the meaning and purpose of the underlined text.

FAQs

How Do You Underline Text In HTML?

The <u> tag can be used to underline text in HTML. For example:

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

How Do You Underline Text In HTML Without Using The <u> Tag?

You can underline text using inline CSS styles instead of the <u> tag, like this:

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

How Do You Change The Style Of Underlined Text In HTML?

Use the CSS text-decoration property to change the color, style, and thickness of underlined text. For example:

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

How Do You Underline And Overline Text In HTML?

Use both the text-decoration and text-decoration-line CSS properties:

<p>This text is <span style="text-decoration: underline overline;">underlined and overlined</span>.</p>

What Are Some Best Practices For Underlining Text In HTML?

  • Use semantically only for misspellings, annotations, etc.

  • Avoid using the <u> tag for purely presentational styling

  • Use CSS text-decoration instead of <u> tag when possible

  • Don’t underline text meant to be a book title

What You Have Learned

Let’s recap the key areas we have gone through in this piece, we explored what tags are in HTML, what the HTML <u> tag is, and when to use the tag. We also expressly explored how to use the tag and its potential use cases. Then we explored Styling the <u> tag with CSS, how to use the <cite> tag for books, and underlining in HTML using tags and CSS. The knowledge from this article will give you the skills to efficiently underline, and cite texts in your websites and web applications.

The <u> tag is a semantic element that should only be used in very specific cases. If you want to point out spelling errors within the text, then you can use the <u> tag. A less common example would be to use the tag in Chinese proper name marks. You should never use the <u> tag for styling purposes.

Avoid using the <u> element with its default styling (of underlined text) in such a way as to be confused with a hyperlink, which is also underlined by default. Valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in Chinese text, and other forms of annotation. You should not use <u> to underline text for presentation purposes, or to denote titles of books.

AI is taking the world by storm, and so are we. We are not left behind. That is why, we at Purecode AI have simplified how to build websites or web applications. You no longer have to spend countless hours writing codes for different parts of your software. Check out how we have simplified the process of programming with AI.

Check out this YouTube video to learn more about making text underlined in HTML:

Further Readings

If you enjoyed reading this piece, be sure to check out other articles from our blog:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.