Questions
2 of 7
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
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 <u> tag or by applying CSS with the text-decoration property. The <u> tag renders text with a simple underline, while CSS provides more control and is the preferred method in modern web development.
Example Using <u> Tag
Example Using CSS Inline Style
Example Using CSS Class
Key Points About Underlining
- 1
Use <u> 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 <u> tag to underline text, what are the potential drawbacks in modern web development?
- 3How would you ensure the underline appears consistently across different browsers?
2-5 years experience
- 1Your team added an underline to navigation links using text-decoration, but in high‑contrast mode the underline disappears. How would you debug and fix it?
- 2We want to underline only part of a paragraph without affecting line height. Which CSS approach would you choose and why?
- 3During a redesign, the design system switched from <u> to a utility class for underlines. What trade‑offs should we consider?
5-8 years experience
- 1In a large web app, we need to support theming where underlines change color based on the theme. How would you architect the CSS to handle this efficiently?
- 2Our accessibility audit flagged that underlined text is being confused with links. How would you redesign the underline usage across the product to meet WCAG while preserving visual intent?
- 3We have a legacy codebase with many <u> tags. What strategy would you use to migrate to a modern CSS‑based solution without breaking existing pages?
8+ years experience
- 1Our company is consolidating multiple brand style guides into a unified design system. How would you define a scalable approach for underlines—including semantics, theming, and accessibility—that can be adopted across all front‑end teams?
- 2When rolling out a global CSS change to replace <u> tags with a design‑system component, what cross‑team processes and tooling would you put in place to ensure safe deployment and backward compatibility?
- 3Discuss the long‑term maintenance implications of using CSS custom properties for underline styling versus hard‑coded values in a multi‑product ecosystem.
Follow-up Questions
- What problems can arise if you rely on the <u> 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?