HTML Mark Tag: How to Highlight Text

The mark tag highlights text in HTML and shows that the text has relevance in the content. It adds a yellow background to words.

How to Use the <mark> Tag in HTML

You can use it to show search terms inside a paragraph. It draws attention when they scan. So, it helps users find key words fast. This tag belongs to the HTML5 group of semantic tags.

Here is the syntax:

<mark>Your text here</mark>

You can place it inside inline elements.

Here is a quick example:

<p>This is <mark>highlighted</mark> text.</p>

You can also nest it in tags like <span> or <a>. Avoid placing it in block-level elements in the wrong way. That breaks the page structure.

So, What are the reasons of using this tag?

• It shows readers which parts most important.
• It makes key terms easy to see. So, it helps readers scan and understand fast.
• It also works well in search result pages.
• Tutorials and technical guides use it to show focused terms.

The mark tag adds meaning for screen readers and other tools. You can also style it to match the site design.

But you have to avoid it in the following cases:

• Do not use it to stress words in a general way. Use <strong> for importance and <em> for voice or tone.
• Avoid tagging every keyword. That clutters the layout.
• Also, do not use it to boost SEO keywords.

How to Style the <mark> Element with CSS

You can change the default yellow with CSS. The syntax looks like this:

mark {
  background-color: lightblue;
  color: black;
}

You can also adjust font or spaces. Or even borders. This keeps the design consistent. So, the highlight fits your brand.

Nest and Combine the <mark> Element with Other Tags

You can put the <mark> tag inside other HTML tags or put other tags inside the <mark> tag to mix styles or meanings.

You can put <mark> inside other tags like this:

<p>This is a <mark>very important</mark> message.</p>

The <mark> is inside the paragraph tag <p>. It just highlights some of the text.

You can also put other tags inside the <mark> tag:

<mark><strong>Warning:</strong> This is serious!</mark>

Here, we are highlighting the text, and also making the word “Warning:” bold using <strong>.

The Difference Between and Other Tags in HTML

Here is a table that shows you the key differences:

Here is a list shows you when to use each one:

• The <mark> to highlight based on context (like search terms).
• Use <strong> for important content (meaning).
• The <em> to show emotion or stress.
• Use <span> when you want to custom-style something with CSS.

Examples of <mark> Tag in HTML

Search Term Highlight in User Input:

<p>Search results for "<mark>HTML</mark>":</p>
<ul>
  <li><mark>HTML</mark> stands for HyperText Markup Language.</li>
  <li>Learn how to use <mark>HTML</mark> tags properly.</li>
</ul>

This example shows how to highlight a search keyword (“HTML”) within the results. It improves user experience if it shows exactly where the match appears, like in search engines or other features.

Highlighting Part of a Link or Button Label:

<a href="https://flatcoding.com"><mark>HTML</mark> Web Docs</a>
<button>View <mark>Updates</mark></button>

This example shows that <mark> can be used inside links and buttons to highlight key parts of labels. This is useful in UI/UX to draw attention to important actions like “Updates” or keywords.

Styling <mark> with CSS for Custom Theme:

<style>
  mark.custom-highlight {
    background-color: #ffcc00;
    color: black;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
  }
</style>

<p>Remember to use <mark class="custom-highlight">semantic</mark> HTML in your project.</p>

Here, <mark> is given a custom style with a class. It’s useful for branding or accessibility when the default yellow isn’t suitable. You can fully control the look using CSS.

Wrapping Up

In this article, you learned what the <mark> tag does and how to use it in your HTML pages.

Here is a quick recap:

• <mark> highlights text with a default yellow background.
• You can use it to show search terms or key references.
• It supports screen readers and improves content clarity.
• CSS styles can adjust its look to match your site.

<p>This is <mark>important</mark> text.</p>

mark {
  background-color: lightgreen;
  color: black;
  padding: 2px;
}

Similar Reads