What is the Mark Element? | HTML Interview Questions

What You'll Learn

Using the mark element
Highlighting use cases
Dynamic highlighting

The Mark Element

The <mark> element highlights text for reference purposes - like search results, terms in a glossary, or important passages. It's rendered with a yellow background by default.

When to Use

mark: For highlighting relevance
em: For emphasis
strong: For importance

Examples

index.htmlHTML

<!-- Search result highlighting -->
<p>The quick brown <mark>fox</mark> jumps over the lazy dog.</p>

<!-- Multiple highlights -->
<p>
  HTML stands for <mark>HyperText</mark> <mark>Markup</mark>
  <mark>Language</mark>.
</p>

Dynamic Highlighting

code.jsJavaScript

const search = document.getElementById('search');
const content = document.getElementById('content');
const originalText = content.textContent;

search.addEventListener('input', (e) => {
  const term = e.target.value;
  if (term) {
    content.innerHTML = originalText.replace(
      new RegExp(term, 'gi'),
      '<mark>$&</mark>'
    );
  }
});