HTML5について
HTML5の概要
・2014年10月29日にW3Cから正式にHTML5が勧告されたので、
これから作るサイトはHTML5で。
・HTML4.01でかいた既存サイトはそのままで、特に書き直す必要はない
・HTML5 の大きなメリットと特徴の１つは文書の構造化と意味付け
HTML5のタグ
・DOCTYPE宣言文は、 <!DOCTYPE html>
とてもシンプルになった
言語コード <html lang=”ja”>
文字コード <meta charset=”UTF-8″>
スタイルシート <link rel=”stylesheet” href=”style.css”>
スクリプト <script src=”sample.js”></script>
・スタイルシートやjavascriptなどのタイプ属性、
例えば「type=”text/javascript”」は省略できるようになった
（HTML5のscript要素のtype属性の初期値が”text/javascript”なので。type属性の値が”text/javascript”に限る）
・html5に対応したリセットCSSでよく使われているもの
https://code.google.com/archive/p/html5resetcss/downloads
IE8以下への対応
IE8以下は、例えば「header」「aside」「footer」「section」「article」等のHTML5のタグは未知の要素として扱われ、これらをタグとして認識してくれない。
・このように、IE8以下はHTML5に対応していないが、Google Codeで公開されているhtml5shivスクリプトを利用すればIE8以下でも、HTML5のページを表示することが可能になる。
head要素内に次の内容を記述すればOK。
これはスタイルシートの読み込み前に認識させること
（スタイルシートよりも上に書く）
<!– [if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
上記のコードをhead内に記述するのがいやであれば、
・IE8以下にも対応するため、
headerタグやfooterタグにはクラス属性をつけず、
それらの中にdivタグを作って、それにクラス属性をあててcssを当てる。
→こちらを採用
HTML5の新要素で使いそうなもの
新しい要素
| 要素 | 概要 |
|---|---|
| header | ヘッダに。ページ内に複数も可能。 |
| article | ページのメインコンテンツ（記事）に。 |
| aside | 余談。補足情報。メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表す。例えば、サイト以外の広告のリンクやブログパーツや外部リンク集など |
| nav | サイト内のサイトリンク・ページ内リンクの集まりに。グローバルナビやぱんくずリスト、サイドバーに。 |
| section | 一般的なセクション。意味的なひとまとまり。わりと漠然としている。それぞれのセクションの意義が明確な場合には、上記のarticleやaside、navなどを利用したほうが良い。 |
| footer | フッタに。 |
| figure | 図表、イラスト、写真に。 |
| figcaption | 図表の説明 |
| small | 免責・警告・著作権など。コピーライトの部分とか。html4とは意味付けがかわった |
| time | 日付や時刻に。 |
html4からあったのに個人的に使ってなかった要素↓
| 要素 | 概要 |
|---|---|
| address | 連絡先・問合せ先を表す |
| blockquote | 引用・転載 |
「hgroup」は廃止が決まったとのこと。