HTML5に書き換えてみた
4.center、hr、img-alt、em
center
中央寄せしたい場合、従来は<center>~</center>で中央寄せしたいdivやtableを囲んでいました。
しかしHTML5では、ページの「見た目」にかかわる設定はCSSでやりましょうと言う主旨で、 centerタグは廃止になっています。そこで、HTML文書からcenterタグを取り外しました。
その結果、画面は下の様に左寄せになります。
そこで、CSS文書の書き換えになります。器であるbodyと内容物であるdiv.containerとの両方で、センタリングをかけます。
から、次のように書き換えます。
これで書き換え完了です。
img要素のalt属性
img要素のalt属性は画像の代替えテキストを指定するものです。ただ、HTML5では仕様が改訂されて、 より細かく厳密になった様です。できるだけ、画像と同じ情報量をテキストで表現したいと思いますが、今回の書き換えでは下の様に 記述するのが精一杯です。
em要素(強調)
em要素は、従来は意味を強める箇所を設定するものでしたが、HTML5ではアクセントをつける箇所を設定するものに変わりました。 HTML5では、意味を強めたり強調したい場合、重要性を示したい場合はstrongを使う事になります。
また、単に文字を斜体(イタリック)にしたい場合は、CSS文書内で指定すべきです。
今回のサンプルでは、HTML文書は下の様にフッター部でemを使っています。
CSS中の記述は下の様なh4関係のみです。
画面は下の様になっています。
書き換え後のHTML文書は下の通りで、em要素は無くしました。ついでに、ブラウザ制限も外しました。
CSS中のfooter関係記述は下の通りです。
画面は下の様になっています。
hr要素(強調)
今回のサンプルでは使っていませんが、水平な区切り線を引く為のタグとして使っていたhrも、意味付けが変更されたものの一つです。
従来は「区切り線を描画する」と定義されていましたが、HTML5ではテーマや話題の区切りを表す要素と定義されています。
ここまでの書き換え後のホームページです。