html4.01からhtml5への変更をしてみた
(2)
(0)
(0)
(0)
Total: 2
2009年 9月26日
HTML, 初心
動機とか
会社で何やらHTML5を触る感じになりそうだったので、ちょっと色々調べるついでにBlogに書いてみます。
基本的にはHTML4.01からHTML5に変更するにはどう書けばいいのかってことに重点を置いてみます
変更前 html4.01のソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>kzms2 - html4.01</title>
<link href="master_h4-090925.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="header">
<h1>kzms2 - html4.01</h1>
</div><!-- /#header -->
<div id="navi">
<ul><li><a href="#">コンテンツ1</a></li><li><a href="#">コンテンツ2</a></li><li><a href="#">コンテンツ3</a></li></ul>
</div><!-- /#navi -->
<div id="contents">
<div id="main">
<div class="box">
<h2>メインのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
<div class="box">
<h2>メインのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
</div><!-- /#main -->
<div id="sub">
<div class="box">
<h2>サブのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
<div class="box">
<h2>サブのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</div><!-- /.box -->
</div><!-- /#sub -->
</div><!-- /#contents -->
<div id="footer">
<address>Copyright © kzms2 All Rights Reserved.</address>
</div><!-- /#footer -->
</body>
</html>
ソースを基にしてHTML5への変更をどう加えればいいのかと色々とhtml5に関連するサイトを見て回ることに
- HTML 5 における HTML 4 からの変更点
- HTML 5 の新要素
HTML 5 は、2000年以降初めて、HTML に新しい要素を導入します。新しい構成要素には aside と figure、そして section があります。新しいインライン要素には time と meter、そして progress があります。新しい埋め込み要素には video と audio があります。新しい対話要素には details と datagrid、そして command があります。
なるほどなるほど。
上にある参考にしたサイトを見る限りでは、以下の3点に気をつければ良さそう
- 1行目のdoctype宣言の変更
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">を簡略化
- headerとnaviとfooterに関してはdivを使用しない
- divを出来るだけ使わずに、sectionとarticleを使用する
変更後 html5のソース
上のサイトを参考にして、実際に変更を加えたのが以下のソース。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>kzms2 - html5</title>
<link href="master_h5-090925.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<h1>kzms2 - html5</h1>
</header>
<nav>
<ul><li><a href="#">コンテンツ1</a></li><li><a href="#">コンテンツ2</a></li><li><a href="#">コンテンツ3</a></li></ul>
</nav>
<section id="contents">
<section id="main">
<article>
<h2>メインのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
<article>
<h2>メインのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
</section><!-- /#main -->
<section id="sub">
<article>
<h2>サブのコンテンツ</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
<article>
<h2>サブのコンテンツその2</h2>
<p>何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。何らかの文章。</p>
</article>
</section><!-- /#sub -->
</section><!-- /#contents -->
<footer>
<address>Copyright © kzms2 All Rights Reserved.</address>
</footer>
</body>
</html>
とこんな感じに。
骨組みのdivは新要素のheaderとnavとfooterとsectionに割り振って、box扱い（？）していたdivをarticleに変更しました。
なーんだこれでいいのかなーなんて思って色々見ていたら何やら雲行きが怪しい。。。
- HTML5を今日のブラウザで使う – Operaのエバンゲリストが実験
sectionなどのネストで、h1だけでも見出しにレベルが自動的に割り当てられるようになる
- HTML5.JP 4.4.2 section 要素
section 要素を利用することで、ウェブ制作者はどこにでも h1 要素を使うことができるようになる点に注目してください。該当ののセクションが、トップ・レベルなのか、第2レベルなのか、第3レベルなのかどうかについて心配する必要はありません。
「h1が複数あっていい」と書いてありますね（汗
しかもarticleの考え方がもしかしたらちょっと違うのかもしれません。。。
うーんこれはhtml4.01の考えを引きずっていたらダメなのかも知れないですね。
また引き続き調べて判ったら追記なり新しいエントリーでも書くことにしてみます。
ちなみに実際のソースは以下においておきます。
なんかhtml5になったらもっと大変になりそうな気がしてきました…！
html5が落ち着いたらCSS3なりcanvasタグについて書いてみようかななんて思っています。
