HTML5の基礎知識


## 構造

```.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/）