HTML5

HyperText Markup Language 5 mark element.

mark 要素

Sample

　mark 要素は、文書内の特定のテキスト範囲をハイライトして目立たせる際に使用します。

Sample Source
<p>　<mark>mark 要素</mark>は、文書内の<mark>特定のテキスト範囲</mark>を<mark>ハイライトして目立たせる</mark>際に使用します。</p>

　mark 要素は、文書内の特定のテキスト範囲をハイライトして目立たせる際に使用します。strong 要素や em 要素のようにその部分を強調することが目的ではなく、周囲の文脈の中でマークを付けた部分の関連性や重要性を表すために、参照や記述していることを目立たせることが目的です。本の中で興味のある部分が見つかった時に、蛍光ペンを使ってマークするようなものだと考えてください。

　mark 要素は、作者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用します。 例えば、検索結果画面で文書中の検索ワード部分をハイライト表示する場合などに適しています。

HTML5 へのバージョンアップによる変更点

　mark 要素は、HTML5 から新たに追加された要素です。

説明のため特定のキーワードに注目させる

　次の例は、mark 要素の典型的な利用例でしょう。

注目としての利用例のサンプル

完全失業率の推移
西暦 失業率
2006年 4.1
2007年 3.9
2008年 4.0
2009年 5.1

　これは、総務省の統計局が公表している労働力調査の完全失業率を抜粋したものです。2009年の突出ぶりに注目してほしい。

注目としての利用例

<table>
<caption>完全失業率の推移</caption>
<thead>
<tr>
<th>西暦</th>
<th>失業率</th>
</tr>
</thead>
<tbody>
<tr>
<td>2006年</td>
<td>4.1</td>
</tr>
<tr>
<td>2007年</td>
<td>3.9</td>
</tr>
<tr>
<td>2008年</td>
<td>4.0</td>
</tr>
<tr>
<td>2009年</td>
<td><mark>5.1</mark></td>
</tr>
</tbody>
</table>

<p>　これは、総務省の統計局が公表している労働力調査の完全失業率を抜粋したものです。2009年の突出ぶりに注目してほしい。</p>

　ここでは、テーブルの中の特定の値に注目させるために、mark 要素でハイライトしています。そのハイライトした値について、その後の文章で言及しています。

引用者が引用文の一部をハイライトする

　mark 要素は、引用（q 要素）またはブロック引用（blockquote 要素）の中で使うこともできます。

　書籍や雑誌などで、著者が他の文献などを引用する際、通常は原文のまま掲載します。しかし、その引用文の一部の特別な関心事となる文字列などに引用者が傍線を引くことがあります。これは、その傍線を引いた部分について、その後に本文で説明したりするため、読者に対して目立つようにしているのです。

引用文の一部をハイライトする

<p>彼のブログ記事には、こう書かれている。</p>
<blockquote>
  <p>　子供は父親の背中を見て育つというが、まんざら嘘ではないと感じる。家庭の中で父親が規律を守ることで、子供もそれに従うことになる。通常、子供から見て父親というものは怖いものだ。そのため、子供もそれに従うことになる。規律を守らなければ、じっくりと子供に教え込むべきだ。</p>
  <p>　しかし、子供は賢い。もし<strong>父親が規律を守らない生活を送れば、子供もそれに従ってしまう</strong>。守れといっても説得力はない。子供と言えども、その理不尽さはしっかりと理解する。そう、<mark>子供は父親の姿をしっかり見ている</mark>のだ。たとえ、会話が少なかったとしてもだ。</p>
</blockquote>
<p>　強調部分は私が引いたものだ。子供は父親の姿をしっかり見ているという点については、私にも苦い経験がある。</p>

引用文の一部をハイライトするサンプル

　彼のブログ記事には、こう書かれている。

　子供は父親の背中を見て育つというが、まんざら嘘ではないと感じる。家庭の中で父親が規律を守ることで、子供もそれに従うことになる。通常、子供から見て父親というものは怖いものだ。そのため、子供もそれに従うことになる。規律を守らなければ、じっくりと子供に教え込むべきだ。

　しかし、子供は賢い。もし父親が規律を守らない生活を送れば、子供もそれに従ってしまう。守れといっても説得力はない。子供と言えども、その理不尽さはしっかりと理解する。そう、子供は父親の姿をしっかり見ているのだ。たとえ、会話が少なかったとしてもだ。

　強調部分は私が引いたものだ。子供は父親の姿をしっかり見ているという点については、私にも苦い経験がある。

　引用をハイライトする場合は、ハイライトは引用者によることを明記するのが礼儀ですし、読者にも区別できた方が理解しやすいはずです。しかし、HTML4 では、引用文に対して引用者がハイライトを入れたことを、セマンティクスとして伝えることができませんでした。例えば、strong 要素や em 要素や b 要素や i 要素を使ってしまうと、それが引用元での表現なのか、引用者側が加えたものなのか区別がつきませんでした。

　この例では、引用元では、重要なフレーズを strong 要素でマークアップしています。引用においては、その引用元の重要性のセマンティクスをそのまま反映しながらも、引用者は別のフレーズに注目していることを伝えているのです。

　このように、HTML5 では、引用で mark 要素を使うことで、これらをセマンティクスとして区別できるようになるのです。

検索結果における検索キーワードのマーキング

　検索結果画面で、検索キーワードをハイライトする場合も、mrak 要素が適しています。

Googleの検索結果画面

　これは、Google で “HTML5” という検索キーワードで検索した結果です。検索キーワードに一致する部分だけ太字になっています。もしこれを HTML5 でマークアップするとすれば、この太字になった部分が mark 要素にふさわしいと言えます。

　これまでの例では、mark 要素でマークアップしたフレーズに対して、他の箇所で何かしら言及していました。つまり、それについて他の箇所で言及するために、mark 要素でマークアップしてきました。そして、それが mark 要素の役割です。

　ただ、この例では、検索キーワードに言及しているものがありません。しかし、太字部分は、ユーザーから見れば、大いに関連する言葉です。「自分が入力した検索キーワード」という関連性を持っています。そのため、mrak 要素でハイライトするにふさわしいのです。

mark 要素の概要

Category 「カテゴリー」
Flow content 「フロー・コンテンツ」
Phrasing content 「フレージング・コンテンツ」
Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」
Content model 「コンテンツ･モデル」
Phrasing content 「フレージング・コンテンツ」
利用可能な場所
フレージング・コンテンツが置ける場所
タグの省略
不可。開始タグと終了タグの両方が必要。
要素固有のコンテンツ属性
この要素にはグローバル属性以外の属性はありません。
標準的なスタイル
mark {
  background: yellow;
  color: black;
}
DOM インターフェイス
HTMLElement

　mark 要素を（ソースコードなどの）構文の強調には使用しないで下さい。span 要素とそれに適用する適切な CSS を使用してください。