Part1　HTML5入門

Chapter1　HTML5へようこそ

1.1　マークアップってなんだろう

1.2　HTML5はなぜ生まれたか？

• HTMLのなりたち
• テーブルレイアウト
• CSSレイアウト
• HTML5策定の背景

1.3　HTML5でできるようになること

• HTML
• JavaScript

1.4　利用にあたっての懸念

• HTML5の策定状況
• ブラウザの実装状況
• アクセシビリティ

Chapter2　HTML5のポイント1 ～文書構造～

2.1　要素の読み方

• 要素？　タグ？
• 要素を構成する5つの情報

2.2　構文

• DOCTYPE宣言
• 要素名の大文字／小文字
• 終了タグのない要素の扱い
• 属性の記述
• 開始／終了タグの省略

2.3　土台となるHTML

• DOCTYPE宣言
• html要素
• meta要素
• link要素
• script要素
• 土台となるHTML

2.4　セクション

• HTML4による文書構造作成の問題点
• HTML4とHTML5の階層構造の比較
• HTML5でのアウトラインの作られ方
• 自己完結した内容を示すarticle要素
• ナビゲーションを示すnav要素
• ドキュメントやアプリケーションを区分けするsection要素
• 記事本体から外れている内容を示すaside要素
• 勘違いしやすいheader要素とfooter要素

2.5　見出し

• 見出し要素のランクによる階層構造の問題点
• 見出し要素による構造から，セクショニング・コンテンツによる構造へ
• アウトラインから見出し要素を隠すことができるhgroup要素

2.6　テキスト

• 包容力のあるa要素
• 重要性はstrong要素，強調はem要素
• 細かく使い分けるb要素，i要素，mark要素
• 細目に使うsmall要素
• テキストの意味付けをする要素の一覧表

2.7　使えなくなる要素／属性

• 使えなくなる要素
• 使えなくなる属性

Chapter3　HTML5のポイント2 ～Webアプリ，埋め込みコンテンツ，フォーム～

3.1　Webアプリケーション

• ツールバーを作るmenu要素，command要素
• 追加情報を表示するdetails要素，summary要素
• contextmenu属性
• draggable属性
• dropzone属性

3.2　埋め込みコンテンツ

• 動画や音楽を再生するaudio要素，video要素
• スクリプトを使って図を表示するcanvas要素
• hidden属性

3.3　フォーム関連

• 新しいユーザーインターフェイスが追加されたinput要素
• フォーム関連の要素に追加された属性
• テキストボックスの入力補助をするdatalist要素
• ある範囲内の測定値を示すmeter要素
• 計算結果を示すoutput要素
• タスクの進行度を示すprogress要素

Part2　HTML5実践

Chapter4　　Webサイト共通モジュールのマークアップ

4.1　ヘッダ

• ヘッダの適切なマークアップ
• ロゴとタグラインを入れる
• お問い合わせ，サイトマップ，サイト内検索を入れる
• サイト内検索に入力例を表示

4.2　フッタ

• フッタ枠の適切なマークアップ
• 「個人情報保護方針」「このサイトについて」ページへのリンクを入れる
• 問い合わせ用メールアドレスへのリンクを表示
• コピーライト表記を入れる

4.3　ナビゲーション

• グローバルナビゲーションの作成
• パンくずナビゲーションの作成
• ページ内リンクの作成
• カテゴリー内移動ナビゲーションの作成
• サブコンテンツの作成

4.4　メインコンテンツ

• セクショニングを意識したマークアップ

4.5　コンテンツエリア

• コンテンツエリアのマークアップ

4.6　共通モジュール一覧

Chapter5　個別ページのモジュールのマークアップ

5.1　企業情報

• セクショニング・コンテンツの適切なマークアップ
• 読み方の難しい名前にルビをふる

5.2　実績トップ

• 実績を絞込み検索するための入力フォームの作成
• 検索結果として，サムネイル，案件名，カテゴリー，リリース年月を表示する
• 検索結果が多いときのためにページネーションを表示する

5.3　実績詳細

• コンテンツのセクションを適切にマークアップする
• コンテンツのヘッダ，フッタを適切にマークアップする
• 画像とキャプションを関連付ける
• 動画を埋め込む
• 動画に字幕を挿入する

5.4　ニュースリリーストップ

• コンテンツのセクションを適切にマークアップする
• 記事の日付，タイトルを入れる
• 各記事の全体をリンク範囲にする
• ページネーション（「古い記事へ」「1」「2」「3」「新しい記事へ」など）を入れる
• サブコンテンツにカテゴリー，月別アーカイブ，フィードのリンクを入れる

5.5　ニュースリリース詳細

• 記事本体とコメント／トラックバックのセクションを適切にマークアップする
• タイトルとサブタイトルを適切にマークアップする
• コメントをマークアップする
• コメント入力欄で必須入力とメールアドレス／URLの入力をマークアップする
• トラックバックをマークアップする

5.6　お問い合わせ

• コンテンツのセクションを適切にマークアップする
• 電話番号，FAX番号を適切にマークアップする
• 「メールアドレス」「年齢」「電話番号」の入力フォームを適切にマークアップする
• 入力フォームの「名前」「なまえ」「メールアドレス」「問い合わせ内容」は必須入力項目にする
• 入力フォームの注意書きを適切にマークアップする
• 「年齢」は入力の自動補完をしないようにする
• 「入力内容の確認」ボタンと「入力内容の保存」ボタンのクリック時は，それぞれ別のアクション先を指定する
• 「入力内容の保存」ボタンのクリック時は入力値のチェックをしないようにする
• ユーザーが入力フォームの最初の入力項目をすぐに記入できるようにする

Appendix

• 付録1　HTML4からHTML5への変更点
• 付録2　HTML5に記載されている一覧表
• 付録3　各ブラウザのHTML5実装度一覧表
• 付録4　HTML5参考リンク集