<mark> …… 参照目的で強調表示されたテキストを表す

<mark>タグは、参照目的で強調表示されたテキストを表す際に使用します。

mark要素は、別のコンテキストとの関連性を示したり、 別のコンテキストから参照するために強調表示されたテキストを表します。

一般的なブラウザでは、 読者の注意を引くために目立つ黄色などのマーカーでハイライトされたテキストとして表示されるようです。

■使用例

以下のサンプルは、読者の注意を引くことを目的にmark要素を使用しています。 （スペルミスをマークアップすることが目的の場合には、u要素の方が適切です。）

<p>次の引用を見てみましょう。</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p>単語のつづりをみれば、これを書いた人物はアメリカ人ではありません。</p>

■使用例

以下のサンプルは、ユーザーが「子猫」という文字列で検索した結果ページを想定しています。 検索文字列「子猫」に一致する部分をmark要素に指定して強調表示しています。

<p>
最近、私のところに<mark>子猫</mark>たちが遊びにきます。
彼らは本当にかわいいです。
</p>
<p>
彼らは私の庭が好きだと思います！
私は<mark>子猫</mark>を飼うことになりそうです。
</p>

■使用例

以下のサンプルでは、p要素で記述されている内容のコンテキストに関連する箇所として、 code要素内の特定箇所をmark要素に指定しています。

<p>ハイライト表示された部分にエラーがあります:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

var i: Integer;
begin
   i := 1.1;
end.

■使用例

以下のサンプルは、上記サンプルにspan要素を組み合わせたものです。 span要素をフックにしてスタイルを見やすくすることと、 mark要素で強調表示することは別の問題です。

<p>ハイライト表示された部分にエラーがあります:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
   <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

var i: Integer;
begin
   i := 1.1;
end.

■使用例

以下のサンプルは、教科書の試験に関連する部分をmark要素でマークアップしています。 また、重要性が高い部分をstrong要素でマークアップしています。

安全上の警告は重要なのでstrong要素に指定されていますが、 試験に関連しないためmark要素には指定されていません。

<h3>時空トンネルについて</h3>
<p>
 <mark>時空トンネルは、最大39分開いたままにできます。</mark> 
 開いた時間を増やすには、
 時空トンネルに接続する強力なエネルギー源と、
 ブラックホールのような大きな重力が必要です。
</p>
<p>
 <mark>電磁放射は時空トンネルを移動できますが、物質は移動できません。</mark>
</p>
<p>
 時空トンネルが作成されると、渦が形成されます。
 <strong>警告: 時空トンネルを開く際にできる渦は、その経路にあるものを全滅させます。</strong>
 ダイヤルをうまく合わせると、渦を避けられます。
</p>
<p>
 <mark>ゲートに障害物があると、時空トンネルに接続できません。</mark>
</p>

■関連項目

Sponsors