How to use the HTML5 mark tag

Use the <mark> tag to highlight relevant or important text in a specific context; 2. It is often used to highlight search results, user operations related text, cited content or content to be reviewed; 3. The default style is a yellow background, which can be customized through CSS; 4. Apply to semantic highlights, rather than pure decorative styles; 5. Avoid only for visual effects, decorative highlights should be used with class <span>; 6. Pay attention to accessibility, screen readers usually do not specifically remind you, and key content should be enhanced with <strong> or ARIA tags; 7. Correct use can improve the readability and semantic clarity of the content. </mark>

The HTML5 <mark></mark> tag is used to highlight text that is relevant or important within a specific context. It's not just for visual styling—it carries semantic meaning, indicating that the marked text stands out from the surrounding content for reference, notation, or user attention.

Here's how to use it effectively:

When to Use the <mark></mark> Tag

The <mark></mark> tag should be used when you want to draw attention to a portion of text due to its relevance in a particular context. Common use cases include:

• Highlighting search results on a page
• Marking text that's relevant to the user's current action
• Indicating quoted text from another source that you're commenting on
• Showing text that's been edited or require review

For example, if a user searches for the word "HTML" on a page, you might wrap every instance of "HTML" in a <mark></mark> tag to make it stand out.

 <p>Search results for "HTML": This tutorial teaches you <mark>HTML</mark> basics.</p>

Basic Syntax and Styling

The syntax is simple—just wrap the relevant text in <mark> and </mark> .

 <mark>This text will be highlighted</mark>

By default, most browsers style the <mark> tag with a yellow background and black text, similar to using a physical highlighter. But you can customize it with CSS:

 mark {
  background-color: #ff6f61;
  color: white;
  padding: 2px 4px;
  border-radius: 3px;
}

This allows you to match the highlight style to your site's design.

Semantic vs. Visual Highlighting

It's important to distinguish between semantic highlighting and visual styling:

• Use <mark> when the highlight has meaning—like relevance or context.
• Don't use <mark> just for decoration. If you're only changing colors for style, use a <span> with a class instead.

For example, this is appropriate:

 <blockquote>
  She said <mark>we should meet tomorrow</mark> during the call.
</blockquote>

But this is not the best use:

 <!-- Avoid: purely decorative -->
<p>Click the <mark>Submit</mark> button to continue.</p>

In the second case, consider using a <strong> or <span> depending on intent.

Accessibility Considerations

The <mark> tag is neutral in terms of accessibility—it doesn't convey strong emphasis like <strong> or <em> . Screen readers typically don't announce the tag specifically, so don't rely on it to communicate importance to assistive technologies.

If the highlighted content is critical, pair it with other cues:

• Use ARIA labels if needed
• Add explanation text
• Combine with <strong> if emphasis is needed

Example:

 <p>Your search for <mark><strong>JavaScript</strong></mark> returned 12 results.</p>

This ensures both visual and semantic clarity.

Basically, use <mark></mark> when you want to highlight text that's contextually significant—not just because it looks good. It's a small tag, but when used right, it improves readingability and meaning.

The above is the detailed content of How to use the HTML5 mark tag. For more information, please follow other related articles on the PHP Chinese website!