mark要素を使えば、テキストのハイライト表示ができます。
mark要素の使い方
以下のプログラムと、ブラウザの表示結果を見てください。
<body>
<p>日本の近代化革命の礎となった<mark>明治維新</mark>は歴史上の重要な転換点の一つです。</p>
</body>
body要素の中に、「文のかたまり（段落）」を示すp要素があります。
p要素の中には、「日本の近代化革命の礎となった明治維新は歴史上の重要な転換点の一つです。」と書かれた文章があります。
そして、重要な用語である「明治維新」のテキストは、mark要素でマークアップされています。
このため、ブラウザの表示結果の通り、「明治維新」はハイライト表示されています。
英語（英文）ではどうなる？
では、英語（英文）について、mark要素でマークアップしてみましょう。
<body>
<p>日本の近代化革命の礎となった<mark>明治維新</mark>は歴史上の重要な転換点の一つです。</p>
<p><mark>The Meiji Restoration</mark>, the cornerstone of Japan's modernization revolution, is one of the most important turning points in history.</p>
</body>
先ほどのプログラムに、更にもう一行、英文を追加しました。
追加した英文では、「The Meiji Restoration」について、mark要素でマークアップしてあります。
そして、ブラウザでの表示結果の通り、「The Meiji Restoration」がハイライト表示されています。
mark要素は数字に対してマークアップが可能か？
さらに、数字について、mark要素でマークアップを行いました。
<body>
<p>日本の近代化革命の礎となった<mark>明治維新</mark>は歴史上の重要な転換点の一つです。</p>
<p><mark>The Meiji Restoration</mark>, the cornerstone of Japan's modernization revolution, is one of the most important turning points in history.</p>
<p>葛飾北斎の代表作である「<mark>富岳三十六景</mark>」は、ヨーロッパのジャポニズムの潮流を生み出した。</p>
<p>葛飾北斎の代表作である「<mark>富岳３６景</mark>」は、ヨーロッパのジャポニズムの潮流を生み出した。</p>
<p>葛飾北斎の代表作である「<mark>富岳36景</mark>」は、ヨーロッパのジャポニズムの潮流を生み出した。</p>
</body>
新たな文章では、「富岳三十六景」、「富岳３６景」、「富岳36景」について、mark要素でマークアップしてあります。
そして、ブラウザの表示結果の通り、全角数字（漢数字及び算用数字）、半角数字について、ハイライト表示することができました。
mark要素はカタカナに対してもマークアップできる？
カタカナについても、mark要素でマークアップを行いました。
<body>
<p>葛飾北斎の代表作である「<mark>富岳３６景</mark>」は、<mark>ヨーロッパ</mark>のジャポニズムの潮流を生み出した。</p>
<p>葛飾北斎の代表作である「<mark>富岳36景</mark>」は、<mark>ﾖｰﾛｯﾊﾟ</mark>のジャポニズムの潮流を生み出した。</p>
</body>
先ほどの文章を使って、「ヨーロッパ」と「ﾖｰﾛｯﾊﾟ」について、mark要素でマークアップしてあります。
そして、ブラウザの表示結果の通り、全角カタカナ、半角カタカナについて、ハイライト表示することができました。
【カテゴリー】パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツ
mark要素が属するカテゴリーは、パルパブル・コンテンツ、フロー・コンテンツ、フレージング・コンテンツになります。
パルパブル・コンテンツに属する要素は、その要素の中にhidden属性が指定されていない要素を１つ以上含める必要があります。
また、フロー・コンテンツに属する要素は、body要素の中に記述される必要があります。フレージング・コンテンツに属する要素は、テキストをマークアップするために記述される必要があります。
つまり、mark要素は、以下のプログラムに示す通り、body要素の中においてテキストをマークアップするために記述され、mark要素の中にhidden属性が指定されていない要素を１つ以上含めるように記述する必要があります。
<body>
<p>特許権の存続期間は、<mark>出願日から２０年経過した時点で終了</mark>します。</p>
</body>
mark要素は、上のプログラムに示す通りbody要素の中で、マークアップしたテキストを「ハイライト表示させた状態」とするために用いることが求められます。
また、プログラムに示す通り、mark要素にhidden属性を指定することなく、mark要素の内容「出願日から２０年経過した時点で終了」をブラウザに表示された状態とする必要があります。
【コンテンツ・モデル】フレージング・コンテンツ
mark要素のコンテンツ・モデルは、フレージング・コンテンツです。
フレージング・コンテンツに属する要素は、文章内のテキストをマークアップするための要素です。そして、ブラウザに表示される「テキスト」も、フレージング・コンテンツに属する要素と同じように扱うことができます。
つまり、コンテンツ・モデルをフレージング・コンテンツとする要素（例えばmark要素）は、その要素の中にフレージング・コンテンツに属する要素またはテキストを含めるように記述する必要があります。
つまり、mark要素は、以下のプログラムに示す通り、mark要素の中にフレージング・コンテンツに属する要素（例えばstrong要素）を含めるように記述する必要があります。
<body>
<p>特許権の存続期間は、<mark>出願日から<strong>２０年</strong>経過した時点で終了</mark>します。</p>
</body>
上に示したプログラムでは、p要素でマークアップされた文章の中で、「出願日から２０年経過した時点で終了」のフレーズがmark要素でマークアップされています。そして、mark要素でマークアップされたフレーズ「出願日から２０年経過した時点で終了」のうち、「２０年」のフレーズがstrong要素でマークアップされています。
このため、ブラウザの表示結果の通り、「出願日から２０年経過した時点で終了」のフレーズにハイライトが付与された状態として表示され、さらに「２０年」の文言に重要性を付与した状態で表示することができています。
各種ブラウザでの表示結果
mark要素について、主要なブラウザにおけるサポート状況は、以下の通りです。
| Google Chrome | Microsoft Edge | Safari | Firefox | Opera | |
| 【mark要素】 | ○ | ○ | ○ | ○ | ○ |
以上、mark要素の使い方について、ご参考になさってください。