The HTML <mark> element is used to highlight text that is relevant or important in a particular context. Browsers usually display marked text with a yellow background, making it easy for users to notice.

The <mark> element is useful for highlighting search results, keywords, important terms, or specific parts of content.

What Is HTML Marked Text?

The <mark> element represents text that has been highlighted because it is relevant to the current context.

For example, <mark>HTML</mark> highlights the word “HTML”.

A simple example is:

<p>Learn <mark>HTML</mark> to create web pages.</p>

The browser normally displays HTML with a highlighted background.

HTML Mark Syntax

The basic syntax is:

<mark>Highlighted Text</mark>

You can place <mark> inside paragraphs, lists, headings, and other suitable HTML elements.

For example:

<p>HTML is a <mark>markup language</mark> used to create web pages.</p>

Here, “markup language” is highlighted.

Why Use the <mark> Element?

The <mark> element is useful when you want to draw attention to specific content without changing its basic meaning.

Common uses include:

• Highlighting search results
• Highlighting keywords
• Showing relevant phrases
• Drawing attention to specific information
• Highlighting matching text
• Emphasizing content in educational material

For example, a search result might display:

<p>Search results for: <mark>HTML</mark></p>

The matching search term can be highlighted so the user can find it quickly.

HTML Marked Text Example

Here is a simple example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Marked Text</title>
</head>

<body>

  <h1>HTML Marked Text</h1>

  <p>
    HTML is used to create the structure of
    <mark>web pages</mark>.
  </p>

  <p>
    The <mark>&lt;mark&gt;</mark> element highlights text.
  </p>

</body>
</html>

The browser will normally display the marked portions with a highlighted background.

Using Multiple <mark> Elements

You can use multiple <mark> elements in the same paragraph.

For example:

<p>Learn <mark>HTML</mark>, <mark>CSS</mark>, and JavaScript.</p>

Both HTML and CSS will be highlighted.

This can be useful when several keywords need to stand out.

HTML Marked Text with CSS

You can customize the appearance of <mark> using CSS.

<style>
  mark {
    background-color: lightblue;
    color: black;
  }
</style>

<p>
  Learn <mark>HTML</mark> with Web4Learners.
</p>

Here, CSS changes the default appearance of the highlighted text.

You can also use a class when you need different styles for different marked elements.

For example:

<mark class=”keyword”>HTML</mark>

.keyword {
  background-color: yellow;
  color: black;
  padding: 2px 4px;
}

<mark> vs <strong>

The <mark> and <strong> elements have different purposes.

Element	Purpose	Typical Appearance
<mark>	Highlights relevant text	Highlighted background
<strong>	Indicates strong importance	Bold
<em>	Indicates emphasis	Italic
<small>	Represents secondary information	Smaller text

For example:

<p><mark>HTML</mark> is a markup language.</p>

Here, HTML is highlighted because it is relevant.

On the other hand:

<p><strong>Warning:</strong> Do not delete this file.</p>

Here, the warning has strong importance.

<mark> vs CSS Background Color

You can create a visual highlight using CSS:

<span class=”highlight”>HTML</span>

.highlight {
  background-color: yellow;
}

This can look similar to <mark>, but there is a semantic difference.

The <mark> element specifically represents text that is highlighted because of its relevance in the current context. A CSS background color only changes the visual appearance.

Use <mark> when the highlighting itself has meaning.

Marked Text in Search Results

One practical use of <mark> is highlighting search terms.

For example:

<p>
  Results for:
  <mark>HTML</mark>
</p>

<p>
  Learn <mark>HTML</mark> from beginner to advanced.
</p>

This makes the searched keyword easy to identify.