HTML Zero → Mastery — Lesson 21: Underlined Text ()

Learning Goals

Understand the purpose of the  element.
Learn when underlining is appropriate.
Avoid confusing underlined text with links.

Part 1 — What is ?

The  element underlines text. Historically it was used for emphasis, but today it usually indicates non-textual annotations like misspellings or special names.

Part 2 — Example

<p>This is <u>underlined text</u>.</p>
<p>Misspelled: <u>recieve</u></p>

Result: The text appears underlined, but may confuse users if overused, since links are underlined too.

Part 3 — Best Practices

Use  for annotations, not general emphasis.
Avoid underlining normal text — it looks like a link.
Use  or  for emphasis instead.

Part 4 — Common Mistakes

❌ Underlining normal paragraphs — confuses readers.
❌ Using  instead of CSS for decoration.
❌ Mixing underlined text with links in the same paragraph.

Quick Quiz

What does  do?
Why should underlining be avoided in most cases?
What is a better alternative for emphasis than ?

Sample Answers

It underlines text.
Because underlines usually indicate links, which can confuse users.
Use  or .

Mini Project — Spellcheck Demo

Create a short paragraph with three intentionally misspelled words. Wrap them in  to simulate a spellchecker’s underlines.

Lesson 21 Dictionary

U
 (Underline): Marks text with an underline, typically for annotations or misspellings. Should not be used for emphasis.

Lesson 21 — Underlined Text <u>