About
Kodeclik is an online coding academy for kids and teens to learn real world programming. Kids are introduced to coding in a fun and exciting way and are challeged to higher levels with engaging, high quality content.
Popular Classes
Scratch Coding
Minecraft Coding
TinkerCAD
Roblox Studio
Python for Kids
Javascript for Kids
Pre-Algebra
Geometry for Kids
Copyright @ Kodeclik 2025. All rights reserved.
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!
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).
You can use the style attribute with CSS to underline text. This is a quick way to apply styles directly to an element.
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.
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!
It helps draw attention to specific words or phrases. This can be useful when you want to highlight important details or differentiate a term from surrounding text.
In some designs, underlining may be part of the visual identity or mimic traditional print formatting, such as in titles or headers.
With HTML5, the <u> tag isn’t just for decoration; it can indicate text that has a non-standard annotation (for example, representing a proper name in certain languages or indicating a misspelling). This adds a layer of meaning to the presentation.
<!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><!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><!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>