今回はHTMLだけの処理です。HTMLだけで塩化ナトリウムの電気分解式を例に注意点を整理しました。
上付き文字 <sup>a</sup>
下付き文字 <sub>a</sub>
上付き文字 <sup><font size="1">a</font></sup>
下付き文字 <sub><font size="1">a</font></sub>
という処理もありです。
事の発端は汎用性を持たせるために以下の記述をしたのですが、上図のように謎の半角?スペースが入ってしまい大混乱。
<body bgcolor="palegoldenrod">
<h4>
塩化ナトリウム（食塩）
N
<sub>a</sub>
<sup>+</sup>
+Cl
<sup>−</sup>
=N
<sub>a</sub>
Cl
</h4>
</body>
<h4>
塩化ナトリウム（食塩）
N
<sub>a</sub>
<sup>+</sup>
+Cl
<sup>−</sup>
=N
<sub>a</sub>
Cl
</h4>
</body>
取りあえずⒶの＋とイコールの前後にスペースを入れて体裁を整えました。
<body bgcolor="palegoldenrod">
<h4>
塩化ナトリウム（食塩） 
N
<sub>a</sub>
<sup>+</sup>
+ Cl
<sup>−</sup>
= N
<sub>a</sub>
Cl
</h4>
</body>
塩化ナトリウム（食塩） 
N
<sub>a</sub>
<sup>+</sup>
+ Cl
<sup>−</sup>
= N
<sub>a</sub>
Cl
</h4>
</body>
ここで10日ほど放置して、気休めに一行で記述したところ、謎のスペースがなくなりました。
<body bgcolor="palegoldenrod">
<h4>
塩化ナトリウム（食塩）
N<sub>a</sub><sup>+</sup>+Cl<sup>−</sup>=N<sub>a</sub>Cl
</h4>
</body>
塩化ナトリウム（食塩）
N<sub>a</sub><sup>+</sup>+Cl<sup>−</sup>=N<sub>a</sub>Cl
</h4>
</body>
ここで、改めてⒶの＋とイコールの前後にスペースを入れて体裁を整えました。コレで完成です。
<body bgcolor="palegoldenrod">
<h4>
塩化ナトリウム（食塩） 
N<sub>a</sub><sup>+</sup> + Cl<sup>−</sup> = N<sub>a</sub>Cl
</h4>
</body>
塩化ナトリウム（食塩） 
N<sub>a</sub><sup>+</sup> + Cl<sup>−</sup> = N<sub>a</sub>Cl
</h4>
</body>
