: 文字列マーク要素

HTML の文字列マーク要素 () は、周囲の文脈の中でマークを付けた部分の関連性や重要性のために、参照や記述の目的で目立たせたり強調したりする文字列を表します。

試してみましょう

コンテンツカテゴリ	フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容	記述コンテンツ
タグの省略	不可。開始と終了タグの両方が必要。
許可されている親要素	記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLElement`

属性

この要素にはグローバル属性以外の属性はありません。

使用上のメモ

 のよくある利用方法は以下のようなものです。

引用 (<q>) またはブロック引用 (<blockquote>) の中で使用される場合は、ふつう原文で特にマークされていなくても特別な関心事となる文字列、または原文の筆者が特に重要だと考えていなかったことでも、特別に精査が必要な部分を示します。本の中で興味のある部分が見つかったときに、蛍光ペンを使ってマークするようなものだと考えてください。
それ以外に、  はユーザーの現在の行動に関する文書中の部分を示します。これは例えば、検索操作で検索された語を示す場合などに使用されます。
 を (ソースコードなどの) 構文の強調には使用しないで下さい。 要素とそれに適用する適切な CSS を使用してください。

メモ:  要素と  要素を混同しないよう注意してください。  は関連性のあるコンテンツを表すために使用されますが、  は重要性のある文字列の区間を表します。

例

関心のある文字列のマーク

最初の例では  要素を使用して、引用の中でユーザーに特定の関心を引く部分の文字列をマークしています。

<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a
  hidden base, have won their first victory against the evil
  Galactic Empire. During the battle, <mark>Rebel spies managed
  to steal secret plans</mark> to the Empire’s ultimate weapon,
  the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>

出力結果は以下のようになります。

文脈に依存する部分の識別

この例では  を使用して一節の中の検索結果をマークしています。

<p>It is a dark time for the Rebellion. Although the Death
Star has been destroyed, <mark class="match">Imperial</mark>
troops have driven the Rebel forces from their hidden base and
pursued them across the galaxy.</p>

<p>Evading the dreaded <mark class="match">Imperial</mark>
Starfleet, a group of freedom fighters led by Luke Skywalker
has established a new secret base on the remote ice world of
Hoth.</p>

検索結果に対する  の使用を他の使い方と区別しやすくするように、この例ではそれぞれの一致部分に "match" カスタムクラスを適用しています。

結果は以下のようになります。

アクセシビリティの考慮

mark 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の ::before 及び ::after 擬似要素と共に content プロパティを使うことでアナウンスさせることができます。

mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [強調開始] ";
}

mark::after {
  content: " [強調終了] ";
}

読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが強調されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

仕様書

Specification
HTML Standard # the-mark-element

ブラウザーの互換性

BCD tables only load in the browser

<mark>: 文字列マーク要素