XHTMLとHTML5の組み方を見比べてみる

XHTMLとHTML5の組み方を見比べてみる

最近は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>

demo page

まーこんな感じで組んだとして、これを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>

demo page

今回使用した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で組んでる人

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

Comments

MIYA

MIYA

aside の使い所は、サイドバーとか関係なく、なくなっても良い所。と認知で今はいます。ですのでブログで言うと広告枠などがメインかと。

最近で言うとフッターの最近のコメントやはてブなどのエリアも aside で良いかと思います。

2010年08月23日 15:36

誰…

誰…

通りすがりさんのコメントについて
>aside要素の使い方が気になります。
ブログのサイドバーとか…?

2010年08月18日 18:46

雀

header要素とfooter要素がページのヘッダーとフッターの代わりに使うのではなく、sectionやarticleなどのセクショニングコンテンツを補助する役割として使うことが望ましいのではないかと思います。

またarticleのなかにasideを使うのも役割としてはおかしいような。

2010年07月06日 21:28

MIYA

MIYA

自分も何を使うべきなのかけっこう悩んだ所なんですよね…

こういう時はfooter要素を使うべきなんですかね?

2009年09月25日 00:21

通りすがり

通りすがり

aside要素の使い方が気になります。

2009年09月24日 13:26

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article