mark 要素を使って注目を引く

HTML5 は、ユーザーに関連性を示すテキストをハイライトする方法として、mark を導入している。この新要素の利用をまとめたので読んでほしい。

いつものように、仕様のご神託を見ておこう：

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

いずれも、関連しているものにユーザーの関心を引くことを想定したものだ。mark は、適切なスタイリングをすれば、ユーザーにとって大きな助けになる。

例

検索結果

mark の使い方で最高の例は、ユーザーが検索した言葉をハイライトすることだ。多くの検索エンジンは、テキストをマークするために別の方法を使っているが、次の例は、この新要素がどこで必要とされるかを示している。

<h1>716,000,000 search results for the query "<mark>HTML 5</mark>"</h1>
<section id="search-results">
  <article>
    <h2><a href="http://en.wikipedia.org/wiki/HTML_5"><mark>HTML 5</mark> - Wikipedia, the free encyclopedia</a></h2>
    <p><mark>HTML 5</mark> is the next major revision of <mark>HTML</mark> ("hypertext markup language"), the core markup language of the World Wide Web. The WHATWG started work on the ... <a href="http://en.wikipedia.org/wiki/HTML_5">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://dev.w3.org/html5/spec/Overview.html"><mark>HTML 5</mark></a></h2>
    <p>A vocabulary and associated APIs for <mark>HTML</mark> and XHTML. Editor's Draft 16 August 2009. Latest Published Version: http://www.w3.org/TR/<mark>html5</mark>/; Latest Editor's ... <a href="http://dev.w3.org/html5/spec/Overview.html">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/"><mark>HTML 5</mark></a></h2>
    <p>Multiple-page version: http://whatwg.org/<mark>html5</mark>; One-page version: http://www.whatwg.org/specs/web-apps/current-work/; PDF print versions: ... <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">Read more</a></p>
  </article>
  <article>
    <h2><a href="http://html5gallery.com/"><mark>HTML5</mark> Gallery | A showcase of sites using <mark>HTML 5</mark> markup</a></h2>
    <p>A showcase of sites using <mark>html5</mark> markup, with twin primary aims to help web designers and developers of how to implement <mark>html5</mark> into their sites now, ... <a href="http://html5gallery.com/">Read more</a></p>
  </article>
</section>
<nav>
  <ol>
    <li>1</li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>...</li>
  </ol>
</nav>

実際の例を見る

あらゆる "HTML 5" のインスタンスは、そして、単に "HTML" ですら、ユーザーの検索に関連するものとしてマークされてている。これによって、ユーザーが自分の検索結果がどのように関係しているのかを見るのに役立ち、自分が求めていた最も良い結果を選ぶことができるのだ。PHP のような言語でこれを実装する場合は、str_replace() といった関数や正規表現を使って、出力結果の中から検索ワードを見つけ出し、それぞれのインスタンスを mark で囲むことができる。

引用

これまで言ってきたことの中で、将来的に誰かがその内容について調べに戻ってくることがあるだろう。そのテキストやスピーチの中には、もともとは、ほとんど重要なものはなかったかもしれない。そのため、とくに強調のようなものは与えられていなかった。しかし、今、別の人たちによって特定の興味を引いたとしよう。mark はそのようなテキストをハイライトするために、引用で使うことができる。

<p>マイクはこんなことを言ったことがある：</p>
<blockquote><p>Google は続かないだろう。検索と広告で、<mark>彼らは失敗するだろう</mark>。Yahoo を倒すものは何もないからだ。</p></blockquote>
<p>もちろん、今は、私たちは、彼が間違っていたと分かっている。Google は失敗しなかった。彼らは検索とオンライン広告では秀でており、非常に高収益な会社になった。</p>

ここで、私は自分自身を引用した。私が当初に言及しことに間違いがあり、それをハイライトしたのだ。すぐに、その次の段落に、この間違いを訂正したのだ。

strong と em の違い

以前は、強調や重要性を加えるために、それぞれ、em および strong を使うことができた。mark はこれら 2 つとは違う。これは、純粋に、ユーザーに関係したり、ページのコンテンツに関係するテキスト部分をハイライトするために使うものだ。あなたは、過去に、この目的のために em や strong を使ってきたかもしれない。そのときは、それ以上に適した要素が無かったため、確かに妥当なものだった。しかし、mark を導入するということは、簡単に言えば、それらの利用がもっと厳格になることを意味する。

あなたが重要性を表す必要があるのなら、strong を使おう。エラーや警告メッセージなどだ。em 要素は、テキストに強調を加えるために使うべきだ。強調によって文の意味が変わってしまうような単語に使うのだ。

最後に

HTML に mark が加わったのは喜ばしいことだ。あまりにも不十分な strong と em の定義の拡大解釈を防ぐことにもなる。最近、mark の実践的な利用が至るところで見られるようになった。特に、検索や、チュートリアルのような教育関連記事だ。マーカーペンを片付けて、関連テキストのハイライトに mark を使ってみよう（スクリーンんほうがいい！）。

免責事項: 私はまったく Google に反対しているわけではない。これは、単なる検索における mark の架空の利用例だ。Google 万歳？