HTML 考古学: さまざまな img センタリング

・最初の方は現在では使われない書き方です。
・2020年頃の Webブラウザでも一応表示できる。
・昔風の Web を見つけたら年代測定の目安にどうぞ。

center タグ


1990年代。centerタグ
<CENTER>
	<IMG WIDTH=200 SRC=sample_kawasemi.jpg><BR>
	1990年代。centerタグ<BR>
</CENTER>

・タグが大文字。
・属性値を "" で括らず。
・ごく初期、Netscape 2.0/3.0 ぐらい。

align 属性


P ALIGN="CENTER"
1990年代、div や CSS がない時代。 

<P ALIGN="CENTER">
	<IMG WIDTH="200" SRC="sample_kawasemi.jpg"><BR>
	P ALIGN="CENTER"<BR>
	1990年代、div がない時代。 <BR>
</P>

・align 属性は現在では廃止の属性になっていて使用されません。
・属性値を "" で括る。省略することも多い。

div 出現


div align="center"
2000年ぐらい？、div 出現。タグも小文字に。 
<div align="center">
	<img width="200" src="sample_kawasemi.jpg"><br>
	div align="center"<br>
	2000年近辺ぐらい？、div 出現。タグも小文字に。 <br>
</div>

・IE6 ぐらいの時代？
・タグは小文字で書かれるようになった。

CSS が一般化

初期の時代に CSS は存在しなかった。


text-align: center;
2000年代 - 
<style type="text/css">
.div1 {
	text-align: center;
}
</style>
<div class="div1">
	<img width="200" src="sample_kawasemi.jpg"><br>
	text-align: center;<br>
	2000年代 - <br>
</div>

・装飾スタイルはタグの中に属性値を書かず CSS に分離するようになった。
  bgcolor, align, valign, cellpadding などの属性を使わない時代に。

figure, figcaption タグが出現

figure, figcaption は IE8 時代まで使えなかったタグです。

figcaption
2010年代後半 - 
<style> /* type="text/css" は不要になった */
figure {
	text-align: center;
}
figure img {
	width: 200px;
}
</style>
<figure>
	<img src="sample_kawasemi.jpg">
	<figcaption>
	figcaption<br>
	2010年代後半 - <br>
	</figcaption>
</figure>

(2023/07)
・気がついたらムダに壮大化する HTML と CSS という話もありますが・・・
inserted by FC2 system