HTML <mark> Tag for Highlighting Relevant Text
The HTML <mark> element highlights text that is relevant in the current context. A common example is highlighting the words a visitor searched for inside a result or paragraph.
Browsers normally render marked text with a highlighted background, but the appearance can be changed with CSS.
Basic <mark> Example Top ↑
<p>This tutorial explains the <mark>HTML mark element</mark> with examples.</p>Rendered output:
This tutorial explains the HTML mark element with examples.
Use <mark> when the highlighted text becomes relevant because of the surrounding context. It is not a replacement for bold text or semantic importance.
When to Use <mark>, <strong>, or <em> Top ↑
<mark>: highlights text that is relevant to the current task or context.<strong>: indicates strong importance, seriousness, or urgency.<em>: adds stress emphasis that can change the meaning of a sentence.
For example, a search page can wrap the matching search term in <mark>. A warning such as “Do not share your password” may use <strong> because the message itself is important.
Styling <mark> with CSS Top ↑
You can change the default highlight while keeping the semantic <mark> element.
mark {
background-color: #fff3a3;
color: #212529;
padding: 0 0.15em;
}If only some highlights need a different style, use a class:
.custom-mark {
background-color: lightblue;
color: black;
border-radius: 0.2rem;
}<p>This is a <mark class="custom-mark">custom highlight</mark>.</p>Rendered output:
This is a custom highlight.
Highlighting Search Terms Top ↑
Search results are one of the clearest uses of <mark>. If a visitor searches for “HTML forms,” a result can mark that phrase so the match is easy to spot:
<p>Learn how to create accessible <mark>HTML forms</mark> with labels and validation.</p>The matching logic normally comes from JavaScript or server-side code. The <mark> element only supplies the semantic markup for the highlighted result.
Accessibility Considerations Top ↑
Assistive technologies do not necessarily announce <mark> as “highlighted.” For that reason, important meaning should not depend only on the visual highlight.
- Use surrounding text that explains why the marked words matter.
- Keep sufficient contrast between the text and highlight background.
- Do not use color alone to communicate an error, warning, or status.
- Avoid adding hidden “highlight start/end” announcements to every mark unless testing shows they genuinely help your users; repeated announcements can become distracting.
Practical Uses of <mark> Top ↑
- Search results: show where a query matches a result.
- Quoted passages: call attention to a section that is relevant to the current discussion.
- Educational material: identify terms that are being discussed or reviewed.
- Review interfaces: highlight text selected for comments or revision.
Complete Example Top ↑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML mark example</title>
<style>
mark {
background-color: #fff3a3;
color: #212529;
}
</style>
</head>
<body>
<h1>Search results</h1>
<p>Result matching <mark>HTML tutorial</mark>.</p>
</body>
</html>Common Mistakes Top ↑
- Using
<mark>merely because yellow text looks attractive. - Using it instead of
<strong>for important warnings or instructions. - Highlighting so much text that nothing stands out.
- Choosing custom colors with poor text/background contrast.
- Assuming
<mark>itself gives a ranking or SEO advantage.
Frequently Asked Questions Top ↑
What does the HTML <mark> tag do? Top ↑
It identifies text that is relevant in the current context and is normally displayed with a highlighted background.
Is <mark> the same as <strong>? Top ↑
No. <mark> indicates contextual relevance, while <strong> indicates strong importance, seriousness, or urgency.
Can I change the color of <mark>? Top ↑
Yes. Use CSS to change its background, text color, padding, or other presentation while keeping the semantic element.
Is <mark> suitable for highlighting search terms? Top ↑
Yes. Highlighting matched search terms is one of its most common and appropriate uses.
Does using <mark> improve SEO? Top ↑
There is no special ranking benefit from the element itself. Use it when it helps users understand which text is relevant.
Related HTML Tutorials Top ↑
HTML5 tags | Types of HTML tags | Bold and strong text in HTML | Underlining text in HTML
HTML5 Tags Types of HTML tags
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
