How to make a text underline ?

Difficulty: 2/10

HTML semantics, CSS styling, accessibility

Making Text Underlined in HTML

In HTML, you can underline text using the tag or by applying CSS with the text-decoration property. The tag renders text with a simple underline, while CSS provides more control and is the preferred method in modern web development.

Example Using Tag

Example Using CSS Inline Style

Example Using CSS Class

Key Points About Underlining

1
Use for simple underlining, but it is not semantic.
2
Use CSS (text-decoration: underline) for better control and accessibility.
3
Avoid underlining text unnecessarily, as it can be confused with hyperlinks.
4
CSS allows more styles, such as overline and line-through.

Scenario Questions

0-2 years experience

1We need to underline the word 'Sale' in a promotional banner. How would you write the HTML and CSS to achieve that?
2If you use the tag to underline text, what are the potential drawbacks in modern web development?
3How would you ensure the underline appears consistently across different browsers?

Follow-up Questions

What problems can arise if you rely on the tag for emphasis?
How would you make the underline color change automatically with a dark theme?
What steps would you take to verify the underline renders correctly on mobile browsers?