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/image/ico/favicon.png" rel="icon" type="image/png" />
    <link href="/common/image/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/image/ico/favicon.png" rel="icon" type="image/png">
    <link href="/common/image/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">

随分省略してあります。これだと手打ちでも普通に打てますね！以前までは覚える気もなかったですし、コピペなどで済ませてましたからｗ

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で組んでる人

上記で紹介したサイトさんは自分がリスペクトしている人達なので、そちらの記事なども参考にして下さい。

最近のブラウザ使えそうなCSSハックの一覧: 2009 10-25
手書き風の雰囲気を出すPhotoshopブラシツール: 2009 10-18
検索フォームをCSSでデザインするサンプル集: 2009 03-17
インパクトのあるWebデザイン集: 2009 09-15
CSSでヘッダーを固定にしたサンプル: 2009 02-10

CSSリファレンス、(X)HTML、Movable Typeその他Webサイト制作に関する役立つ情報を掲載します！