第13回 その他、使わないほうがよい要素・属性（1）

　前回まで見てきた非推奨要素・属性のほか、XHTML 1.0 TransitionalとFramesetはもとより、XHTML 1.0 StrictとXHTML 1.1でも、実は見栄えに関する要素・属性がいくつか残されている。これらは非推奨要素・属性と異なり、文書型定義で正式に認められているものの、見栄えに要素・属性であることに変わりはない（いわばグレーゾーンに属する要素・属性である）。今回では、まず「使わないほうがよい要素」について、他の要素・属性やCSSで代替する方法を見ていくことにする。

1. b要素

　b要素（太字）は、強調を意味するのであればem要素やstrong要素で代替する。装飾目的であれば、id/classを割り当てたspan要素に対して、CSSのfont-weightプロパティで「bold」を適用して代替する。

[修正前]
<b>テキスト</b>

[修正後]
<strong>テキスト</strong>

または

span.note {
  font-weight: bold;
  }
 :
 :
<span class="note">テキスト</span>

2. i要素

　i要素（イタリック体）は、強調を意味するのであればem要素やstrong要素で代替する。装飾目的であれば、id/classを割り当てたspan要素に対して、CSSのfont-styleプロパティで「italic」を適用して代替する。

[修正前]
<i>テキスト</i>

[修正後]
<em>テキスト</em>

または

span.note {
  font-style: italic;
  }
 :
 :
<span class="note">テキスト</span>

　なお、ブラウザではb要素は太字で、i要素はイタリック体で表示される。このような見栄えを目的としたマークアップを「物理マークアップ」と表現することがある（後に説明するbig要素、small要素、tt要素も同様）。一方、意味を与えることを目的としたマークアップを「論理マークアップ」といい、em要素やstrong要素などが該当する。

　注意すべきは、多くのブラウザがem要素をイタリック体で、strong要素を太字で表示するからといって、「i要素＝em要素」「b要素＝strong要素」とは考えてはならないことだ。em要素やstrong要素は、あくまで「（強調という）意味を与える」のであって、どのように表示されるかは別の問題である（em要素がイタリック体で、strong要素が太字で表示されるのは、ほとんどのビジュアルブラウザがそうしているだけのことである）。逆にいえば、b要素やi要素は見栄えを指定するための要素であって、内容にどのような意味を与えるかということとは本来、無関係だ。

3. big要素

　big要素（一段階大きいフォント）は、id/classを割り当てたspan要素に対して、CSSのfont-sizeプロパティで「larger」を適用して代替する。

[修正前]
<big>テキスト</big>

[修正後]
span.largertext {
  font-size: larger;
  }
 :
 :
<span class="largertext">テキスト</span>

4. small要素

　small要素（一段階小さいフォント）は、id/classを割り当てたspan要素に対して、CSSのfont-sizeプロパティで「smaller」を適用して代替する。

[修正前]
<small>テキスト</small>

[修正後]
span.smallertext {
  font-size: smaller;
  }
 :
 :
<span class="smallertext">テキスト</span>

5. tt要素

　tt要素（テレタイプ・テキスト、等幅テキスト）は、id/classを割り当てたspan要素に対して、CSSのfont-familyプロパティで「monospace」を適用して代替する。

[修正前]
<tt>テキスト</tt>

[修正後]
span.teletype {
  font-family: monospace;
  }
 :
 :
<span class="teletype">テキスト</span>

使わないほうがよい要素まとめ

　最後に、今回説明した「使わないほうがよい要素」の代替方法をまとめておこう。