【第2回】HTML5とHTML4,XHTMLの違いその1:構文
Posted by 寺西 裕紀 | 12月 8, 2011 | No Comments
HTML5を始めるにあたり最初に覚えておくべきことはこれまでのマークアップ言語、すなわちHTML4,XHTML1.0との違いだ。HTML5とHTML4,XHTMLとの違いを知ることでHTML5の理想的な設計に沿ったマークアップをすることができる。今回は構文の違いについて説明する。
DOCTYPE
HTML5ではDOCTYPEが非常にシンプルになった。これまではHTMLのバージョンやDTDへの参照のためDOCTYPE宣言は非常に長かったが、HTML5ではブラウザで標準モードでレンダリングされるためだけに使用される。
<!DOCTYPE html>
HTML構文とXML構文
HTML5ではHTML構文とXML構文のどちらかの構文に準拠した記述をするか選択できる。
HTMLドキュメントの例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ドキュメントの例</title>
</head>
<body>
<p>段落の例</p>
</body>
</html>
XMLドキュメントの例:
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ドキュメントの例</title>
</head>
<body>
<p>段落の例</p>
</body>
</html>
HTML構文に準拠した記述であってもXHTMLのように空要素br,hrなどを<br />,<hr />と記述することができる。
文字エンコーディング
HTML5では文字エンコーディングの指定もシンプルになった。
<meta charset="UTF-8" >
HTML構文に準拠した記述の場合に限り以下の旧来の記述方法も許容される(XML構文では不可)。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
なおHTML5仕様では”UTF-8″を強く推奨している。”Shift-JIS”,”EUC-JP”は非推奨なので特に理由がない場合UTF-8を指定するべきだ。
MathMLとSVG
MathMLやSVGはXMLベースの仕様であるので基本的にXHTMLでしか利用することができなかったが、HTML5では直接マークアップすることが可能となった。
緑色の円:
<svg><circle r="50" cx="50" cy="50" fill="green"/></svg>
構文チェック
最後にHTML5マークアップが仕様に準拠しているかどうかチェックしてくれるバリデータの紹介をする。
■参考URL: