【HTML Living Standard】mark要素の使い方

mark要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月26日

基本的な使い方

markオブジェクトは、HTMLドキュメント内で特定のテキストにハイライトを適用するための要素を表すオブジェクトです。この要素を使用することで、関連性や重要性を持つテキストの一部を、ユーザーの注意を引く目的で視覚的に強調できます。例えば、検索結果のページでユーザーが入力したキーワードを強調表示したり、現在の文脈で特に注目すべき箇所を指し示したりする際に役立ちます。

mark要素で囲まれたテキストは、ブラウザによって通常、背景色が変更されて表示されます。しかし、この要素はテキストが「非常に重要である」ことを意味する要素や、「強調されている」ことを意味する要素とは異なり、文書の主要な意味や重要性そのものを変更するものではありません。あくまで、ユーザーが文書を閲覧する際の注目点を、現在の文脈に沿って提示するためのものです。

したがって、マークされたテキストは、その文書が持つ本来の意味から見て特に重要であるわけではなく、単にユーザーの注意を引くためのハイライトとして機能します。CSSを用いて見た目を自由にカスタマイズすることも可能です。この要素は、読者に情報を効果的に伝えるための補助的な手段として利用されます。

公式リファレンス: : The Mark Text element

構文(syntax)


1<mark>強調したいテキスト</mark>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

mark要素でキーワードを強調表示する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>mark要素のサンプルコード</title>
7</head>
8<body>
9    <h1>文書内の特定キーワードの強調表示</h1>
10    <p>
11        このページでは、文書コンテンツを視覚的に強化するHTMLの<code>mark</code>要素の利用方法を紹介します。<br>
12        例えば、<mark>Markdown</mark>形式で作成されたドキュメントを<mark>HTML</mark>に<mark>変換</mark>した後、
13        特定の検索キーワードや注目すべき語句をユーザーにわかりやすく提示するために<code>mark</code>要素を使用できます。
14    </p>
15    <p>
16        上記の例では、「Markdown」「HTML」「変換」といった語句が<code>mark</code>要素によってハイライトされ、
17        あたかも検索結果ページでキーワードが強調されているかのように表示されます。
18        これにより、読者は文書内で重要な情報や関連性の高い部分を素早く識別できます。
19    </p>
20</body>
21</html>

HTMLのmark要素は、文書内で特定のテキストを強調表示するために使用されるセマンティックな要素です。この要素は、引数や戻り値を持ちません。主に、検索結果のキーワードや、ユーザーの注意を引くべき重要な部分をハイライトする目的で利用され、該当するテキストの背景色を変更するなどして視覚的に目立たせる効果があります。

提供されたサンプルコードでは、Webページ内で「Markdown」や「HTML」、「変換」といったキーワードがmark要素で囲まれています。これにより、これらの単語がブラウザによってデフォルトで黄色い背景色で表示されるなど、視覚的に目立つように表現されます。例えば、Markdown形式で作成されたドキュメントをHTMLに変換した後に、特定の検索キーワードや注目すべき語句をユーザーに分かりやすく提示したい場合に、このmark要素を適用することが有効です。

mark要素を使用することで、読者は文書の本文の中から重要な情報や、関連性の高いキーワードを素早く識別できるようになります。これは、Webサイトのユーザビリティ向上に貢献し、情報伝達を効率的に行う上で重要な役割を果たします。システムエンジニアを目指す上で、このような文書構造と視覚的な表現を適切に使い分ける知識は、ユーザーにとって分かりやすいシステムを構築するために役立ちます。

mark要素は、文書内で関連性が高い、あるいは注目すべきテキストを視覚的に強調するために使用します。これは単なる視覚的な強調だけでなく、特定の文脈においてユーザーの注意を引くべきテキストであることを示します。コンテンツの重要性や強調を示すstrongやem要素とは意味が異なりますので、使い分けに注意してください。デフォルトの表示スタイル（通常は背景色の変更）はCSSで自由にカスタマイズ可能です。ただし、色のみによる強調は、色覚特性を持つユーザーには伝わりにくい場合があります。そのため、重要な情報は色だけでなく文脈でも理解できるように配慮することが重要です。これにより、ユーザーは文書内の関連情報を素早く識別できます。

HTML mark要素でテキストをハイライトする


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>mark要素の使用例</title>
7</head>
8<body>
9    <h1>HTML mark要素の基本</h1>
10    <p>
11        この段落では、特定の<mark>重要なキーワード</mark>をハイライト表示しています。
12        mark要素は、文書の他の部分との関連性に基づいて、テキストの一部を強調するために使用されます。
13    </p>
14    <p>
15        例えば、検索結果でユーザーが検索したキーワードを<mark>目立たせる</mark>場合や、
16        文書内で特定のフレーズを一時的に<mark>注意喚起</mark>したい場合などに適しています。
17    </p>
18    <!--
19        mark要素は、関連性があるが必ずしも強調されているわけではないテキストの断片を示します。
20        通常、ブラウザは背景色を変更してハイライト表示します。
21    -->
22</body>
23</html>

HTMLのmark要素は、文書内で特定のテキストをハイライト表示し、視覚的に強調するために使用される要素です。この要素を使うことで、文書の他の部分との関連性に基づいて、読者の注意を引きたい重要なキーワードやフレーズを目立たせることができます。

例えば、ウェブサイトの検索結果ページで、ユーザーが検索した語句をページ内の本文中でハイライト表示する場合や、長い文章の中から一時的に注目してほしい箇所を提示する場合などに適しています。ブラウザは通常、mark要素で囲まれたテキストの背景色を変更することで、ハイライト表示を行います。

mark要素には、設定する引数（属性）は特にありません。また、特定の処理の結果を返す戻り値も存在しません。単純に開始タグと終了タグで囲まれたテキストが、視覚的に強調される対象となります。

サンプルコードでは、「重要なキーワード」や「目立たせる」「注意喚起」といった部分がタグで囲まれており、これらの語句が通常のテキストとは異なる背景色で表示され、強調されることを示しています。このようにmark要素は、情報の伝達をより効果的にするための、シンプルながらも役立つ機能を提供します。

mark要素は、文書の他の部分との関連性に基づいてテキストの一部をハイライト表示する目的で使用します。これは、検索結果のキーワードを強調したり、文書内で一時的に注目させたい箇所を示したりする際に適しています。

注意点として、単に文字を太字にしたり斜めにしたりするや要素とは異なり、markは「意味的な重要性」ではなく「文脈における関連性」を示す点が挙げられます。そのため、本当に重要な情報にはなどを適切に使い分けましょう。

また、ブラウザは通常、背景色を変更してハイライト表示しますが、この見た目はCSSで自由に調整可能です。過剰な使用は読者の混乱を招く可能性があるため、本当に注目させたい箇所に限定して活用することが重要です。アクセシビリティに配慮し、色だけに頼らず情報が伝わるよう心がけてください。