: テキストマーク要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

 は HTML の要素で、周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します。

試してみましょう

<p>Search results for "salamander":</p>

<hr />

<p>
  Several species of <mark>salamander</mark> inhabit the temperate rainforest of
  the Pacific Northwest.
</p>

<p>
  Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
  other small creatures.
</p>

/* stylelint-disable-next-line block-no-empty */
mark {
}

属性

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

使用上のメモ

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

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

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

例

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

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

html

<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>

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

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

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

html

<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 プロパティを使うことでアナウンスさせることができます。

css

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: " [強調終了] ";
}

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

技術的概要

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

仕様書

Specification
HTML # the-mark-element

<mark>: テキストマーク要素