Kodeclik Blog
How to underline text in HTML
Underlining text in HTML can be useful for several reasons.
However, it’s important to use underlining carefully—users often associate underlined text with links. So, if you’re underlining non-interactive content, ensure the context makes it clear that the text isn’t clickable.
All that being said, lets look at three different ways to underline text in HTML along with example code!
Method 1: Use the <u> Tag
The <u> element is a simple way to underline text. It was originally used purely for styling, but now it carries semantic meaning for text that is non-emphasized yet underlined (e.g., proper names in some languages).
<!DOCTYPE html>
<html>
<head>
<title>Underline with <u> Tag</title>
</head>
<body>
<p>This is <u>underlined</u> text using the <code><u></code> tag.</p>
</body>
</html>Method 2: Use Inline CSS with text-decoration
You can use the style attribute with CSS to underline text. This is a quick way to apply styles directly to an element.
<!DOCTYPE html>
<html>
<head>
<title>Underline with Inline CSS</title>
</head>
<body>
<p style="text-decoration: underline;">
This text is underlined using inline CSS.
</p>
</body>
</html>3. Use a CSS Class with text-decoration
For a cleaner and more maintainable approach—especially when underlining text in multiple places—you can define a CSS class in a <style> block or an external stylesheet.
<!DOCTYPE html>
<html>
<head>
<title>Underline with CSS Class</title>
<style>
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="underline">
This text is underlined using a CSS class.
</p>
</body>
</html>When do you use which method?
Each method has its use-case. The <u> tag is quick and semantic for certain contexts, while CSS (either inline or via a class) offers more flexibility and control over styling.
In conclusion, underlining text in HTML is a straightforward yet powerful way to emphasize specific content on your web pages. Whether you opt for the semantic clarity of the <u> tag, the flexibility of inline CSS, or the reusability of CSS classes, each method allows you to achieve a distinct visual effect that aligns with your design goals.
Remember to consider user experience, as underlined text is often associated with links, and choose the approach that best fits the context of your content. With these techniques in hand, you're now equipped to effectively highlight and differentiate text in your HTML projects!
