HTML５

投稿日：

プロジェクトでHTML５を使うことになったんですが、いままでちゃんとHTML５を勉強していなかった^^;

jQueryなどを扱ってると、「あぁ、これはHTML5のタグか」何てことは多々ありましたが、あまり気に留めずそのまま使ってましたね。

そういうわけでHTML5について少し復習してみます。

いままでと何が違うの？

これまでのHTMLは、論文のような文書の構造を示すためのマークアップ言語やその仕様であり、必ずしも「Webアプリケーション」を作るのに適切ではありませんでした。

HTML5ではマークアップ言語としてだけでなく、「Webアプリケーション」のプラットフォームとして、関連するAPIなども含む仕様となっています。

「Webアプリケーション開発に適したHTML」と言えるのではないでしょうか。

勉強し直さないとダメ？

HTML5は、これまでのHTMLとXHTMLを統合した規格であり、後方互換性を強く意識したものになっているようです。ですのでこれまでの知識はそのまま使えます^^文法もHTMLで記述してもXHTMLで記述しても問題ないようです。

しかし、HTML5から追加された新要素や、廃止された要素もありますので、これらは要確認ですね。

簡単な比較をしてみる

以下にHTML4.01とHTML5で記述したものを比較してみました。

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html4.01å</title>
</head>
<body>
	<div id="container">
	<div id="header">header</div>
	<div id="nav">nav</div>
	<div id="main">
		main
	</div>
	<div id="footer">footer</div>
	</div>
</body>
</html>

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5</title>
</head>
<body>
	<div id="container">
	<header>header</header>
	<nav>nav</nav>
	<main>
		main
	</main>
	<footer>footer</footer>
	</div>
</body>
</html>

このなかで大きく変更したのは以下。

  • DOCTYPE宣言の簡略化
  • chaset宣言の簡略化
  • 文書構造を表す新要素の使用

DOCTYPE宣言のchaset宣言の簡略化で簡単に暗記できるようになりましたね。特にDOCTYPEは覚えるの諦めてましたから-_-;

<header>要素などの新要素を使うとこれまでの<div>タグとID・classを使用する方法よりもスッキリしますね。

この例では<head>や<body>などのタグは記載していますが、HTML5の仕様では、マークアップ前後の状況によっては<html>、<head>、<body>、<tbody>、<colgroup>が省略可能であると定義されています。また、</p>などの終了タグも省略可能なんだとか……でもあんまり省略しすぎるとわけわからなくなりそうですよね^^;

まだまだ変わった点はたくさんありますので、CSSを含め少しずつまとめていきたいと思います！

参考文献はこちら

カテゴリー:WEB タグ:

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Translate »