Mark

Learn how to use the <mark> element to highlight text that is relevant or searchable within a specific context, such as search results or user notes.

What it is

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes. Unlike general styling tags like <span>, <mark> carries semantic meaning: it indicates that the enclosed text is of special relevance in the current context. This could be because it matches a search query, contains a keyword defined by the author, or has been annotated by the user.

Related terms include semantic markup (using tags for meaning rather than just appearance) and accessibility (ensuring assistive technologies understand the emphasis).

Why it matters

• Semantic Clarity: It tells browsers and screen readers that the content is specifically highlighted for attention, not just styled arbitrarily.
• User Experience: In search interfaces, it helps users quickly locate their query terms within long blocks of text.
• Styling Consistency: Browsers apply default yellow background styling to <mark>, providing an immediate visual cue without custom CSS.
• Accessibility: Screen readers can announce marked text differently depending on the implementation, aiding users with visual impairments.

Syntax or steps

The syntax is straightforward. Wrap the target text inside opening and closing <mark> tags. No attributes are required for basic functionality, though global attributes like class or id can be added for styling or scripting.

<p>Search result: The <mark>quick</mark> brown fox jumps over the lazy dog.</p>

Example

Below is a realistic example simulating a search result page where the term "HTML" is highlighted within a paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mark Element Example</title>
    <style>
        /* Optional: Customize the default mark style */
        mark {
            background-color: #ffeb3b;
            color: black;
            padding: 0 2px;
        }
    </style>
</head>
<body>
    <h1>Search Results for "HTML"</h1>
    <p>
        <strong>HTML</strong> stands for HyperText Markup Language. 
        It is the standard markup language for documents designed to be displayed in a web browser. 
        You can define what content appears in the browser using <mark>HTML</mark> tags.
    </p>
    <p>
        While CSS handles presentation, <mark>HTML</mark> handles structure. 
        Developers often confuse the two, but they serve distinct roles in web development.
    </p>
</body>
</html>

Part-by-part explanation:

• The <style> block overrides the default browser styling for mark to ensure high contrast and readability.
• In the first paragraph, the word "HTML" is wrapped in <mark> tags to show it matches the search query.
• In the second paragraph, another instance of "HTML" is marked, demonstrating that multiple occurrences can be highlighted independently.

Common mistakes

• Using it for general emphasis: Do not use <mark> instead of <strong> or <em>. If the text is important due to its meaning, use <strong>. Use <mark> only when the text is relevant to a specific external context (like a search).
• Nesting incorrectly: Avoid nesting <mark> inside other inline elements unnecessarily if it breaks the flow. Keep it simple around the text nodes.
• Ignoring accessibility: Relying solely on color changes can exclude color-blind users. Ensure sufficient contrast between the background and text color.
• Over-highlighting: Marking too much text dilutes the effect. Only mark the exact keywords or phrases that match the user's intent.

When to use it

Compare <mark> with similar elements to choose the right tool.

Practice

Guided Exercise: Write a sentence about JavaScript. Highlight every instance of the word "function" using the <mark> tag.

Challenge: Create a small HTML page with a list of fruits. Add a CSS rule that makes <mark> have a red background and white text. Apply this to the word "Apple" in the list.

Hint: Remember that <mark> is an inline element, so it fits naturally within sentences or list items.

Quick check

Question: Should you use <mark> to make a heading bold?

Answer: No. Use <strong> for importance or CSS font-weight for visual boldness. <mark> is strictly for highlighting text relevant to a specific context, such as a search match.

Summary

The <mark> element provides semantic value by indicating text that is highlighted for reference or notation. It is essential for features like search result highlighting and user annotations, distinguishing these cases from general emphasis provided by <strong> or <em>.