html 4.0 に従ってタグ=要素を変更する

今日も朝からまずまずいいお天気で、蒸し暑かったです。関東地方でも梅雨明けが近づいているような気がします。我が家の小学生たちは夏休みを謳歌しています。

と言うことで、夏休みとは何の関係もないんですが、私のブログのエントリーの html のタグを html 4.0 に従って書き換えました。もちろん、古いエントリーにさかのぼって書き換えたんではなく、少し前のエントリーから書き換えています。html 4.0 や xhtml では非推奨のタグ、というか、正しくはタグではなく要素と言うのかもしれませんが、使うべきではないとされた要素があります。子々孫々までこのブログを読ませたいとは思いませんが、時代の進歩にキャッチアップするのも重要なことだと思います。今まで、私はブログの本文はレンタル元のエディタに付属した機能ではなく、自分で html のタグを書いて来ました。20年近くも前に html の文法を勉強し、テキスト・エディタで html を編集して来たんですから、その程度のスキルはあったりします。逆に、古い html の文法が身についてしまっていたりもするわけです。
非推奨のタグ=要素とされたのはいっぱいあるんですが、私が今までブログで使ってきたものとしては、 font 要素、 center 要素、 u 要素なんかの文字装飾のための要素が多いような気がします。でも、アンダーラインを引く u 要素はダメなんですが、太字=ボールドにする b 要素やイタリック体にする i 要素がいいのは、使用頻度が高いからという説もあったりします。また、要素ではないんですが、要素の属性でも非推奨のものがあったりします。これも私がブログで使ってきたのは、hr 要素や img 要素の align 属性や border 属性とか、テーブルを組む際の align 属性や bgcolor 属性や hight 属性や width 属性なんかです。要するに、 font 要素をはじめとする個別の文字装飾の要素や属性をヤメにして、span 要素や div 要素なんかのスタイルシートで設定するべきである、との思想に基づいているような気がします。やや疑問に思っているのは、img 要素と table 要素における非推奨と許容される属性の不整合です。すなわち、 align 属性は img 要素でも table 要素でも非推奨である一方、 height 属性と width 属性は img 要素の属性としては許容されているんですが、table 要素では非推奨とされ、 style 属性の中で記述するようになっている一方で、img 要素では非推奨となっている border 属性は table 要素では OK だったりします。やや混乱しそうな気がしないでもありませんので、私は height 属性、 width 属性、 border 属性なんかについては、hr 要素と img 要素とテーブルを組む際のいずれでも style 属性で統一して記述しようと考えています。
これに従って、今回は、必ずしも非推奨にならなかった b 要素や i 要素も含めてスタイルシートで書くことにしました。要するに、 font 要素を使わずに、また、加えて、b 要素や u 要素や i 要素なんかの要素を使わずに、すべてを span 要素や div 要素などの何らかの要素の style 属性で表現することになります。と言うことで、あくまで、自分の備忘録のために、以下のテーブルを組んでみました。なお、コロンの後にスペースを空けるようなことを示唆するサイトもありますが、私は空白ナシで書いています。また、 background は正しくは background-color なのかもしれませんが、 color ナシで十分ですので、私の解釈により短い方を選んでいます。こんなことを言えば、 style 属性の最後のセミコロンは不要なんですが、そこは区切りを明確化するために長くなっても入れていたりします。自分でも不整合だと思うんですが、私は私なりの方法論で実用的に書いていますので、正しくはそれなりのリファレンスをご覧になることをオススメします。
ここまで読んで下さって申し訳ないんですが、関心のない方は今夜のエントリーは無視して下さい。なお、下の表は私が今までにこのブログで使ったことのある要素と属性だけですので、すべての非推奨の要素や属性を網羅したものではありません。念のため申し添えます。

要素	属性	代替
b		span style="font-weight:bold;"
big		span style="font-size:large;"
center		span style="text-align:center;"
div	align="center"	div style="text-align:center;"
font	color="#ff0000"	span style="color:#ff0000;"
	size="5"	span style="font-size:x-large;"
hr	align="center"	hr style="text-align:center;"
	height="50"	hr style="height:50px;"
	width="50"	hr style="width:50px;"
i		span style="font-style:italic;"
img	align="left"	img style="float:left;"
	border="0"	img style="border-style:none;"
	height="150"	img style="height:150px;"
	width="200"	img style="width:200px;"
p	align="left"	p style="text-align:left;"
small		span style="font-size:x-small;"
table td tr	align="left"	table style="text-align:left;"
	bgcolor="#ff0000"	table style="background:#ff0000;"
	border="1"	table style="border-width:1;border-style:solid;"
	height="50"	table style="height:50px;"
	width="50"	table style="width:50px;"
u		span style="text-decoration:underline;"