マーク要素（mark）の仕様と使い方

カテゴリ：HTML5編

mark要素の概要

mark要素は引用文や別の文脈中の特定の文や文字を目立たせたい（ハイライトしたい）場合に使用します。
あくまでも表示上目立たせるだけであり、strongのように文章上の重要な部分を示したり、em要素のように強調の意味は持っていません。

例えば文章を引用した際にただ引用するだけでは読者に引用の意図が伝わらない可能性があります。
そういった時にその引用文の特に注目して欲しい箇所にハイライトを入れ、ポイントとなる部分を明示することで読者の引用文への理解を助けられます。

一般的な構成例

以下の例のように、必ずしも引用元の文の著者が意図した箇所でなくても、引用者が注目させたいと思う箇所に使用します。

引用文での使用例

<blockquote>
試験当日に持参するものは<mark>受験票、筆記用具（鉛筆もしくはシャープペンシル）、消しゴム、定規</mark>のみです。それ以外の持参物はバッグにしまっておいてください。
</blockquote>

文脈での使用例

<p>明日の遠足は<mark>雨天</mark>でも決行します。</p>

mark要素の利点

HTML5より前は、文章中の特定の箇所を目立たせる際にem要素やb要素を使っていましたが、em要素はアクセントとしての強調を示し、目立たせるとは少し用途が異なります。
一方、b要素は通常太字で装飾されますが、目立たせる意外にもさまざまな箇所で使用される要素であるため、特定の任意の装飾（黄色で下線を引くなど）を指定することはデザイン上困難です。
そこでハイライト用の要素が作られました。

もっとも従来のように文章上重要な箇所にはstrong要素を使用するという点に変わりはありません。
mark要素はstrong要素に取って代わるものではなく、あえていえばこれまでb要素で目立たせていた箇所にmark要素を使用できるようになったということです。
つまり重要な箇所はstrong要素、アクセントを強調したい箇所にはem要素、目立たせたい箇所にはmark要素、単に単語や固有名詞を太字にして可読性を向上させたい場合にはb要素といった使い分けになるかと思います。

関連記事：主なインライン要素（span、strong、em、b）の仕様と使い方

W3Cによるmark要素の説明

mark要素は、他の文脈との関連性から、参照目的でマークまたはハイライトされている1つの文書内の一連のテキストを表します。引用または散文から参照される他のテキストブロックで使われるとき、ブロックが書かれた当初には存在せず、元の作者にとっては重要であると思われなかったかもしれない、現在、以前は予想外の詳細調査中であるテキストの一部に読者の注意をひかせるために、加えられたハイライトを示します。文書の主な散文で使用されるとき、それはユーザーの現在の活動との関連性が高いためにハイライトされた文書の一部を示します。

公開日時：2019年06月10日 18:18:57