XHTMLからHTML5へ移行するときの注意点

HTML5を書く際に注意すべき点を勉強のためにまとめておきます。

  • 記述ルール
  • DOCTYPE(文書型)宣言
  • HTML5新要素へdisplayプロパティ(ブロックレベル)の再定義

記述ルール

HTMLとXHTMLのどちらの記述ルールでもOK。
HTMLのように終了タグ不要・引用符不要(例1)ですが、XHTML(例2)のように終了タグ・引用符ありでも良い。

例1:HTML記述ルール

<ul>
<li>リスト
<li><img src=example.jpg alt=サンプル >
</ul>

例2:XHTML記述ルール

<ul>
<li>リスト</li>
<li><img src="example.jpg" alt="サンプル" /></li>
</ul>

DOCTYPE(文書型)宣言

HTML5ではこれだけ

<!DOCTYPE html>

HTML5新要素へdisplayプロパティ(ブロックレベル)の再定義

HTML5 以前からある要素についてはブラウザデフォルトのdisplayプロパティ値がセットされていますが、HTML5で追加された新要素についてはブラウザに よってはdisplayのデフォルト値がセットされていないため、あらかじめ例3のようにブロックレベル設定が必要。

例3:CSSブロックレベル設定

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
    display: block;
}

他にも細かい点はいろいろありますが、とりあえず初歩中の初歩の部分はこれだけ。

最近のHTML5本

徹底解説HTML5マークアップガイドブック
羽田野太巳
秀和システム
売り上げランキング: 33307
HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
谷拓樹
ラトルズ
売り上げランキング: 756
スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応
タイトルとURLをコピーしました