<mark>タグの定義と使い方

<mark>タグは、
ドキュメント内で文脈上の関連性があり、参照または注目すべきテキストの範囲であることを示します。
この範囲は、他の文脈との関連性に応じて目立たせる目的でハイライト表示されます。

ほとんどのブラウザでは、<mark>タグのテキストに蛍光ペンでマークしたようなハイライトが表示されます。

基本の例

<mark>タグは、ドキュメント内で関連性のある特定の部分を参照目的で示したり、注目すべきテキストの範囲を示すために使用されます。

検索結果で検索語を表示

検索結果を表示する際に、ユーザーが入力した検索語を見つけやすくするために、視覚的に区別することが重要です。<mark>タグは、検索語と一致するテキストを参照していることを示します。

HTML 
<p>
    <kbd>コーディングエブリバディ</kbd>の検索結果です。
</p>
<ul>
    <li>
        <mark>コーディングエブリバディ</mark>は、すべての人のためのコーディング学習書です。
    </li>
    <li>
        ようこそ。<mark>コーディングエブリバディ</mark>です。
    </li>
</ul>
ブラウザーで実際に表示される様子

関心のある部分を表示

次は、引用文内の関連テキストのうち、関心のある部分を表示するために<mark>タグを使用した例です。

HTML 
<blockquote>
    <p>「学習は経験を通じて行われ、<mark>失敗</mark>は重要な教訓を提供します。」</p>
</blockquote>
ブラウザーで実際に表示される様子

使い方

<mark>タグは、ドキュメント内で関連性のある特定の部分を参照目的で示したり、関心のあるテキスト範囲を表示するために使用されます。
この範囲は、他の文脈との関連性によりハイライト表示されます。

引用文や本文内で参照された別のテキストブロック内で使用される場合、それはもともと存在していなかったが、読者の注意をその箇所に向けるために追加されたハイライトであることを示します。このテキストブロックが最初に作成された際、元の著者が重要でないと判断した部分が、現在では予期しない形で強調されている可能性があります。本文内で使用される場合、それはユーザーの現在の操作と関連性があるためにハイライトされた文書の一部を示しています。

一般的な使用

  • 引用（<q>、<blockquote>）内で使用される場合、一般的に元の資料の中で特に興味を引くテキストを示します。それは、元の著者が特に重要だとは考えていなかったものの、特別な注意を要する情報であることを意味します。これは、本の中で関心のある部分に蛍光ペンを使ってマークするのに似ていると考えてください。
  • それ以外の場合、<mark>タグは、ドキュメントの内容の中でユーザーの現在の操作と関連していると考えられる部分を示します。これは、たとえば検索操作と一致する語句を示すために使用されることがあります。
  • <mark>タグを文のスタイル調整を目的としたハイライトに使用しないでください。代わりに、適切なCSSを適用した<span>を使用してください。

出典：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark#usage_notes

<mark>タグと<strong>タグの違い

<mark>タグと<strong>タグを混同しないでください。
<mark>タグは、特定の部分の一定の関連性や関心のあるコンテンツを示すために使用されるのに対し、
<strong>タグは重要なテキスト領域を示します。

ブラウザ互換性

markタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<mark> 7 12 4 5.1

仕様書

markタグの仕様書
仕様書
<mark> HTML Standard
#the-mark-element

参考資料