Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
7
12
4
5.1
18
5
1+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML
<p>Search results: This text contains the keyword "<mark>HTML</mark>".</p>

ライブデモ

テキストのハイライト

mark 要素でテキストをハイライト表示。検索結果のマッチ箇所に使用。

プレビュー全画面表示

カスタムスタイルのハイライト

CSS で mark 要素のスタイルをカスタマイズ。用途別の色分け。

プレビュー全画面表示

引用内のハイライト

blockquote 内で特に注目すべき部分を mark で強調。

プレビュー全画面表示

実務での使いどころ

  • <mark> の活用

    <mark> は HTML の要素で、周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。