HTML mark: identify relevant text without calling it a warning

Use the distinction

A case search returns a sentence containing the matched seal term. The result page can mark the match so a reader locates it quickly. A separate strong message communicates that dispatch is blocked. The result still needs a readable title, case link, and surrounding context when highlight styling is absent. On a longer excerpt, highlight only the matching words; marking an entire paragraph erases the distinction. If the search term comes from a request, escape it as text before inserting any markup. The server must not allow a query to become raw HTML in the result.

<main>
  <h1>Case search results</h1>
  <article>
    <h2><a href="/cases/C-47">Case C-47</a></h2>
    <p>The upper <mark>seal</mark> was split during intake.</p>
    <p><strong>Dispatch blocked until review.</strong></p>
  </article>
</main>

Behavior and cost

Native markup costs no script. Search highlighting still needs safe text matching, correct escaping, and a result service; a static mark tag cannot find matches on its own. Check the result in high contrast and without CSS, since a color change alone may not convey why a word is highlighted. If assistive-technology users need an explicit match count, provide that in ordinary text. Avoid using mark as generic yellow styling for unrelated copy.

Common Mistakes

• Do not replace a warning's importance with mark merely because the default paint is bright.
• Do not insert unescaped query text into a result fragment.
• Do not highlight every word in a passage and call that a search match.

Connected lessons

• HTML inline text: emphasis, importance, code, and abbreviations
• HTML search form: pair a search landmark with a real GET result route
• HTML character references: escape data before inserting it into markup

Related CSS decisions

• CSS ::highlight(): paint searched text without changing its markup

Related CSS decisions

• CSS ::target-text: preserve the reader's place after a text-fragment link