subタグ -テキストを下付き文字として表示する｜HTML辞典
<sub>タグとは？
<sub> タグは、テキストを下付き文字（subscript）として表示するためのタグです。
化学式、数学の指数、脚注などを表現する際に使用されます。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<sub> は 開始タグ（<sub>）と閉じタグ（</sub>）の両方が必要 です。
基本的な記述方法
<p>水の化学式は H<sub>2</sub>O です。</p>
使用できる主な属性
<sub> タグには特別な属性はありません。
CSSを使ったデザイン変更
<sub> のデフォルトのスタイルは 通常のテキストより小さく、下に配置 されますが、カスタマイズも可能です。
sub {
font-size: 0.8em;
vertical-align: sub;
color: blue;
}
適切な使用例
✅ 化学式を表現する
<p>二酸化炭素の化学式は CO<sub>2</sub> です。</p>
✅ 数学の指数を示す
<p>距離の公式: s = ut + 1/2 a t<sub>2</sub></p>
✅ 脚注を示す
<p>この研究は Smith et al.<sub>1</sub> によって発表されました。</p>
適切でない使用例（誤った使い方）
❌ <sub> を単なるデザイン目的で使用する
<!-- NG: スタイリングのために <sub> を使用 -->
<p>この商品は <sub>特別価格</sub> で提供されています。</p>
✅ 正しい書き方（装飾ではなく、意味のある用途に使用）
<p>化学式 H<sub>2</sub>O は水を表します。</p>
❌ <sub> を <sup> の代わりに使用する（上付き文字には <sup> を使う）
<!-- NG: 上付き文字に <sub> を使う -->
<p>x<sub>3</sub> 乗</p>
✅ 正しい書き方（上付き文字には <sup> を使用）
<p>x<sup>3</sup> 乗</p>
<sub>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<sub> | 下付き文字を表す | テキストを下に配置 | 化学式、指数、脚注 |
<sup> | 上付き文字を表す | テキストを上に配置 | 数学の指数、注釈番号 |
<small> | 文字サイズを小さくする | フォントサイズを縮小 | 免責事項、補足情報 |
使用上の注意点
✅ <sub> は意味を持つ場面でのみ使用する
- 化学式、数学式、脚注 など、適切な用途で活用する。
✅ <sup>（上付き文字）との区別を正しく行う
- 乗数や指数には
<sup>を使用し、下付きが必要な表記には<sub>を使う。
✅ CSS でスタイルを適用する場合、vertical-align: sub; を使用
font-sizeを適切に調整して視認性を確保する。
関連タグ
まとめ
<sub> タグは、HTML文書内で 化学式、数学の指数、脚注などを下付き文字として表現するためのタグ です。
適切に使用すると、科学的・数学的な記述の可読性が向上します。
