XHTMLとHTML5の組み方を見比べてみる
- Category :
- (X)HTML
最近はHTML5について話題にあがっている事も多い事ですし、XHTMLで組んだソースがHTML5で組んでみたらどうのようになるのか見比べて実際変わる点などを書いておきたいと思います。
…ここからが続き
XHTML使用
長くなりますが一部を省略してソース載せます。
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTMLで組んだデモページ|CSS Lecture</title> <meta name="keywords" content="CSS,XHTML,デモページ" /> <meta name="description" content="XHTMLで組んだものをHTML5で組みなおしてみるのデモページ" /> <link href="/common/images/ico/favicon.png" rel="icon" type="image/png" /> <link href="/common/images/ico/favicon.ico" rel="shortcut icon" /> <meta http-equiv="Content-Script-type" content="text/javascript" /> <meta http-equiv="Content-Style-type" content="text/css" /> <link rel="stylesheet" href="style/demo1.css" type="text/css" media="all" /> </head> <body id="cssLecture"> <div id="header"> <div class="inner"> <h1></h1> </div> <!--/ #header--></div> <div id="contents"> <div id="main"> <div class="entry"> <h2></h2> <div class="body"> <!--/ .body--></div> <div class="entryFooter"> <p>2009 09-09 00:00 AM</p> <ul> <li></li> </ul> </div> <!--/ .entry--></div> <!--/ #main--></div> <div id="sub"> <h3>Category</h3> <ul> <li></li> </ul> <h3>Recent Article</h3> <ul> <li></li> </ul> <!--/ #sub--></div> <!--/ #contents--></div> <div id="footer"> <div class="inner"> <ul class="bnr"> <li></li> <!--/ .bnr--></ul> <address>Copyright © 2009 CSS Lecture All rights reserved.</address> </div> <!--/ #footer--></div> </body> </html>
まーこんな感じで組んだとして、これをHTML5に組んで見たいと思います。
HTML5
まず最初にしておかにといけない事なんですが、IE は正式に HTML5 には対応していないので、IE にも適用させる為に下記のように JavaScript を head内に指定しておく必要があります。
IE で HTML5 を使う際の指定
<!--[if IE]> <script type="text/javascript"> document.createElement( 'header' ); document.createElement( 'section' ); document.createElement( 'nav' ); document.createElement( 'aside' ); document.createElement( 'footer' ); document.createElement( 'article' ); document.createElement( 'time' ); </script> <![endif]-->
上記のソースを付けくわえた上でHTML5に組みかせてみます。
HTML5
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTML5で組んだデモページ|CSS Lecture</title> <meta name="keywords" content="CSS,XHTML,デモページ"> <meta name="description" content="XHTMLで組んだものをHTML5で組みなおしてみるのデモページ"> <link href="/common/images/ico/favicon.png" rel="icon" type="image/png"> <link href="/common/images/ico/favicon.ico" rel="shortcut icon"> <meta http-equiv="Content-Script-type" content="text/javascript"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="style/demo.css" type="text/css" media="all"> <!--[if IE]> <script type="text/javascript"> document.createElement( 'header' ); document.createElement( 'section' ); document.createElement( 'nav' ); document.createElement( 'aside' ); document.createElement( 'footer' ); document.createElement( 'article' ); document.createElement( 'time' ); </script> <![endif]--> </head> <body id="cssLecture"> <header> <div class="inner"> <h1></h1> </div> <!--/ header--></header> <div id="contents"> <div id="main"> <article> <h2></h2> <section> <!--/ section--></section> <aside> <time datetime="2009 09-09 00:00 AM">2009 09-09 00:00 AM</time> <ul> <li></li> </ul> </aside> <!--/ article--></article> <!--/ #main--></div> <div id="sub"> <nav> <h3>Category</h3> <ul> <li></li> </ul> <h3>Recent Article</h3> <ul> <li></li> </ul> </nav> <!--/ #sub--></div> <!--/ #contents--></div> <footer> <div class="inner"> <ul class="bnr"> <li></li> <!--/ .bnr--></ul> <address>Copyright © 2009 CSS Lecture All rights reserved.</address> </div> <!--/ footer--></footer> </body> </html>
今回使用したHTML5タグ
- header
- section
- nav
- aside
- footer
- time
これについての詳しい説明はHTML5.JPが詳しく解説をしてくれていますので、参考にして下さい。
XHTMLとHTML5の違い
1. DOCTYPE 宣言と文字コードの設定の記述
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5
<!DOCTYPE html> <meta charset="utf-8">
随分省略してあります。これだと手打ちでも普通に打てますね!以前までは覚える気もなかったですし、コピペなどで済ませてましたからw
2. 半角スペース/が必要ない
XHTMLでは meta タグや img タグの終わりは半角スペース/を使っていたのですが、HTML4と同じように必要ないと思われます。(※違ったら指摘して下さい)
XHTML
<img />
HTML5
<img>
3. HTML5から導入されたタグ
先ほど「今回使用したHTML5タグ」であげた用に、HTML5から導入されたタグを使用する点ですね
XHTML
<div id="header"> <h1></h1> </div>
HTML5
<header> <h1></h1> </header>
この用に使用する事が出来ます。
注意点やまとめ
まぁ~こんな感じでHTML5になる事で楽になる点や文書構造上、以前より意味合いをもたせる事が出来ます。
後今回紹介したHTML5のタグに初めにCSSで「display: block;」をかけておく事も忘れないように!
header, article, footer, article, aside, time ,nav { display: block; }
HTML5のタグの使用方法については現状、人によって違う点があると思うですが、正式な使い方については今後も勉強を重ねていきますので、その際はまた紹介したいと思います。
ちなみに既にHTML5で組んでるサイトさんやHTML5に関する記事も載せておきます。
HTML5に関する記事
- HTML5で組んでみた CSS-EBLOG
- HTML5が話題になっているので試しに書いてみた。 CSS HappyLife
HTML5で組んでる人
上記で紹介したサイトさんは自分がリスペクトしている人達なので、そちらの記事なども参考にして下さい。
Comments
aside の使い所は、サイドバーとか関係なく、なくなっても良い所。と認知で今はいます。ですのでブログで言うと広告枠などがメインかと。
最近で言うとフッターの最近のコメントやはてブなどのエリアも aside で良いかと思います。
通りすがりさんのコメントについて
>aside要素の使い方が気になります。
ブログのサイドバーとか…?
header要素とfooter要素がページのヘッダーとフッターの代わりに使うのではなく、sectionやarticleなどのセクショニングコンテンツを補助する役割として使うことが望ましいのではないかと思います。
またarticleのなかにasideを使うのも役割としてはおかしいような。
自分も何を使うべきなのかけっこう悩んだ所なんですよね…
こういう時はfooter要素を使うべきなんですかね?
aside要素の使い方が気になります。