＜mark要素＞ - ハイライト

公開日: 2017/02/09

mark要素は、テキストのある部分を、別の場所で参照、言及するためにハイライトする要素です。ただ目立たせるための目的で利用するべきではありません。この要素は重要や強調といった意味を持ちません。そういった意味付けを行なうには、em要素やstrong要素を使って下さい。

概要

名前

mark

カテゴリー

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

mark {
	background-color: yellow;
	color: black;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-mark-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

言及するためのハイライト

mark要素は、別の場所で言及するために、ユーザーを注目させておきたい部分をハイライトする要素です。例えば次のように、先にプログラムのサンプルコードを見せてから、その中の一部分について説明する時に適しています。別の場所で言及するわけではなく、ただ目立たせたいためだけにこの要素を用いるのは間違いです。

HTML

<p>まずは次のコードを見て下さい。</p>

<pre><code>
$arr = [ "あ", "い" ] ;

<mark>foreach</mark> ( $arr as $str ) {
	echo $str ;
}
</code></pre>

<p>さて、コードを見ていただいたことを踏まえて、<code>foreach(){}</code>とはどんな役割を持っているかについて説明をしていきます。そもそも…</p>

デモを開く

引用

引用コンテンツも、mark要素でハイライトできます。mark要素を用いることで、ユーザーエージェントは「このハイライトは引用した側が行なったこと」だと理解してくれます。

HTML

<p>今日はクラークの次の言葉を取り上げたい。</p>

<blockquote>
	<p><mark>少年</mark>よ、大志を抱け</p>
</blockquote>

<p>ここでいう少年とは、私の解釈ではすなわち…</p>

例えば、これがmark要素ではなく、重要という意味を持つstrong要素だったら、引用した側が他人のコンテンツに勝手に意味付けをすることになり、問題です。引用された側からしたら、「私はこんなところが重要であるとは主張していない、こんな誤った解釈をされるような引用のされ方はしたくない」という気持ちでしょう。引用コンテンツを適切にハイライトするには、mark要素を使いましょう。

HTML

<p>今日はクラークの次の言葉を取り上げたい。</p>

<blockquote>
	<p><strong>少年</strong>よ、大志を抱け</p>
</blockquote>

<p>ここでいう少年とは、私の解釈ではすなわち…</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜mark要素＞ - ハイライト</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/mark/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>mark要素は、別の場所で言及するために、ユーザーに注目させておきたい部分をマークアップするものです。</p>

<p>次のコードを見て下さい。</p>

<pre><code>
$arr = [ "あ", "い" ] ;

<mark>foreach</mark> ( $arr as $str ) {
	echo $str ;
}
</code></pre>

<p>さて、コードを見ていただいたことを踏まえて、<code>foreach(){}</code>とはどんな役割を持っているかについて説明をしていきます。そもそも…</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/621/"> <meta charset="utf-8"> <title>【デモ】＜mark要素＞ - ハイライト</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/mark/"> </head> <body>

<p>mark要素は、別の場所で言及するために、ユーザーに注目させておきたい部分をマークアップするものです。</p> <p>次のコードを見て下さい。</p> <pre><code> $arr = [ "あ", "い" ] ; <mark>foreach</mark> ( $arr as $str ) { echo $str ; } </code></pre> <p>さて、コードを見ていただいたことを踏まえて、<code>foreach(){}</code>とはどんな役割を持っているかについて説明をしていきます。そもそも…</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>