mark 要素

4.6.19 mark 要素

カテゴリー
フロー・コンテンツ
フレージング・コンテンツ
この要素を使うことができるコンテキスト:
フレージング・コンテンツが期待される場所
コンテンツ・モデル:
フレージング・コンテンツ
コンテンツ属性:
グローバル属性
DOMインタフェース:
HTMLElement を使う。

mark 要素は、他のコンテキストとの関連性に起因して、参照を目的にマークまたはハイライトされる、あるドキュメントの中の一連のテキストを表します。この要素が、引用で使われるときや、散文から参照されたテキストのブロックで使われるとき、それはハイライトを意味します。この要素は、もともとは存在していないもので、読者の注意を引くために追加されるものです。もともとの著作者がそのブロックを書いたときには、そのテキスト部分は重要と見なされていなかったのでしょう。しかし、今は、mark 要素が加えられたことで、著者の意に関係なく注目の的とされているのです。この要素がドキュメントの主たる散文で使われたとき、それは、ユーザーの現在の行動との関連に起因して注目されそうなドキュメントの一部を指し示します。

この例は、引用の特定の部分に注意を引くために、どのようにして mark 要素を使うのかを示しています:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

(If the goal was to mark the element as misspelt, however, the u element, possibly with a class, would be more appropriate.

mark 要素のもう一つの例として、ドキュメントの中の検索文字列に一致する部分をハイライトするというのもあります。誰かがドキュメントを見ていたとして、ユーザーが "kitten" という単語を検索していたことをサーバーが分かっていたなら、そのサーバーは、次のように、ある段落を修正してそのドキュメントを返すことができたでしょう:

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

次の抜粋では、テキストの段落がコード・フラグメントの特定の箇所を参照しています。

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

これはシンタックス・ハイライトとは切り離されています。シンタックス・ハイライトには span のほうが適切です。両方を組み合わせると良いでしょう:

<p>The highlighted part below is where the error lies:</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>

これは、もともと強調されていなかった引用テキストの一部をハイライトするために mark 要素を使っているのを示すもう一つの例です。この例は、ウェブ制作者が、一般的な印刷慣例に従って、引用内の mark 要素にスタイルを適用して明示的にイタリックで表示するようにしたものです。

<article>
 <style scoped>
  blockquote mark, q mark {
    font: inherit; font-style: italic;
    text-decoration: none;
    background: transparent; color: inherit;
  }
  .bubble em {
    font: inherit; font-size: larger;
    text-decoration: underline;
  }
 </style>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

ちなみに、この例で、em 要素と mark 要素の違いに注目してください。em 要素は、もともとの引用テキストの一部です。それに対して、mark 要素は、後のコメントのために引用テキストの一部をハイライトしています。

次の例は、テキストの範囲の関係性(mark 要素)を意味することと、それとは対照的に、テキストの範囲の重要性(strong 要素)を意味することの違いを示しています。これは教科書の抜粋なのですが、試験に関する部分がハイライトされています。安全警告は、重要なのかもしれませんが、明らかに試験とは関係ありません。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-mark-element