HTML5 スタンダード・デザインガイド

はじめに

長かったHTML5の策定作業も、いよいよゴールが見えてきました。

HTML5は従来のHTML/XHTMLに置き換わる、新しいHTMLとして開発が続けられてきました。しかし、拡張によって進化してきたこれまでのHTML/XHTMLとは異なり、セマンティクスという新たな概念を取り込みつつ再構築されているため、従来と同様に扱おうとすると戸惑うことが少なくありません。

HTML5はそのポジションが大きく変わってしまったため、従来の視点からHTML5を眺めてしまうと、見通しが非常に悪いのです。しかし、これまでのHTML/XHTMLの知識をちょっと脇に置いて、HTML5の視点に立ってみると、この新しいHTMLが長い年月をかけて緻密に作り上げられていることが見えてきます。

そして、この緻密さの基礎となっているのが「セマンティクス」です。
このセマンティクスという考え方は、新しく追加されたセクショニングやmicrodataなどの機能に限らず、すべての要素に込められており、これまでのビジュアルによるコンテンツデザインとは異なる、セマンティクスによるコンテンツデザインを実現します。
そして、このセマンティクスによるコンテンツデザインは、Webの新たな可能性を生み出す、HTML5の最も重要なテーマだといえるでしょう。

そこで本書では、HTML5の視点から、HTML5を理解することを目標に各要素に関する解説を行っています。また、セマンティクスによるコンテンツデザインを行う上で必要となる情報も、可能な限り盛り込みました。

HTML5の勧告候補もリリースされ、HTML5も一区切りがつきました。この機会にHTML5の視点に立ったウェブデザインをはじめてみてはいかがでしょうか。

掲載した要素

本書ではW3CのHTML5に採用された要素を項目として取り上げています。また、HTML5.1やHTML Living Standardで採用された要素や属性についても紹介していますので参考にしてください。

対応ブラウザ

本書では、要素ごとにiOS、Android、Firefox、Safari、Chrome、Opera、Internet Explorerにおける対応状況を示しています。また、必要に応じて古いバージョンの対応状況についても掲載しています。

　　セクションとアウトライン
　　独立したコンテンツ　article
　　セクション　section
　　ナビゲーション　nav
　　補足・関連情報　aside
　　見出し　h1 / h2 / h3 / h4 / h5 / h6
　　見出しのグループ化　hgroup
　　ヘッダーとフッター　header / footer
　　汎用要素　div / span

Chapter4 メタデータ

　　ページタイトル　title
　　リンクに関する設定　base
　　関連URL　link
　　メタデータ　meta
　　コンテンツの内容をより詳細に明示する
　　microdata（マイクロデータ）
　　RDFa
　　microformats（マイクロフォーマット）

Chapter5 外部コンテンツ

　　画像　img
　　インラインフレーム　iframe
　　外部コンテンツ　object / param
　　外部コンテンツの組み込みポイント　embed
　　ビデオ/ オーディオ　video / audio / source
　　テキストトラック　track
　　イメージマップ　map / area
　　Canvas　canvas
　　SVG　svg
　　MathML　math

Chapter6 段落書式

　　段落　p
　　段落レベルの区切り　hr
　　連絡先・問い合わせ先　address
　　引用　blockquote / q
　　整形済みテキスト　pre
　　リスト　ol / ul / li
　　関連リスト　dl / dt / dd
　　図版とキャプション　figure / figcaption

Chapter7 文字書式

　　リンク　a
　　略語　abbr
　　定義　dfn
　　作品のタイトル　cite
　　日時　time
　　コンピュータ関連　code / var / samp / kbd
　　上付き・下付き　sup / sub
　　但し書き・注意　small
　　重要　strong
　　強調・強勢　em
　　変更・更新した情報　s
　　語句の区別　i / b / u
　　ハイライト　mark
　　ルビ（ふりがな）　ruby / rt / rp
　　双方向アルゴリズムの変更　bdo
　　双方向アルゴリズムの隔離　bdi
　　追加・削除　ins / del
　　改行　br
　　改行を認める箇所　wbr

Chapter8 テーブル

　　テーブル　table / tr / th / td
　　テーブルのキャプション　caption
　　列のグループ　colgroup / col
　　行のグループ　thead / tbody / tfoot

Chapter9 フォーム

　　フォーム　form
　　ラベル　label
　　フォームコントロールのグループ　fieldset / legend
　　データの入力・送信　input
　　ボタン　button
　　選択肢　select / option / optgroup
　　入力候補　datalist
　　複数行のテキスト　textarea
　　暗号鍵　keygen
　　計算結果　output
　　進捗状況　progress
　　メーター　meter

Chapter10 インタラクティブ

　　付加的な情報　details / summary
　　コマンドリスト　menu / command
　　ダイアログボックス　dialog

APPENDIX

　　HTML5の構文規則
　　HTML5の文法チェック
　　未対応ブラウザへの対応
　　グローバル属性
　　要素＆ブラウザ対応一覧
　　逆引き索引
　　索引