HTML 5での<em>要素, <strong>要素と新要素・<mark>要素。

<em>要素及び<strong>要素はHTML 4/XHTML 1でも定義されておりますが、HTML 5では定義が若干変更されました。

更に、HTML 5には新要素として<mark>要素が追加される予定です。

ここでは、これらの要素の

について考えてみたいと思います。

HTML 5での<em>要素, <strong>要素と新要素・<mark>要素・目次。

HTML 4/XHTML 1での定義。(平成22年 3月13日 更新)

HTML 4.01及びXHTML 1.xでは、<em>要素及び<strong>要素は以下のような定義になっておりました。

<em>要素
強調されたテキスト
<strong>要素
<em>要素より更に強く強調されたテキスト

どちらも強調なので使い分け方が難しいかも知れません。

制作者は、日本語文書で言えば、

をイメージしており、そのようにマークアップをしてきました。

これは、しばしばグラフィカルなウェブブラウザが、

と言う英語文書でのスタイルをデフォルトスタイルとして採用している事に影響されたものです。

また、表示効果を想定したマークアップは好ましくないと考えられるかも知れませんが、あくまでもスタイルは想定であり、そのようなスタイルを前提としたマークアップではありません。

実際、制作者の作成した文書の一部は携帯電話向けに変換処理して配信されるものがありますが、携帯電話では実装上の理由から傍点を打つのが不可能であるため、緑の太字などの別のスタイルで実現しております。

また、HTML 4.01及びXHTML 1.xでは、入れ子にした<em>要素や<strong>要素の扱いを特に定義しておりません。(平成22年 3月13日)

HTML 5での定義。(平成22年 3月13日 更新)

一方、HTML 5では、<em>要素及び<strong>要素を以下のような定義に変更する予定です。

<em>要素
強調されたテキスト
<strong>要素
重要なテキスト

つまり、<strong>要素は定義上は強調テキストではなくなる事になります。

また、これらの要素はいずれも、入れ子にする事で更に強調或いは重要性の度合いを高める事も可能になります。

ですから、従来の<strong>要素(更なる強調)は二重の<em>要素としても良い事となります。

CSSでの定義は以下のようにすれば良いでしょう。

em {
    font-style: italic;   /* この場合、<em>要素は斜体扱い */
    }

em em, strong {
    font-style: normal;   /* この場合、<strong>要素は直立体の太字扱い */
    font-weight: bold;
    }

尚、二重<em>要素のスタイル定義を行う場合には、必ず単独<em>要素でのスタイル定義をキャンセルするようにしなければなりません。

新たに追加される<mark>要素。

更に、HTML 5には、新たに<mark>要素が追加される予定です。

<mark>要素
目立たせたテキスト

定義上は、「他の文章から参照される文書内の目立たせたテキスト」とされております。つまり、<mark>要素は他の文章と関連があるテキストを目立たせるための要素と言えます。

例えば、

などと言った使い方が考えられます。

この文書はXHTML 1.0 ストリクト(一部ブラウザにはHTML 4.01ストリクトか同トランジッショナル)で作成されておりますので、サンプルは別文書・HTML 5での<mark>要素のサンプルに挙げておきました。

HTML 5での要素の使い分け方。

この定義の変更を見ると、HTML 4/XHTML 1では、強調と言う言葉の意味が実に曖昧だったのが改めて実感させられます。

そして、HTML 5では定義がこのように具体的になったので、使い分けもより簡単になる事でしょう。

  1. 重要な語句(警告文など)には<strong>要素
  2. 閲覧者の目を引かせるために目立たせたいテキストには<mark>要素
  3. それらに該当しない強調テキストには<em>要素

と言うような感じにしていけば良いかと思われます。

もっとも、今まででも重要だからこそより強く強調したいと思って<strong>要素を用いてきたと思われますので、よほど変な使い方をしてきたのでない限り、HTML 5に移行しても<strong>要素の使い方を大きく変更する必要はないかと思われます。

スタイルはどうする？ (平成22年 3月13日 更新)

HTML 5での<em>要素及び<strong>要素の定義が、HTML 4.01/XHTML 1.xのそれと異なり、更に新たな要素が追加された事で、スタイルも変えなければと思うかも知れません。

しかし、制作者は、<em>要素及び<strong>要素に関しては、特にスタイルを変更する必要はないと思っております。

つまり、

のままで良いと思っております。

また、二重の<em>要素を従来の<strong>要素と同一視し、そのため二重の<em>要素は<strong>要素と同じ扱いにしても良いでしょう。(平成22年 3月13日)

また、<mark>要素ですが、これは

とするのが良いかと思われます。

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com