<mark>-Highlight the text Translate this sentence into English, output only plain text, do not output any other content

The <mark> tag is a semantic tag introduced in HTML5, used to highlight text content. It is typically employed to mark parts of a document that require special emphasis or prominence, such as keyword matches in search results or user-annotated key content. By default, browsers add a yellow background to text within the <mark> tag, but the styling can be customized using CSS.

Basic Usage of the <mark> Tag

Using the <mark> tag is very simple—just wrap the text you want to highlight between <mark> and </mark>. For example:

<p>This is a normal paragraph with a <mark>highlighted</mark> word.</p>

Rendered effect:

This is a normal paragraph with a <mark>highlighted</mark> word.

Semantic Meaning of the <mark> Tag

The <mark> tag is not just a styling tag; it also carries semantic meaning. It informs browsers and search engines that the enclosed text holds special importance or relevance in the current context. This differs from <strong> (indicating importance) and <em> (indicating emphasis).

For example, on a search results page, matching keywords can be highlighted using the <mark> tag:

<p>Search results: Latest features of <mark>HTML5</mark> explained.</p>

Customizing the Style of the <mark> Tag

Although browsers default to adding a yellow background to the <mark> tag, you can fully customize its appearance using CSS. For example:

<style>
  mark {
    background-color: #ffeb3b; /* Bright yellow */
    color: #333;
    padding: 0.2em;
    border-radius: 3px;
  }

  mark.important {
    background-color: #ff5722; /* Orange */
    color: white;
    font-weight: bold;
  }
</style>

<p>This is <mark>default-style</mark> highlighted text.</p>
<p>This is <mark class="important">custom-style</mark> highlighted text.</p>

Rendered effect:

This is <mark>default-style</mark> highlighted text. This is <mark class="important" style="background-color: #ff5722; color: white; font-weight: bold;">custom-style</mark> highlighted text.

Practical Use Cases for the <mark> Tag

1. Highlighting Search Keywords

In search functionality, the <mark> tag is ideal for highlighting search keywords:

<h3>Search Results</h3>
<ul>
  <li>Detailed explanation of <mark>JavaScript</mark> closures</li>
  <li>Prototype chain mechanism in <mark>JavaScript</mark></li>
  <li>Comparing <mark>JavaScript</mark> and TypeScript differences</li>
</ul>

2. Highlighting Key Points in Educational Content

Online education platforms can use <mark> to highlight key points in lessons:

<div class="lecture-content">
  <p>In CSS, the <mark>box model</mark> is one of the most fundamental and important concepts. It consists of content, padding, border, and margin.</p>
</div>

3. Highlighting Clauses in Legal Documents

<article>
  <h4>User Agreement</h4>
  <p>Users must not <mark>reverse engineer</mark>, <mark>decompile</mark>, or <mark>disassemble</mark> any part of this software.</p>
</article>

Comparing <mark> with Other Highlighting Methods

Comparison with <span> + CSS

While you can achieve similar effects using <span> with CSS, <mark> is more semantic:

<!-- Using span -->
<p>This is <span style="background-color: yellow">span-based</span> highlighting.</p>

<!-- Using mark -->
<p>This is <mark>mark-based</mark> highlighting.</p>

Comparison with <strong> and <em>

• <strong>: Indicates importance of content
• <em>: Indicates emphasis in tone
• <mark>: Indicates relevance or reference-based highlighting

<p><strong>Warning:</strong> This operation is <em>irreversible</em>. Please proceed <mark>with caution</mark>.</p>

Browser Compatibility for the <mark> Tag

The <mark> tag is widely supported in modern browsers, including:

• Chrome 6+
• Firefox 4+
• Safari 5+
• Opera 11.1+
• Edge 12+
• Internet Explorer 9+

For older browsers (mainly IE8 and below), you can provide compatibility with the following:

<style>
  mark {
    background-color: yellow;
    color: black;
  }
</style>
<!--[if lt IE 9]>
<script>
  document.createElement('mark');
</script>
<![endif]-->

JavaScript Interaction with the <mark> Tag

You can dynamically add or remove <mark> highlights using JavaScript. For example, implementing a text highlighting tool:

<textarea id="textInput" rows="4" cols="50">
This is a sample text where you can highlight specific words.
</textarea>
<br>
<input type="text" id="highlightText" placeholder="Enter text to highlight">
<button onclick="highlight()">Highlight</button>
<button onclick="clearHighlight()">Clear</button>

<script>
  function highlight() {
    const text = document.getElementById('textInput').value;
    const highlightText = document.getElementById('highlightText').value;
    if (!highlightText) return;
    
    const regex = new RegExp(highlightText, 'gi');
    const highlighted = text.replace(regex, match => `<mark>${match}</mark>`);
    document.getElementById('textInput').value = highlighted;
  }
  
  function clearHighlight() {
    const text = document.getElementById('textInput').value;
    const unhighlighted = text.replace(/<\/?mark>/g, '');
    document.getElementById('textInput').value = unhighlighted;
  }
</script>

Accessibility Considerations for the <mark> Tag

While the <mark> tag itself is semantic, additional context may be needed for screen readers. Use aria-label to provide more information:

<p>Recent studies show that <mark aria-label="Key finding">caffeine</mark> significantly affects cognitive abilities.</p>

Print Styles for the <mark> Tag

When printing pages, you may need to adjust <mark> styles for readability:

@media print {
  mark {
    background-color: transparent;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: yellow;
    text-decoration-thickness: 0.2em;
  }
}

Nesting the <mark> Tag

The <mark> tag can be nested with other inline elements:

<p>This is <mark><strong>highlighted and important</strong></mark> text.</p>
<p>This is <mark><em>highlighted and emphasized</em></mark> text.</p>
<p>This is <mark><a href="#">a clickable highlighted link</a></mark>.</p>

Animation Effects for the <mark> Tag

You can add CSS animations to make <mark> more noticeable:

<style>
  mark.pulse {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { background-color: #ffeb3b; }
    50% { background-color: #ffc107; }
    100% { background-color: #ffeb3b; }
  }
</style>

<p>Pay attention to this <mark class="pulse">blinking</mark> important notice.</p>

Using the <mark> Tag in Forms

Highlight form validation errors with <mark>:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <button type="submit">Submit</button>
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(e) {
    const email = document.getElementById('email');
    if (!email.validity.valid) {
      e.preventDefault();
      email.style.border = '2px solid red';
      const label = document.querySelector('label[for="email"]');
      label.innerHTML = label.innerHTML.replace('Email:', '<mark>Email:</mark>');
    }
  });
</script>

SEO Impact of the <mark> Tag

From an SEO perspective, the <mark> tag doesn't directly affect rankings, but it can help search engines understand key parts of your content. Proper use of <mark> can:

1. Highlight content relevant to search queries
2. Mark key information in documents
3. Enhance content readability and user experience

Creative Uses of the <mark> Tag

1. Progressive Highlighting

<style>
  mark.fade-in {
    background-color: rgba(255, 235, 59, 0);
    animation: fadeIn 2s forwards;
  }
  
  @keyframes fadeIn {
    to { background-color: rgba(255, 235, 59, 1); }
  }
</style>

<p>Key content that <mark class="fade-in">gradually highlights</mark> while reading.</p>

2. Multi-color Highlighting System

<style>
  mark.yellow { background-color: #fff176; }
  mark.blue { background-color: #81d4fa; }
  mark.green { background-color: #a5d6a7; }
  mark.pink { background-color: #f8bbd0; }
</style>

<p>Use different colors to <mark class="yellow">categorize</mark> and <mark class="blue">mark</mark> different types of <mark class="green">key</mark> content, just like <mark class="pink">highlighters</mark>.</p>

3. Highlight Note System

<div class="note">
  <p>Meeting Notes:</p>
  <ul>
    <li><mark data-note="Important">Project deadline moved to Friday</mark></li>
    <li><mark data-note="Question">Does the budget need adjustment?</mark></li>
    <li><mark data-note="Action">Contact design team for new assets</mark></li>
  </ul>
</div>

<style>
  mark[data-note="Important"] { background-color: #ffcdd2; }
  mark[data-note="Question"] { background-color: #bbdefb; }
  mark[data-note="Action"] { background-color: #c8e6c9; }
  
  mark::after {
    content: attr(data-note);
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 0.3em;
    color: #666;
  }
</style>