トップページ  > HTML Living Standard  > <mark>

★HTML Living Standard リファレンス

<mark> …… 参照目的で強調表示されたテキストを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

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

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

一般的なブラウザでは、 読者の注意を引くためにマーカーでハイライトされたテキストとして強調表示されるかもしれません。

■使用例

以下のサンプルは、読者の注意を向けるために引用の特定箇所にmark要素を使用しています。 (ただし、スペルミスをマークアップすることが目的の場合には、u要素の方が適切です。)

HTMLソース

<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>
↓↓↓

ブラウザ上の表示

次の引用を、見てみましょう。

Look around and you will find, no-one's really colour blind.

単語のつづりからわかるように、 この引用を書いている人物は明らかにアメリカ人ではありません。

■使用例

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

HTMLソース

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

ブラウザ上の表示

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

■使用例

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

HTMLソース

<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要素で強調表示することは別の問題です。

HTMLソース

<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要素には指定されていません。

HTMLソース

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

ブラウザ上の表示

ワームホールの物理学

ワームホールは、最大39分開いたままにできます。 開いた時間を増やすには、 ワームホールに接続する強力なエネルギー源と、 ブラックホールのような大きな重力が必要です。

電磁放射はワームホールを移動できますが、物質は移動できません。

ワームホールが作成されると、渦が形成されます。 警告: ワームホールを開く際にできる渦は、その経路にあるものを全滅させます。 ダイヤルをうまく合わせると、渦を避けられます。

ゲートに障害物があると、ワームホールに接続できません。

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ