mark 要素

4.5.20 mark 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
あらゆるロールの値
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
DOM インタフェース:
HTMLElement を使う。

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

この例は、引用の特定の部分に注意を引くために、どのようにして 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>

(しかし、この目的がスペルミスとして要素をマークアップすることだとしたら、u 要素のほうが適切でしょう。場合によっては class を加えるでしょう。)

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

<p>近頃、うちにやってくる <mark>子猫</mark> が何匹か
いる。みんなとてもかわいい。どうやらうちの庭が気に入ったようだ!一匹
<mark>子猫を</mark> を買ったほうがいいかな。</p>

次の抜粋では、テキストの段落がコード断片の特定の箇所を参照しています。

<p>下記のハイライト部分がエラーが発生した箇所です:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

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

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

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

<article>
 <style>
  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>彼女は分かっていた</h1>
 <p>パネル4のジョークに出てきたちょっとしたジョークに気づきましたか?</p>
 <blockquote>
  <p class="bubble">私は信じ<em>たいとは</em>思いませんでした。<mark>もちろん、
  ある程度は私もそれが既知の平文攻撃だったことに気づいていました。</mark>でも私は
  自分で見るまで認められませんでした。</p>
 </blockquote>
 <p>(強調は筆者による。) 私はそれはすごいと思いました。とても杓子定規ですが、
ちゃんとすべてを説明しています。</p>
</article>

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

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

<h3>ワームホール物理学入門</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/2014/REC-html5-20141028/text-level-semantics.html#the-mark-element