mark Element in HTML
Highlight Important or Search-Related Text

HTML <mark> Element: Shine a Light on Key Text

Sometimes, you want to draw the reader’s eye to something important — a keyword, a match, a standout term. The <mark> element lets you do just that. It gives text semantic emphasis and visual highlighting, especially useful for search interfaces and annotations.

What Is the <mark> Element?

The <mark> element highlights text that is relevant to a user’s current action or context — like search results or selected keywords. By default, browsers render it with a yellow background, similar to a highlighter pen.

Basic Syntax

<p>My favorite fruit is <mark>banana</mark>. I eat one every day!</p>

My favorite fruit is banana. I eat one every day!

The word "banana" stands out visually — and semantically.

Common Use Cases

• Highlighting search result matches
• Annotating or emphasizing passages in a document
• Marking important changes or new content
• Temporarily drawing attention to key phrases

Example: Search Results Page

<p>Search results for “apple”:</p>
<p>The <mark>apple</mark> is sweet and crisp.</p>

Search results for “apple”:  
The apple is sweet and crisp.

Example: Contextual Highlight in an Article

<article>
  <h2>Benefits of Cherries</h2>
  <p>Cherries are <mark>rich in antioxidants</mark> and help reduce inflammation.</p>
</article>

Styling with CSS

The <mark> tag comes with default yellow background styling, but you can customize it with CSS:

mark {
  background-color: #ffe066;
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

Accessibility and Semantics

Screen readers may announce <mark> with emphasis or a tonal cue. Use it only when you want to highlight text that has a reason for standing out in the current context — not just to make something look yellow.

Best Practices

• Use <mark> to highlight relevant user-focused text
• Avoid using it purely for visual effect — <strong> or <em> might be better for emphasis
• Keep highlights short and context-aware

Summary

The <mark> element helps you highlight what matters — whether it’s a fruit name in a recipe search or a key update in your blog. You’ve now learned how to:

• Use <mark> for semantic text highlighting
• Support search, annotation, and real-time emphasis
• Style it with CSS and keep it accessible

What’s Next?

Next, we’ll wrap up with a review of how semantic HTML improves structure, accessibility, and SEO — bringing it all together for better web design.