RASUKU

iPhone大好きな管理人「らく」がiPhoneやMac等のApple関連の情報、アプリ、鹿児島についてなどオススメすることをお届けするブログ。

HTML5 プログラミング

初心に返って覚えるHTML5 2回

投稿日:

前回は、HTML5とは何なのかを見ていきましたが、今回は、従来のHTMLとHTML5の違いを見て行きたいと思います。

目次
マークアップの違い
基本文書の書き方の違い
対応していないブラウザ対策
まとめ

マークアップの違い

従来のHTMLとHTML5はどこが違うのか詳しく見ていこうと思います。

従来のWebサイトのマークアップは、

div id = "header"

div id = "global-nav"

div id ="contents" div id = "sidebar"

div class ="post"   div id = "siteinfo"

div class = "post"  div id = "bnr"

div id = "footer"

とdiv要素で囲んでマークアップし、それにclassやid要素でそれぞれの内容に応じて名前をつけていました。ここで重要なのは、div要素は意味を持たない要素だったという点です。そのため、div id = "header"と私たちが見ればヘッダーなんだなぁと分かるが、ブラウザや検索エンジンからすれば「?」でヘッダーと認識することはできませんでした。

HTML5のマークアップは、

header

nav

div id = "contetns" div id = "sidebar"

section

article    section

article    aside

footer

と新たに要素が追加されたことにより私たちから見てもheaderはヘッダーと認識されるようになりました。同様にfooterもフッターと認識されます。これにより、書かれた内容が文章上でどのような役割を担っているかを人間だけでなく、ブラウザや検索エンジンに認識させることができるようになりました。

基本文書の書き方の違い

HTML5から基本文書の書き方がかなりシンプルになりました。見比べて行きたいと思います。

DOCTYPE宣言

まずは、DOCTYPE宣言です。

従来のhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5
<!DOCTYPE html>

エンコーディング

続いて、エンコーディングです。

従来のhtml要素と文字エンコーディング
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5のhtml要素とエンコーディング
<html lang="ja">
<head>
<meta charset="UTF-8">

かなり簡単になりましたね。

対応していないブラウザ対策

対応していないブラウザ…IE6からIE8はHTML5の新要素に対応していないので、新しい要素がレンダリングされないためスタイルを適応することができないという問題が起こってしまいます。

そこで、JavaScriptを用いて新たに要素を作成します。Remy Sharp氏が公開した『html5.js』というライブラリをインポートすることがもっとも簡単なのでこちらを使います。

1
2
3
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

まとめ

まとめるとこうなります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->
</head>
<body>
//ここにサイトに表示するコンテンツ内容を記述
</body>
</html>
ここで頭のキレる人は従来の宣言文をHTML5仕様に変えればHTML5になると考えるかと思います。正解ですといいたいですが、本来のHTML5のアウトラインや新要素を理解したマークアップにしないといけませんので30点です。
次回は、HTML5で使い方が変更された要素を見ていきたいと思います。

おすすめ記事

-HTML5, プログラミング

Copyright© RASUKU , 2018 AllRights Reserved Powered by AFFINGER4.