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

試してみましょう

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

属性

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

使用上のメモ

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

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

アクセシビリティの考慮

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

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

• Tweaking Text Level Styles, Reprised Adrian Roselli 著（2025）
• Short note on making your mark (more accessible) Vispero 著（2017）

例

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

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

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

結果

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

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

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

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

結果

技術的概要

仕様書

ブラウザーの互換性