Lesson 22 — Highlighting Text <mark>

Learning Goals

• Understand the purpose of the <mark> element.
• Learn how highlighting is different from bold or italic text.
• See how it’s useful in search results and study material.

Part 1 — What is <mark>?

The <mark> element highlights text with a default yellow background. It indicates relevance, often used for search terms or to draw attention in notes.

Part 2 — Example

<p>Search results for “HTML”:  
Here is the <mark>HTML</mark> keyword highlighted.</p>

Result: The word “HTML” appears highlighted, drawing the reader’s eye.

Part 3 — Best Practices

• Use <mark> for relevance or context, not for general styling.
• Don’t replace <strong> or <em> with <mark>.
• Great for tutorials, study guides, or highlighting search terms.

Part 4 — Common Mistakes

• ❌ Over-highlighting — too much yellow loses meaning.
• ❌ Using it as decoration — CSS is better for that.
• ❌ Mixing with <u>, which looks like links.

Quick Quiz

1. What does <mark> do?
2. When should you use <mark>?
3. Why not use it for decoration?

Mini Project — Search Highlight

Write a paragraph of text. Wrap one keyword in <mark> to simulate a search result highlight.

Lesson 22 Dictionary

Terms introduced in this lesson.

M

<mark> (Highlight)

Marks text as relevant by highlighting it, usually with a yellow background. Useful for search results or notes.