i要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
i要素は、HTML 4.01ではイタリック体でレンダリングするための要素でしたが、HTML5では文中でほかと区別したい部分を表すために使います。
日本語ではあまりなじみがありませんが、英文では、人の発言内容や雰囲気を表す言葉、専門用語、外来語、船の名前などをイタリックで表現する習慣があります。HTML5のi要素は「イタリックにすること」が目的ではありませんが、「（意味的に）イタリックで表現される部分」に使うと考えられます。
<i>Queen Elizabeth</i>に乗船することになったのは、本当に偶然でした。
i要素でマークアップしたテキストが文書の言語と異なる場合は、lang属性を指定します。
<i lang="en">Queen Elizabeth</i>に乗船することになったのは、本当に偶然でした。
i要素の内容を示す場合は、class属性を使います。
<i class="ship" lang="en">Queen Elizabeth</i>に乗船することになったのは、本当に偶然でした。
- ポイント
- i要素を使う際は、他にもっと適した要素がないか検討することが推奨されています。たとえば、強調したいのであればem要素、用語の場合はdfn要素などの使用を検討しましょう。
b要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
b要素は、HTML 4.01ではボールド体でレンダリングするための要素でしたが、HTML5では意味的に区別したい部分を表します。印刷物でいえばボールドで表現するような部分に使うことが考えられますが、重要という意味はありません。重要性を表したい場合はstrong要素を使います。
具体的な用途としては、文書の概要にあるキーワード、レビュー記事の製品名、記事のリード文があります。
<h3>新製品レビュー：ズメレット 50mm F1.5</h3>
<p>期待のレンズ、<b>ズメレット 50mm F1.5</b>は、とても解像度の高いレンズだ。</p>
b要素では、i要素と同じようにclass属性を使って内容を示せます。
<h3>新製品レビュー：ズメレット 50mm F1.5</h3>
<p>期待のレンズ、<b class="newProduct">ズメレット 50mm F1.5</b>は、とても解像度の高いレンズだ。</p>
- ポイント
- b要素は、ほかにもっと適した要素がないか検討することが推奨されています。たとえば、em要素やstrong要素、mark要素などです。それらの要素のどれも当てはまらない場合にのみ、b要素を使うようにしましょう。
u要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
u要素は、HTML 4.01では下線を引くための要素であり、非推奨でしたが、HTML5では「分かりにくいテキストやスペルミスの範囲を表す」という意味が与えられ、非推奨ではなくなりました。
「分かりにくいテキスト」の範囲とは、たとえば以下のようなものです。
「私がやるよ」とはるみが言ったので、僕は思わず立ち上がった。
このような文章の場合、『「私がやるよ」とは／るみが」なのか、『「私がやるよ」と／はるみが」なのか、一瞬で判断できません。
「私がやるよ」と<u>はるみ</u>が言ったので、僕は思わず立ち上がった。u要素は、こうした分かりにくいテキストの範囲をはっきりとさせるために使用します。
- ポイント
- u要素を使う場合は、em要素やb要素やmark要素など、ほかにもっと適した要素がないか検討しましょう。ほとんどの場合は、他の要素が適していることが多いはずです。
それでもu要素を使う場合は、リンクテキストに見えないように注意します。u要素のデフォルトスタイルは下線なので、テキストカラーによってはクリックできるように見えてしまいます。CSSを使って下線以外の表示に変更するなどの対応が必要です。
small要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
HTML 4.01のsmall要素は、単に小さいフォントでレンダリングするものでしたが、HTML5では「注釈」「細目（さいもく）」などを表すようになりました。細目とは、免責事項、警告、法的規制、著作権表示、ライセンス要件を満たすための表示などのことです。Webページでの典型例には、コピーライト表記があります。
<p><small>© 2006 hamashun</small></p>
small要素は、括弧でくくるような注釈に対しても使えます。
<dl>
<dt>やきそば</dt>
<dd>560円<small>（税込み）</small></dd>
<dt>ビール</dt>
<dd>480円<small>（税込み）</small></dd>
</dl>
strong要素と組み合わせると、「重要な細目」という意味を持たせられます。
<p><strong><small>この商品を使った結果いかなる影響があろうとも、一切の責任を負わないものとします。</small></strong></p>
- ポイント
- small要素は、複数の段落やリスト、テキストのセクションなどの、広い範囲に渡って使うべきではありません。small要素は、注釈などの狭い範囲で使うことが想定されています。
◆
次回も引き続き、意味や使い方が変更された要素について解説します。
著者：浜 俊太朗 （はま・しゅんたろう）
NHN Japanで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。
