HTML Living Standard/mark

mark 要素

<mark> 要素は、文書やセクション内で特に重要な部分や現在の文脈で注目すべきテキストをハイライトするために使用されます。この要素は、ユーザーがコンテンツを読みやすくし、強調された情報に注意を向けるのを助けます。

概要

• 役割: 文書内で強調すべき内容をハイライト表示する。
• 文脈:
  • 検索結果における一致箇所の強調。
  • 文脈的に重要な情報の強調。

属性

グローバル属性

<mark> 要素は、すべてのグローバル属性をサポートします。

使用例

検索結果の強調

検索クエリに一致した部分をハイライトします。

<p>検索結果: <mark>HTML</mark> についての解説があります。</p>

この例では、「HTML」という単語が検索クエリに一致したため、<mark> 要素で強調されています。

文脈的に重要な情報の強調

現在の文脈で重要な情報を示します。

<p>締切日: <mark>2025年1月15日</mark> までに提出してください。</p>

この例では、締切日が強調されています。

CSSによるスタイリング

<mark> 要素は、デフォルトで背景色が黄色に設定されています。ただし、必要に応じてスタイルをカスタマイズできます。

<p>重要なポイント: <mark class="custom-highlight">セキュリティ対策</mark> を徹底してください。</p>

CSS

.custom-highlight {
  background-color: lightblue;
  color: navy;
  font-weight: bold;
}

使用上の注意

1. 文脈の適切性:

   <mark> 要素は、単に見た目を装飾するためではなく、文脈的に重要な情報を強調する目的で使用します。

2. 適度な使用:

   文書全体で多用しすぎると、かえって強調の意味が失われるため、重要な情報だけに使用します。

3. アクセシビリティ:

   視覚に依存しないユーザーのために、<mark> 要素を補足するテキストやスクリーンリーダーでの意味が伝わるよう工夫します。

非推奨な使用例

次の例では、単にデザイン目的で使用しており、セマンティクス的に適切ではありません。

<p><mark>装飾目的</mark>で使われています。</p>

このような使用法は避けるべきです。

ベストプラクティス

• 強調の必要性が明確な場合に使用します。
• 背景色や文字色を調整し、全体のデザインに調和させます。
• 他の強調方法（<b> や <strong> など）と適切に使い分けます。

使用例の応用

複数箇所の強調

<p>次のキーワードに一致しました: <mark>HTML</mark>, <mark>CSS</mark>, <mark>JavaScript</mark></p>

ダークモード対応のスタイリング

CSS

mark {
  background-color: #ffff99; /* ライトモード */
}

@media (prefers-color-scheme: dark) {
  mark {
    background-color: #3333ff; /* ダークモード */
    color: white;
  }
}

この方法で、ユーザーのテーマ設定に応じてハイライトの見た目を調整できます。

まとめ

<mark> 要素は、特定のテキストを文脈的に強調するための便利な要素です。適切に使用することで、ユーザーが重要な情報を素早く把握できるようになります。

関連仕様

• HTML Living Standard – mark
• MDN Web Docs – mark