この記事の要点

<mark> はテキストの一部をハイライト表示するための HTML5 要素 デフォルトのスタイルは黄色背景。意味は「現在の文脈で注目してほしい部分」 典型用途: 検索結果のキーワード強調、引用文中で引用者が注目させたい箇所、コードレビューでの該当行など <em>（強調）<strong>（重要）とは意味が違う — mark は「読み手に対する注目喚起」 CSS で背景色や色を変更可能。アクセシビリティ的にも単なる span よりスクリーンリーダーで意図が伝わる

mark 要素とは

<mark> は HTML5 で導入されたハイライト用の要素です。デフォルトのレンダリングは黄色の蛍光ペンで線を引いたような表示で、視覚的・意味的に「ここに注目してほしい」と伝えます。

単なる装飾ではなく、意味のあるハイライトであることが重要です。CSS で背景色を黄色にした <span> でも見た目は同じですが、検索エンジンやスクリーンリーダーにはmark の方が意図が伝わります。

基本構文

<p>会議は明日の <mark>15:00</mark> から開催します。</p>

レンダリング例: 会議は明日の 15:00 から開催します。

典型的な用途

1. 検索結果でのキーワード強調

<!-- 検索ワード「JavaScript」を強調 -->
<p>初心者向け <mark>JavaScript</mark> 入門 - 基本構文から DOM 操作まで...</p>

2. 引用文中で引用者が注目させたい箇所

<blockquote>
  <p>真の知識とは<mark>「自分が何を知らないかを知ること」</mark>である。
  ── ソクラテス</p>
</blockquote>

原文では強調されていない箇所を、引用者が読者に注目させたい場面で使います。原文の強調は <em>、引用者の注目は <mark> という使い分けが意味的に正確です。

3. コードレビュー / 差分表示

<pre><code>
function add(a, b) {
    return a <mark>-</mark> b;  // ← ここがバグ！
}
</code></pre>

4. 注意喚起したい数値・固有名詞

<p>本商品は <mark>2026年6月30日</mark> まで限定価格です。</p>

em / strong / mark / b の使い分け

要素	意味	デフォルト表示
<em>	強調（文脈上意味が変わる）	斜体
<strong>	重要性が高い	太字
<mark>	注目喚起（読み手向け）	黄色背景
<b>	意味を変えずキーワード表示	太字
<i>	意味を変えず別文脈の表示（用語等）	斜体

CSS でカスタマイズ

/* ピンク背景に変更 */
mark {
    background-color: #ffe0e9;
    color: #c2185b;
    padding: 2px 4px;
    border-radius: 3px;
}

/* 蛍光ペン風（より自然な線） */
mark {
    background: linear-gradient(transparent 60%, #ffeb3b 60%);
    padding: 0;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    mark {
        background-color: #ffd54f;
        color: #000;
    }
}

JavaScript で動的に追加

検索フォームのキーワードを記事中に動的にハイライトするなら、テキストノードを置換します。

function highlight(root, keyword) {
    if (!keyword) return;
    const re = new RegExp(`(${keyword})`, 'gi');
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
    const nodes = [];
    while (walker.nextNode()) nodes.push(walker.currentNode);

    nodes.forEach(node => {
        if (re.test(node.nodeValue)) {
            const span = document.createElement('span');
            span.innerHTML = node.nodeValue.replace(re, '<mark>$1</mark>');
            node.parentNode.replaceChild(span, node);
        }
    });
}

highlight(document.querySelector('article'), 'JavaScript');

アクセシビリティ

スクリーンリーダーの多くは <mark> をデフォルトで読み上げません（CSS の見た目だけが変わる扱い）。重要な意味を持つハイライトには、必要に応じて aria-label や前後の補足テキストを併用しましょう。

<p>明日の予定:
   <mark aria-label="重要">15時 顧客打ち合わせ</mark> を厳守してください。</p>

ブラウザサポート

主要ブラウザ（Chrome / Firefox / Safari / Edge）すべて対応済み。IE11 も対応。スタイルが想定通り出ない場合は、リセット CSS で mark { background: yellow; color: black; } 等を補うとよいでしょう。

SEO への影響

Google は <mark> 内のテキストを通常の本文としてクロールします。検索結果でのキーワード強調は SEO 順位に直接の効果はないものの、ユーザーエクスペリエンス向上を通じて間接的に評価される可能性があります。

FAQ

Q: <span style="background:yellow"> でいいのでは？
A: 見た目は同じですが、意味のないただの装飾になります。<mark> は「注目してほしい箇所」という意味を持つ HTML 要素のため、ボイラープレートの可読性 / 保守性が上がります。

Q: 同じテキストを何度も mark してよい？
A: 用途的にはアリですが、多すぎるハイライトは逆に注意を分散させます。1 段落で 1〜2 箇所程度に留めると効果的。

Q: ハイライトのスタイルがブラウザでバラバラ
A: ベンダー間で背景色のトーンに差があります。明示的に mark { background: #ffeb3b; } 等を指定すると統一できます。

HTML 仕様での位置づけ

HTML Living Standard では <mark> は「現在のユーザー文脈における関連性のためにマークされた、参照のためのテキスト範囲」と定義されています。重要なのは「現在の文脈」という言葉で、原文に元から含まれる強調ではなく、読み手や別の文脈から見て注目すべき箇所に使うのが正しい使い方です。

避けるべき使い方

• 装飾目的のハイライト — 意味が無いなら CSS と <span> を使う
• 段落全体を mark — どこに注目すべきかわからなくなる
• 原文の強調に使う — それは <em> / <strong> の役割
• 新着情報の印 — 「新着」のような意味なら <span class="badge"> が適切

実例 — 検索結果ハイライト

多くの検索エンジン / ヘルプドキュメントは <mark> を使ってキーワードを強調しています。たとえば「JavaScript」で検索した結果ページでは、本文の JavaScript 部分が <mark>JavaScript</mark> として出力され、ユーザーが探していた語をすぐ視認できる仕組みです。

関連

• em 要素 — 強調
• strong 要素 — 重要性
• b 要素 — キーワード表示
• cite 要素 — 引用元
• q 要素 / blockquote 要素 — 引用
• span 要素 — 意味を持たないインライン要素