今回は僕がHTML5を勉強するにあたりもう一つのブログ「HTML5でサイトをつくろう」でまとめたページをまとめました。初めて作るならここからやるといいかなとおもったHTML5の新要素、コンテンツモデルやアウトラインについて、xhtmlとHTML5で同じフォーマットをマークアップして違いを比べたりしました。

現在WEB制作で仕事をしながら勉強している人やゼロからやってみようと思う人に仕様書を全部読む前でもまずはここからやってみると良いかなと範囲をまとめてみました。初めのきっかけに参考にしていただけれたらうれしいです。

目次というかカテゴリはこのようになります。

• はじめてHTML5を使う際にまず見ておきたい
• HTML5になってから変更された考え方についてのまとめ
• HTML5新要素一覧のまとめ
• xhtml1.0とHTML5で簡単なサンプルを作成しながら比較していくまとめ

はじめてHTML5を使う際にまず見ておきたい

はじめてのHTML5　第1回『HTML5の基本の書き方を覚える』

http://www.html5-memo.com/first-html5/html5-001/

はじめてのHTML5　第2回『HTML5のさらに詳しいCSSリセット方法』

http://www.html5-memo.com/first-html5/html5-002/

はじめてのHTML5　第3回『HTML5の新要素をIEでも対応させる方法』

http://www.html5-memo.com/first-html5/html5-003/

HTML5になってから変更された考え方についてのまとめ

HTML5のカテゴリーについて / HTML5マークアップ時の基本

http://www.html5-memo.com/basic/rule-001/

『コンテンツ・モデル』について / HTML5マークアップ時の基本

http://www.html5-memo.com/basic/rule-002/

『アウトライン』について / HTML5マークアップ時の基本

http://www.html5-memo.com/basic/rule-003/

HTML5新要素一覧

『header要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/header/

『footer要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/footer/

『hgroup要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/hgroup/

『nav要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/nav/

『aside要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/aside/

『section要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/section/

『article要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/article/

『time要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/time/

『figure要素』 / HTML5新要素一覧

http://www.html5-memo.com/new-element/figure/

【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！

http://www.html5-memo.com/form/input_type/

【HTML5 フォーム】formタグのinput要素に新たに追加された8つの新属性をまとめました！

http://www.html5-memo.com/form/input_contents/

絶対に覚えておきたいHTML5の『audio要素』超基本を知る!!

http://www.html5-memo.com/audio/player001/

『canvas』要素の勉強をする時の参考サイトまとめました / HTML5『canvas』要素基礎

http://www.html5-memo.com/canvas/site/

xhtml1.0とHTML5で簡単なサンプルを作成しながら比較する記事をまとめました

HTML5は難しくない?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】

http://www.html5-memo.com/html5/html5_01/

HTML5は難しくない?　HTML5から追加された新要素を理解しよう！【初級編：HTML5のマークアップ】

http://www.html5-memo.com/html5/html5_02/

HTML5のアウトラインって何？xhtmlとHTML5のコードを比較してアウトラインを理解しよう！

http://www.html5-memo.com/html5/html5_03/

ほとんどCSSは変えずにxhtmlとHTML5で同じレイアウトの作成と作りながら悩んだことまとめました【サンプルソース付】

http://www.html5-memo.com/html5/html5_04/

FlashからEdge?Adobe Edgeを使ってみる！　『インストール方法からサンプルコンテンツ作成まで』

http://www.html5-memo.com/edge/sample001/

MdN Design Interactive連載

MdN Design Interactiveにて『ゼロからはじめるHTML5でのサイト制作』連載スタートいたします

http://www.html5-memo.com/mdn/mdn01/

【MdN Design Interactive連載連載　第2回目】xhtmlからHTML5で使い方が変更された要素（タグ）のまとめ

【MdN Design Interactive連載連載　第2回目】xhtmlからHTML5で使い方が変更された要素（タグ）のまとめ

【MdN Design Interactive連載連載　第3回目】HTML5で新しく定義された新要素をまとめよう

http://www.html5-memo.com/mdn/mdn03/

おまけ

HTML5で制作された国内企業サイト20から現状の制作状況を知る!!

http://www.html5-memo.com/html5-site/links/