HTML で右下や右上に小さい文字をつけるタグ。CSS は使いません

立法メートル m³ や平方メートル m² といった単位、二酸化炭素 CO₂ や水 H₂O の化学式のように、文字の右上や文字の右下につける小さい文字を HTML で表現する方法は次の通り。

なお CSS を使わなくても表現できます。

文字の右横に小さい文字をつける方法

右上に小さい文字をつける場合

使用するタグは sup です。上付き文字と言われます。

立法メートル： m<sup>3</sup>
数式： x<sup>4</sup> - 1 = (x<sup>2</sup> + 1)(x<sup>2</sup> - 1)
オイラーの定理： e<sup>πi</sup> = -1

右下に小さい文字をつける場合

使用するタグは sub です。下付き文字と言われます。

水： H<sub>2</sub>
炭酸： H<sub>2</sub>CO<sub>3</sub>

組み合わせることも可能

これらを組み合わせると数学の log 乗の公式もこのように表現できます。

a^log_ab = b

CSS で表現したい場合

フォントサイズを小さくするのがポイント。

vertical-align プロパティを利用する

span.sup {
  vertical-align: super;
  font-size: smaller;
}
span.sub {
  vertical-align: sub;
  font-size: smaller;
}

立法メートル： m<span class="sup">3</span>
炭酸： H<span class="sub">2</span>CO<span class="sub">3</span>
Log 乗の公式： a<span class="sup">log<span class="sub">a</span>b</span> = b

CSS だとソースコードが読みづらいですね。

そもそも上付き文字や下付き文字は、装飾ではなくその位置にあることで意味をなしているものです。HTML タグで表現するほうが正しい対応だと思います。