HTML5のmark要素は検索語など文脈上の関連部分を示す

HTML5のmark要素は、文章の中から検索語に一致した箇所を示す場合や、引用文の中から説明対象を示す場合に使います。太字や背景色を付けるための汎用要素ではありません。

文そのものの強勢にはem要素、重要性や重大性にはstrong要素を使います。見た目だけを変えたい場合は、意味を持たないspan要素とCSSを検討してください。

mark要素は別の文脈との関連を示す

HTML5 Recommendationのmark要素に関する定義では、別の文脈との関連によって、参照のために目立たせた一続きの文章をmark要素で表します。

検索結果で、利用者が入力した語に一致する箇所を示す例が分かりやすい使い方です。説明用の仮例として、利用者が「保守」を検索した場合は、次のように記述できます。

<p>WordPressの<mark>保守</mark>では、更新前にバックアップを確認します。</p>

「保守」が文章の中で特に重要だから囲むのではありません。利用者が検索した語との関連があるため、その箇所を示しています。検索語が変われば、mark要素で囲む箇所も変わります。

引用文へあとから注目箇所を示すときにも使える

引用した文章の一部について解説するときも、mark要素を使えます。引用元の筆者が強調した箇所ではなく、引用する側が説明のために注目箇所を加える場合です。

<p>次の文章では、更新責任に関する箇所を確認します。</p>
<blockquote>
  <p>公開後の更新は<mark>管理者が毎週確認します</mark>。</p>
</blockquote>

この文章は説明用の仮例です。mark要素は、引用元にあった強調を再現しているのではなく、解説対象を示しています。引用元の強調をそのまま伝える場合は、元の意味に合うmarkupを保ちます。

引用文へmark要素を加えた場合は、どの箇所を引用する側が示したのか、前後の説明から分かるようにします。引用元の表現と、引用する側の判断を混同させないためです。

markとemとstrongは見た目ではなく意味で分ける

三つの要素は、ブラウザの標準表示だけを見ると似た強調に見える場合があります。しかし、選ぶ基準は色、太字、斜体ではありません。

em要素は、強勢を置く語によって文の意味を変えます。strong要素は、文の意味を変える強勢ではなく、内容の重要性や重大性を示します。mark要素は、その文章を読む利用者の行動や、周囲の解説との関連を示します。

「目立たせたい」という一つの理由で、三つを置き換えないでください。先に何を伝えるかを決め、その意味に合う要素を選びます。

見た目だけを変えるならspan要素とCSSを使う

商品名をブランドカラーにする、codeのkeywordを色分けするなど、文章上の関連、強勢、重要性を示さない装飾にはspan要素を使えます。HTML5 Recommendationも、syntax highlightingにはspan要素が適すると説明しています。

mark要素の色をサイトへ合わせる場合は、意味を決めたあとでCSSを指定します。

<p>検索語「保守」に一致しました：<mark class="search-hit">保守</mark></p>

mark.search-hit {
  background: #fff2a8;
  color: inherit;
}

CSSで背景色を変えても、mark要素の意味は変わりません。反対に、背景色を付けたいという理由だけでは、mark要素を選ぶ根拠になりません。

検索結果へ使うときは元の文章を壊さない

検索語の表示機能を実装するときは、元の文章と検索語に一致した範囲を分けます。文章全体を手作業で複製すると、更新した本文と検索結果用の本文がずれるためです。

実装の確認は、小さな例から始めます。

1. 一つの段落と一つの検索語で一致範囲を決める
2. 一致した文字列だけをmark要素で囲む
3. 一致しない文章が変わっていないことを確認する
4. 複数一致、英字の大文字と小文字、空の検索語を確認する
5. 対象ブラウザで表示と操作を確認する

制作を委託する場合は、色の指定だけでなく、何を検索語として扱うか、どの文章を対象にするか、検索語が空の場合にどうするかを受け取ります。HTMLを書く作業を委託しても、利用者へどの関連を示すかという判断はサイト運営者に残ります。

最初の一手は、既存HTMLで背景色や太字だけを目的にmark要素を使っていないか確認することです。検索語との一致や解説対象なら残し、強勢、重要性、単なる装飾なら、意味に合う要素へ直してください。