マーク要素(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要素といった使い分けになるかと思います。

mark、strong、em、b要素の使い分け
要素名用途
strong要素文章中の重要な意味を持つ箇所を強調
em要素文脈上のアクセントの強調
mark要素引用文などの目立たせたい箇所をハイライト
b要素単語や固有名詞などの文字を強調(装飾のみ)

関連記事:主なインライン要素(span、strong、em、b)の仕様と使い方

W3Cによるmark要素の説明

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

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

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

HTML5編に戻る

「HTML5編」に関する他の手順
「HTML5編」に関するTips

「HTML5編」に関するTipsはありません。

このページのトップに戻る