<mark></mark>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

mark要素は、ハイライトされたテキストを表します。


<mark>ハイライトされたテキストを表します</mark>

mark要素は、特定のテキストを目立たせたい場合に使用します。例えば、次のような箇所で使用することができます。

  • 検索ワードに一致する文字列
  • 話題の対象となっているテキスト
  • この要素は、重要性や強調を表すものではありません。ユーザーが参照しやすいように、この部分ですよ！とアピールすることが目的となります。

次の例では、検索ワードに一致する文字列をハイライトで表示しています。

<h2><b>html</b>の検索結果</h2>

<p>ホームページの作成に役立つ<mark>HTML</mark>とCSSのリファレンス。TAG indexの<mark>HTML</mark>リファレンスは ...</p>

次の例では、話題（異論）の対象となっている箇所をハイライトで表示しています。

<p><cite>TAG index</cite>では次のように説明されていたが、</p>

<blockquote>
<p>Pタグは<mark>改行するためのタグです</mark>。使う機会が多いので覚えておいた方がいいですよ！</p>
</blockquote>

<p>※ハイライトは引用者によるものです。</p>

<p>p要素は<em>段落を表す</em>要素なので、この説明は明らかに間違っている。</p>

次の例も、話題（説明）の対象となっている箇所をハイライトで表示しています。

  • これは、シンタックスハイライト（ソースコードの色分け）とは異なります。（シンタックスハイライトにはspan要素が適しています）
<p><dfn>mark要素</dfn>は、ハイライトされたテキストを表します。例えば次のように使用します。</p>

<pre>
<code><mark>&lt;mark&gt;</mark>ハイライトで表示<mark>&lt;/mark&gt;</mark></code>
</pre>

要素のデフォルトスタイル

対応しているブラウザでは、この要素内のテキストに背景色（#ffff00）が表示されます。

ハイライトで表示します
  • 上記の表示例は、CSSの設定で疑似的に表現しています。（このページのスタイルと競合してしまうため）
旧HTMLからの変更点
  • HTML5：mark要素が定義されました。

使用例


<p><cite>TAG index</cite>では次のように説明されていたが、</p>

<blockquote>
<p>Pタグは<mark>改行するためのタグです</mark>。使う機会が多いので覚えておいた方がいいですよ！</p>
</blockquote>

<p>※ハイライトは引用者によるものです。</p>

<p>p要素は<em>段落を表す</em>要素なので、この説明は明らかに間違っている。</p>
表示例

TAG indexでは次のように説明されていたが、

Pタグは改行するためのタグです。使う機会が多いので覚えておいた方がいいですよ！

※ハイライトは引用者によるものです。

p要素は段落を表す要素なので、この説明は明らかに間違っている。

  • 上記の表示例は、CSSの設定で疑似的に表現しています。（このページのスタイルと競合してしまうため）