構造
.html
<!DOCTYPE...>
<html>
<head>
ヘッダ情報
</head>
<body>
コンテンツ内容
</body>
</html>
- 特に変更はなし
HTMLとXHTML
- HTML5 でコーディングを行う際、HTML で記述するか、XHTML で記述するかを選べる
- HTML 文法の仕様は
HTML5、XHTML 文法の仕様はXHTML5と呼ばれている
HTMLシンタックスの記述方法
HTML5 文書の DOCTYPE 宣言
.html
///HTML 4.01 Transitional DTD のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
///HTML5 のDOCTYPE宣言
<!DOCTYPE html>
- ファイルの一行目に以下を記入する
- 必ず宣言すること
文字エンコーディングの指定
.html
//HTML4以前のUTF-8指定
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
//HTML5のUTF-8指定
<meta charset="UTF-8">
- これまでどおり Content-Type を指定することも可能だが、1つの HTML ファイルには、上の宣言のどちらかのみを含めるようにすること
終了タグを記述してはいけない要素
area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source
XHTMLシンタックスの記述方法
ここでは XHTML5 を用いたマークアップのルールを紹介する
XHTML文書のMINEタイプ
-
text/xml、application/xml、もしくは末尾が+xmlで終わるMINEタイプになる
XHTMLの名前空間
- XHTML1.x の場合と同じく
http://www.w3.org/1999/xhtmlとなる
XHTML文書のDOCTYPE宣言
- XHTML に DOCTYPE 宣言を含めることは許されているが、HTML5 には公式 DTD が存在しない
XHTMLを用いたマークアップの例
.XHTML
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落１</p>
<input type="text" disabled="disabled" />
</body>
</html>
HTML5の新要素
文書構造に関するもの
| 要素 | 意味 |
|---|---|
| section | 汎用的なセクション。文書のアウトラインを構成する |
| article | セクションの一種で、Webページから独立したコンテンツを表す |
| aside | セクションの一種で、外側のセクションに対する補足情報を表す |
| nav | セクションの一種で、外側のセクションに対するナビゲーションメニューを表す |
| footer | セクションのフッター |
| header | セクションのヘッター |
| hgoupe | 複数の見出し（h1〜h6）をまとめる |
外部コンテンツの埋め込み
| 要素 | 意味 |
|---|---|
| figure | キャプションを伴うような内容のものを文書中に埋め込む際に使用 |
| video | 動画プレーヤ |
| audio | 音声プレーヤー |
| source | video/audio に対して、リソースの URL やタイプを指定する |
| canvas | ビットマップキャンパス |
| embed | プラグインで実行するコンテンツの埋め込み |
フォーム
| 要素 | 意味 |
|---|---|
| keygen | 公開鍵暗号方式のキーペアを作成する |
| output | 画面出力されるフォーム要素 |
| progress | 進捗状況を表す（プログレスバー） |
| meter | メーター |
テキスト・その他
| 要素 | 意味 |
|---|---|
| mark | Web ページの糸とは異なる文脈での強調 |
| ruby/rt/rp | 感じのよみがな等を表す「ルビ」を指定する |
| time | 日付や時刻を表す |
| command | メニューアから実行されるコマンド |
| datalist | オートコンプリートの候補など、データのリストを保持するのに用いられる |
HTML5で廃止された要素
html5リファレンス 廃止タグ一覧
http://www.tagindex.com/html5/basic/abolished.html
HTML5レイアウトサンプル
.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="sample.js"></script>
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</body>
</html>
IE8以下の対応
IE8以下はHTML5に対応していませんがGoogle Codeで公開されているhtml5shivスクリプトを利用すればIE8以下でもHTML5のページを表示することが可能になります。
head要素内に以下の内容を記述します。
*JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。
参考
参考書籍：「HTML5 & API 入門」白石俊平著
参考サイト：Webデザインラボ（http://www.webdlab.com/html/html5/）