テキストの意味づけ要素（3/4）

sub要素（下付き文字）

sub要素は、下付き文字を表します。下付き文字でないと意味が変わってしまうような箇所で使います。

■利用例

  <figure>
  	<dt>水の分解反応式</dt>
	<dd>H<sub>2</sub>O → H<sub>2</sub>+O<sub>2</sub></dd>
  </figure>
  <p>水は水素と酸素に分解されます</p>
    

利用例をブラウザ上で表示すると次の図のようになります。

sup要素（上付き文字）

sup要素は、上付き文字を表します。上付き文字でないと意味が変わってしまうような箇所で使います。

■利用例

  <p><ピタゴラスの定理は、<br />斜辺がZ、他の2辺がXとYとした場合に
  <var>X<sup>2</sup></var>+<var>Y<sup>2</sup></var>=<var>Z<sup>2</sup></var>
  という式が成立します。</p>
    

利用例をブラウザ上で表示すると次の図のようになります。

i要素（イタリック表記が通例のテキスト）

i要素は、声やムードを表すテキストの範囲や、分類用語、技術用語、多言語のイディオム、思考、船の名前など、印刷慣例ではよくイタリック体で表現することで、他の文章と区別しているようなテキストの範囲に使います。

日本語において、イタリック体でレンダリングされると、かえって読みづらくなります。必要に応じてスタイルシートで、不自然にならないようにデザインする必要があります。

■利用例

  <p>日本では、<i class="japan">大変だ</i>というが、
  アメリカでは<i class="english">Oh! My God!</i>と感嘆します。</p>
    

利用例に次のようなスタイルを設定します。

  <style type="text/css">
	i.japan {
		font-style:normal;
		margin:0 .5em;
	}
    
	i.english {
		margin:0 .5em;
	}
    
	i.japan:before {
		content:'「';
	}
    
	i.japan:after {
		content:'」';
	}
    
	i.english:before {
		content:'"';
	}

	i.english:after {
		content:'"';
	}
  </style>
    

ブラウザ上では次の図のように表示されます。

i要素は、さまざまな目的で利用できます。一番の利用は、目的によってスタイルを変えたいときです。そのため、i要素にclassコンテンツ属性を使って、その用途を区別して別々のスタイルに適用できるようにすることが推奨されています。

b要素（ボールド表記が通例のテキスト）

b要素は、印刷慣例ではよくある太字で表現される部分で、他の文章と区別したいようなテキストの範囲に使います。ただし、強調や重要性を表さない場合に使います。

日本語の文書であれば、スタイルシートを使って太字の表現をなくすようにレンダリングすることを心がけます。

b要素は、i要素、strong要素、em要素との区別をしっかりとします。b要素以外の要素は、それぞれ用途が特定されていますので、その用途に合わせて要素を使います。i要素、strong要素、em要素のどの用途にも当てはまらないと判断した時にb要素を使いますので、他の文章と区別したい場合における、最後の手段がb要素になります。

■利用例

  <p>私のあだ名は<em>モモンガ</em>ですが、これは<b>身体が小さく</b>しかも
  <b>顔が小さい</b>ということからみたいです。</p>
    

mark要素（ハイライト）

mark要素は、何かしら別の部分から、参照を目的として、特定のテキスト範囲をハイライトするために使います。ただ単に目立たせるために使うのではありません。

mark要素でマークアップされた部分は、明示的もしくは暗黙的に、別の場所でそれについて言及されていることを期待されたものです。

■利用例

  <p>WilipediaのWebサイトで、<a href="http://ja.wikipedia.org/wiki/HTML5/">
  HTML5</a>を調べると、次のように記述されていました。</p>
  <blockquote cite="http://ja.wikipedia.org/wiki/HTML5/">
  	<p>HTML5 （エイチティーエムエル・ファイブ）とは<mark>HTMLの5回目に
  	当たる大幅な改定版</mark>である。表記は HTMLと5の間にスペースを含まない。
  	XML の文法で記述する場合、XHTML5 と呼ばれる。</p>
  </blockquote>
    

利用例をブラウザ上で表示すると次の図のようになります。