HTML 5での<mark>要素のサンプル。

HTML 5で新たに導入される予定の<mark>要素の実際の使い方について、サンプルを挙げて解説します。

例 1：引用で引用者が言及したい箇所をマークアップする例。(平成22年 2月 7日 更新)

引用に際し、特に言及したい箇所を強調する事は良くある事だと思います。

しかし、引用元が既に強調などをしていた場合、強調は誰がしたのか分からなくなる場合があるでしょう。

HTML 5では、このような後刻言及する事を前提にしている場合など、目立たせるテキストに対しては<em>要素ではなく<mark>要素としてマークアップする事としております。

以下に例を挙げましょう。

HTML 5は、"とほほHTML 2.0"だった!?

とほほのWWW入門の制作者として知られるとほほ氏は、CSSに反対する立場から、以下のような文章を書いております。

もし、FLEX-HTML1.0が存在したら・・・

もし、誰かが W4C という団体を設立し、FLEX-HTML1.0 (Flexible, Loose, Easy to learn and eXtensible HTML）という仕様を勧告したとします。

FLEX-HTMLでは、過去の歴史的なタグをすべてサポートします。<UL>〜</UL> を <FONT>〜</FONT> で囲んではならないなどの、難しい規則をできるだけ排除します。SGMLアプリケーションであることも放棄します。タグの拡張性ももたせます。ユーザーエージェントは自分の解釈できるタグや属性のみを解釈します。最低限解釈できなくてはならないタグなどを３段階程度のレベルに分けます。

WHATWGは明らかに彼の言うW4Cだったのではないかと思われます。

  • 歴史的に、WHATWGはW3Cの方針に反発したブラウザ会社が立ち上げたものでした。
  • また、とほほ氏も、当時(平成12年頃)W3Cに対しても批判的な立場を取っておりました。

また、HTML 5では文書作成者への仕様とブラウザ開発者への仕様を明確に分けており、前者に於いては<font>要素などは廃止されるものの、後者に於いては<font>要素を含めて、過去の歴史的な要素の大半をサポートする事が条件とされております。

流石に、リストを<font>要素の内容とする事は出来ませんが、<a>要素の直下に従来のブロックレヴェル要素が入る事が認められるようになる予定です。

更に、HTML 5はSGML応用系である事も放棄しました。

  • もっとも、ブラウザ開発の現場では誰一人としてHTMLをSGMLの応用系と考えてさえいなかったのですがね。

あらゆる要素の実装を求め、文書作成者にもそれらの使用を許すのがFLEX-HTML 1.0と言うのなら、更にそれを純化(？)させたFLEX-HTML 2.0と言うかとほほHTML 2.0こそがHTML 5と言えるのではないかと思われます。

補足：引用元にある<mark>要素はどうすれば良いか。(平成22年 2月 7日)

制作者は、始めに引用文で言及したい箇所を強調しようとすると、引用元が既に強調などをしていた場合、強調は誰がしたのか分からなくなる場合があると書きました。

では、強調(<em>要素)の代わりに<mark>要素としてマークアップするとして、引用元に<mark>要素が用いられたらどうするのかと言う事になります。

私見ですが、これは引用時に開始・終了タグを除去するのが適切だと思います。

何故なら、仕様書には、<mark>要素は他の文章から参照される(すなわち他の文章と繋がりのある)目立たせたテキストと言う事が書かれております。

一方、引用と言う行為は、文書から一部を切り出す行為であり、その結果繋がりを持つ他の文章がなくなってしまい、目立たせる意味がなくなってしまうでしょう。

  • 切り出す範囲に依っては関連のある箇所も合わせて切り出される場合もあるかも知れません。それでも、引用者にとって不要であれば<mark>要素を取り消す事も出来ますし、逆に元の<mark>要素が適切だと思うのであれば、つまり引用者もその箇所を目立たせたいと思うのであれば、その場合に限り自分で<mark>要素としたものとして残せば良いのです。

要は、<mark>要素としてのマークアップは、文書を書く者が目立たせたいテキストに対して行うものであり、引用者にはそれを受け継ぐ必要はないと考えます。

  • 勿論、著作権法に違反するような改竄の範疇には入らないでしょう。

勿論、原文の筆者が引用者にもしっかり引き継いでもらいたい場合もあるかも知れませんが、それは目立たせるのではなく強調とすべきものではないでしょうか(つまり、<mark>要素とするのは不適切と思われる)。

以上の理由から、制作者は引用元の<mark>要素は引用者もその箇所を同要素としたいのでない限りマークアップを取り消すのが順当と考えます。

例 2：<dfn>要素で定義される語句の定義での例。

<dfn>要素で示される語句の定義を<mark>要素とするのも有効でしょう。

語句の定義は、しばしば他の文章から参照され得るものだからです。

また、<dfn>で定義される語句に対する定義部分のマークアップ方法が確立されていない事に疑問を感じた方もいるでしょう。

そのような方がHTML 5を利用するのであれば、この方法がお奨めです。

堀北真希(ほりきた まき)は、東京都清瀬市出身のアイドル女優である。

例 3：パンくずリストでの例。

ナヴィゲーションとして多用されるパンくずリストですが、現在地については<mark>要素とする事が考えられます。

例 4：コンピュータ言語のソースコードの例。

この記事をご覧になっていてお気付きかと思いますが、この記事でもサンプルのソースコードで<mark>要素を使っております。

ソースコードに於いて閲覧者に注目して頂きたい箇所にはまさに<mark>要素は格好の要素と言えるのです。

おまけ：HTML 4/XHTML 1の場合はどうすれば良いか。(平成22年 2月 7日)

<mark>要素はHTML 5で初めて導入される概念ですが、もしかしたら、HTML 4/XHTML 1でマークアップしている方も同様の目的でのマークアップをしたいかも知れません。

このような場合にはどうすれば良いでしょうか。

当然ながら、HTML 4/XHTML 1の文書型宣言のある文書内で<mark>要素としてマークアップしたらDTD違反となります。

HTML 4/XHTML 1では強調の意味が良く言えば広いので(悪く言えば曖昧なので)、十把一絡げに<em>要素とする事が考えられるかも知れません。

ですが、制作者は適切なクラス名を与えた<b>要素辺りが最も適切ではないかと思っております。

何故なら、HTML 5では、目立たせる行為は強調とは別物とされているからです。

このため、HTML 4/XHTML 1では論理的な意味を持たない、つまり強調語句ではない<b>要素の方が適切ではないかと思うのです。

例えば、<dfn>要素で定義される語句の定義の例で言えば、HTML 4/XHTML 1でなら、以下のようにマークアップすると良いでしょう。

<p><dfn>堀北真希</dfn>(<dfn>ほりきた まき</dfn>)は、<b class="definition">東京都清瀬市出身のアイドル女優</b>である。</p>

勿論、これは制作者の私見ですので、やはり<em>要素のほうが順当だと思うと言う方もいるでしょう。

或いは、意味のない<span>要素としてCSSで目立たせれば良いという方もいても良いでしょう。

或いは、そもそもHTML 4/XHTML 1には目立たせると言う概念はないとして、そのような事を初めから考えないと言うのも間違いではないのかも知れません。