[23] b要素、i要素、small要素も まだ使えます

<b>要素はブラウザのデフォルトスタイルで太字になり、<i>はイタリックになります。
まえにやった<strong>も太字になり、<em>もイタリックになりましたよね。
でも <b> と <strong>、<i> と <em>では、用途がちがうんです。

また、<small>要素はブラウザのデフォルトで文字が小さくなりますが、ただ小さくなるだけでなく、これにも意味があります。
今回はここらへんを整理します。

使用する要素	<b> 〜 </b> <i> 〜 </i> <small> 〜 </small>

「まだ使えます」と言うわけは

HTML5から「見た目のスタイルはCSSで指定」することを徹底させるため、見た目のスタイルのためのHTML要素は廃止されました。
で、<big>要素、<font>要素、<strike>要素などは使えなくなりました。

<b> <i> <small> は、かつては文字を「太字にする」「イタリックに」「小さく」という定義で使われてきましたが、HTML5からは役割が変わりました。
スタイル以外の ほかのお役目を与えられたので残っているってわけです。
（ちなみに b は boldの、i は italic の略です。もう気がついてたと思うけど。）

「前後の内容と区別したいテキスト」に使用する<b>要素

<b>要素は、特に重要性の意味合いもなく、前後の他のテキストと区別したいときに使います。
例えば、キーワード、レビュー記事の中の製品名、記事のリードとかだそうです。

<b>要素は、他にちょうどいい要素がないときに使います。
ヘッダーには h1 〜 h6 を、強調は em要素を、重要性は strong要素を、マーク（ハイライト）したいテキストは、mark要素を使うべきです。
このどれにも当てはまらないけど、前後のテキストと区別したいときに使います。

サンプルは ある日の持ち物がキーワードになってる文章です。

急いでポケットの中身を確認した。いつものように財布と鍵と携帯は入っている。
しかし肝心のポケットティッシュが今日に限って無いのだ。さてどうするか…。

HTMLはこちらです

<p>
急いでポケットの中身を確認した。いつものように<b>財布</b>と<b>鍵</b>と<b>携帯</b>は入っている。<br>
しかし肝心の<b>ポケットティッシュ</b>が今日に限って無いのだ。さてどうするか…。</p>

ブラウザでのデフォルトスタイルは太字になります。
でも これによってその箇所が重要だったり強調されたりしません。

「イタリック体で表しそうなもの」に使用する<i>要素

欧米のテキスト文化では（ウェブとか関係ない紙の文書でも）、
・分類学上の意味や名前（動植物とかの）
・技術（専門）用語
・別の言語の慣用句
・心の声（気分）
・船の名前
などを「イタリック体」で表現するんだそうです。
<i>要素は、これを担当する要素…なんだって。

たぶんこれ 私はめったに使わないないかも。日本人だなあ。
英文サイトの編集の機会があるとき用に、知識として知ってたららいいんじゃないかな？って程度。

とにかくサンプルを見てください。フランス語の慣用句を <i>要素 でマークアップしています。

There is a certain je ne sais quoi in the air.
（直訳です。 → 空気中に「何とも言いがたいもの」が確実にあります。）

HTMLはこちらです

<p>There is a certain <i lang="fr"> je ne sais quoi </i> in the air.</p>

上のソースのように、主となるテキストと異なる言語の用語は、lang属性を使います。
（lang="fr" は「フランス語」）

<i>要素はブラウザのデフォルトスタイルで イタリック体になります。
これは<em>要素と同じですが、<i>要素はその箇所を強調する役割はありません。

「付帯情報」に使用する<small>要素

<small>要素は、注釈、細目などの「付帯情報」を表すのに使用します。

このサンプルは、ホテルの料金表で、税込みかどうかを <small>で表示してます。

シングル

￥15,750（消費税込み　朝食は含まれておりません）

ダブル

￥26,250 （消費税込み　朝食は含まれておりません）

HTMLはこちらです

<dl>
	<dt>シングル</dt>
	<dd>￥15,750 <small>（消費税込み　朝食は含まれておりません）</small></dd>
	<dt>ダブル</dt>
	<dd>￥26,250 <small>（消費税込み　朝食は含まれておりません）</small></dd>
</dl>

注釈、細目などの「付帯情報」とは具体的には、
免責条項、著作権表記（コピーライト）、警告、法的制約などや、帰属、ライセンス要件など法的な情報。
大事だから書いとかなきゃいけないけど、別にデカく表示する程でもないモノですね。

<small>でマークアップすると、ブラウザのデフォルトで文字が小さくなります。
でもこれは意味が小さく軽くなったって意味ではありません。
<strong>で重要を示したり<em>で強調したフレーズを<small>で囲んでも、その意味がちっちゃくなったりしません。

あと、注意点は、ブロック全部が免責事項のとき、ブロック全部を<small>だけで囲んで済ますのは間違い。<small> はセクショニングの要素ではないので。
きちんと <section>などの適切な要素で囲んで、その内側に <small>要素を使います。

次回予告

いかがでしたか？
W3Cのサイトでは「 i と b 要素は、CSSでいくらでもスタイル変更していい」みたいなことが書かれていました。
イタリックやボールドのスタイルを表示するものではないって意味でしょう。

次回は「HTML5で廃止される要素」を、この機会にまとめておきたいと思います。

その次になりますが、「後で追加された」ことを示す<ins>要素と「後で削除された」ことを示す<del>要素を紹介します。これもずいぶん前からある要素です。