HTML5に書き換えてみた
4.center、hr、img-alt、em


center

中央寄せしたい場合、従来は<center>~</center>で中央寄せしたいdivやtableを囲んでいました。

書き換え前

しかしHTML5では、ページの「見た目」にかかわる設定はCSSでやりましょうと言う主旨で、 centerタグは廃止になっています。そこで、HTML文書からcenterタグを取り外しました。

書き換え後

その結果、画面は下の様に左寄せになります。

center無しの画面

そこで、CSS文書の書き換えになります。器であるbodyと内容物であるdiv.containerとの両方で、センタリングをかけます。

CSS書き換え前

から、次のように書き換えます。

CSS書き換え後

これで書き換え完了です。

img要素のalt属性

img要素のalt属性は画像の代替えテキストを指定するものです。ただ、HTML5では仕様が改訂されて、 より細かく厳密になった様です。できるだけ、画像と同じ情報量をテキストで表現したいと思いますが、今回の書き換えでは下の様に 記述するのが精一杯です。

alt書き換え後

em要素(強調)

em要素は、従来は意味を強める箇所を設定するものでしたが、HTML5ではアクセントをつける箇所を設定するものに変わりました。 HTML5では、意味を強めたり強調したい場合、重要性を示したい場合はstrongを使う事になります。

また、単に文字を斜体(イタリック)にしたい場合は、CSS文書内で指定すべきです。

今回のサンプルでは、HTML文書は下の様にフッター部でemを使っています。

書き換え後

CSS中の記述は下の様なh4関係のみです。

書き換え後

画面は下の様になっています。

書き換え前"

書き換え後のHTML文書は下の通りで、em要素は無くしました。ついでに、ブラウザ制限も外しました。

書き換え前

CSS中のfooter関係記述は下の通りです。

書き換え後

画面は下の様になっています。

書き換え前"

hr要素(強調)

今回のサンプルでは使っていませんが、水平な区切り線を引く為のタグとして使っていたhrも、意味付けが変更されたものの一つです。

従来は「区切り線を描画する」と定義されていましたが、HTML5ではテーマや話題の区切りを表す要素と定義されています。

ここまでの書き換え後のホームページです。

書き換え後画像クリックで実際のページ

ページトップ

前ページ←

→次ページ

コーナー