【HTML】mark要素の使い方【テキストのハイライト表示ができます】

mark要素を使えば、テキストのハイライト表示ができます。

1 mark要素の基本的な使い方
2 英語（英文）ではどうなる？
3 mark要素は、数字に対してマークアップが可能なのか？
4 mark要素は、カタカナに対してもマークアップできる？
5 各種ブラウザでの表示結果

mark要素の基本的な使い方

はじめに、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark要素</title>
</head>
<body>
    <p>日本の近代化革命の礎となった<mark>明治維新</mark>は歴史上の重要な転換点の一つです。</p>
</body>
</html>

body要素の中に、「文のかたまり（段落）」を示すp要素があります。

p要素の中には、「日本の近代化革命の礎となった明治維新は歴史上の重要な転換点の一つです。」と書かれた文章があります。

そして、重要な用語である「明治維新」のテキストは、mark要素でマークアップされています。

このため、ブラウザでの表示結果の通り、「明治維新」は、ハイライト表示されています。

英語（英文）ではどうなる？

では、英語（英文）について、mark要素でマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark要素</title>
</head>
<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>
</html>

先ほどのプログラムに、更にもう一行、英文を追加しました。

追加した英文では、「The Meiji Restoration」について、mark要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、「The Meiji Restoration」がハイライト表示されています。

mark要素は、数字に対してマークアップが可能なのか？

さらに、数字について、mark要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark要素</title>
</head>
<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>
</html>

新たな文章では、「富岳三十六景」、「富岳３６景」、「富岳36景」について、mark要素でマークアップしてあります。

そして、ブラウザでの表示結果の通り、全角数字（漢数字及び算用数字）、半角数字共に、ハイライト表示することができました。

mark要素は、カタカナに対してもマークアップできる？

カタカナについても、mark要素でマークアップを行いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark要素</title>
</head>
<body>
    <p>葛飾北斎の代表作である「<mark>富岳３６景</mark>」は、<mark>ヨーロッパ</mark>のジャポニズムの潮流を生み出した。</p>
    <p>葛飾北斎の代表作である「<mark>富岳36景</mark>」は、<mark>ﾖｰﾛｯﾊﾟ</mark>のジャポニズムの潮流を生み出した。</p>
</body>
</html>