<mark></mark>
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
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><mark></mark>ハイライトで表示<mark></mark></mark></code>
</pre>
要素のデフォルトスタイル
対応しているブラウザでは、この要素内のテキストに背景色（#ffff00）が表示されます。
- 上記の表示例は、CSSの設定で疑似的に表現しています（このページのスタイルと競合してしまうため）。そのため、この要素に対応していないブラウザであっても背景色が表示されてしまいます。
使用例
<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の設定で疑似的に表現しています（このページのスタイルと競合してしまうため）。そのため、この要素に対応していないブラウザであっても、mark要素の部分に背景色が表示されてしまいます。