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">

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

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

MIYA

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

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

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

2010年08月18日 18:46

雀

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

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

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

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

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

2009年09月24日 13:26

CSS3、HTML5、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

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

XHTML使用

XHTML

HTML5

IE で HTML5 を使う際の指定

HTML5

今回使用したHTML5タグ

XHTMLとHTML5の違い

1. DOCTYPE 宣言と文字コードの設定の記述

XHTML

HTML5

2. 半角スペース/が必要ない

XHTML

HTML5

3. HTML5から導入されたタグ

XHTML

HTML5

注意点やまとめ

HTML5に関する記事

HTML5で組んでる人

Track Back URL

Comments

Comment Form