概要
従来よりも大幅に範囲が広がり，機能が強化されたHTML5。本書はそのうちのコアである「文書のマークアップ」に特化した入門書です。
HTML5では，より柔軟・正確に文書の構造・意味付けを表現できるようになりました。そして，それに伴い，多くの新要素・属性が採用され，また従来の要素・属性にも多くの変更が加えられました。
本書では，第1部でまずこうした要素・属性を解説した上で，第2部では一般的な企業Webサイトで使われるモジュール（パーツ）を例にとり，具体的なマークアップ法を紹介します。
こんな方におすすめ
- Webデザイナー
- HTMLコーダー
- マークアップエンジニア
- Webディレクター
目次
Part1 HTML5入門
Chapter1 HTML5へようこそ
1.1 マークアップってなんだろう
1.2 HTML5はなぜ生まれたか？
- HTMLのなりたち
- テーブルレイアウト
- CSSレイアウト
- HTML5策定の背景
1.3 HTML5でできるようになること
1.4 利用にあたっての懸念
- HTML5の策定状況
- ブラウザの実装状況
- アクセシビリティ
Chapter2 HTML5のポイント1 ～文書構造～
2.1 要素の読み方
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参考リンク集
サポート
ダウンロード
- ダウンロード
- フルサイズ版（約125MB）
- ライト版（約11MB）
上記のファイルのいずれかをダウンロードして解凍した後，index.htmlファイルをWebブラウザで開いてください。
サンプルファイルの表示を確認できます。ソースコードはWebブラウザの［ソースを表示］などでご確認ください。
ライト版は，サイズの大きいビデオファイルを割愛したものです。第3章の「3-2 埋め込みコンテンツ」の「video要素」以外のサンプルはすべて表示・確認できます。「video要素」のサンプルを確認したい場合にはフルサイズ版をご利用いただくか，ビデオファイルを下記のとおりのフォルダ構成，ファイル名，ファイル形式でご用意ください。
- /new_comer/video/video.mp4（動画フォーマット：MPEG4）
- /new_comer/video/video.ogv（動画フォーマット：ogg/theora）
サンプルファイルについて，一般的な環境においては特に問題のないことを確認しておりますが，万一障害が発生し，その結果いかなる損害が生じたとしても，小社および著者はなんら責任を負うものではありません。また生じた損害に対する一切の保証をいたしかねます。必ずご自身の判断と責任においてご利用ください。