HTML mark Element

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.

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.

<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.

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

<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.

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

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;
}

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.

• 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

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

Choose the option that lists all and only the correct statements.

1. Highlighting search terms in a document
2. Marking up important warnings
3. Changing the font size
4. Emphasizing text in a paragraph

Choose the option that lists all and only the correct statements.

1. <em>
2. <strong>
3. <u>
4. <del>

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.