HTML5の新機能、HTML4との違い
HTML5での文法／コンテンツモデル
ここでは、HTML5の基本文法を、HTML4／XHTMLからの変更部分にフォーカスして説明します。
（1）DOCTYPE宣言
ブラウザに「標準モード」（＊）を使用させたい時にはDOCTYPE宣言の記述が必要です。HTML5では、DOCTYPE宣言の記述が簡潔になりました。
＊）CSSを仕様通りに解釈するレンダリングモードの事です。
[サンプル]HTML 4.01 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[サンプル]HTML5
<!DOCTYPE html>
一方、XHTMLでは、以下のように記述できます。
[サンプル]XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[サンプル]XHTML5
<!DOCTYPE html>
XHTML（eXtensible HyperText Markup Language）はXML（eXtensible Markup Language）に準拠するようHTMLを定義しなおしたものです。XHTMLはHTMLよりも厳格な文法で、拡張にも適したXML文書としても扱えるので、一般的なXMLデータ処理プログラムで扱いやすいというメリットがあります。
W3Cは、HTML5の前にXHTMLを次世代のHTML標準規格として普及させようとしていましたが、HTML4.01から乗り換えるメリットは少なく、既にHTML4.01が広く使用されていたためにあまり普及していませんでした。HTML5ではXHTMLも取り込まれており、XMLの文法でも同じドキュメントを記述できるようになっています。これを、XHTML5と呼びますがXHTML5という仕様があるわけではありません。こちらの書き方でもDOCTYPE宣言が簡素化されています。
（2）エンコーディング
エンコーディング指定が簡潔になりました。HTML5では、エンコーディングはutf-8が推奨です。従来の記述も利用できます。
[サンプル]HTML 4.01 Transitional
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
[サンプル]HTML5
<meta charset="utf-8">
（3）コンテンツモデル
コンテンツモデルとはその中にどんな他の要素やテキストを含める事ができるか等の観点で要素を分類したものです。従来のHTMLにもブロック要素やインライン要素などの区別がありましたが、HTML5のコンテンツモデルはこれをより厳密に定義したものと考えれば良いでしょう。正しいマークアップを行うには、それぞれの要素がどの分類に属するかを知っている事が重要です。
コンテンツモデルには、7つのカテゴリがあります。複数のカテゴリに属する要素もあります。詳しくは、コンテンツモデルなども参照してください。
表1：コンテンツモデル
| カテゴリの名称 | 説明 | 含まれる主な要素 |
|---|---|---|
| メタデータコンテンツ(Metadata content) | ブラウザの表示されない文書のメタデータを定義する要素。他の文書との関係などを表す。 | base, command, link, meta, noscript, script, style, title |
| フローコンテンツ(Flow content) | ドキュメントやアプリケーションの本体で使用されているほとんどの要素 | 直下に含める事のできる全ての要素 |
| セクショニングコンテンツ(Sectioning content) | 見出しに対応した範囲「セクション」を定義する要素 | article, aside, nav, section |
| ヘッディングコンテンツ(Heading content) | セクションの見出しとなる要素 | h1, h2, h3, h4, h5, h6, hgroup |
| フレージングコンテンツ(Phrasing content) | 語句レベルの個別の要素、テキストをマークアップする要素 | フローコンテンツの要素のうち、以下のもの以外（セクショニング、ヘッディング、details、menu） |
| エンベッデッドコンテンツ(Embedded content) | 他のリソースを埋め込む要素、内容がHTML以外の言語によって記述される要素 | audio, canvas, embed, iframe, img, math, object, svg, video |
| インタラクティブコンテンツ(Interactive content) | ユーザーとの対話のために意図されている要素 | a, audio(controls属性あり), button, details, embed, iframe, img(usemap属性あり), input(type属性がhidden以外), keygen, label, menu(type属性がtoolbar), object(usemap属性あり), select, textarea, video, (controls属性あり) |
HTML5の追加／変更／廃止要素
HTML5では新機能を使用するために新しい要素が追加されています。
また、HTML5ではあくまでも見た目はスタイルシート（CSS）で指定すべきという思想から、見た目に関する要素や属性がいくつか変更・廃止されています。
HTML5で追加された要素
セクショニング関連要素や、マルチメディア埋め込み要素、ユーザーが操作できるUIを定義するインタラクティブ要素が追加されました。
表2：追加された要素
| 分類 | 追加された要素 | 説明 |
|---|---|---|
| 文章構造化 | section | 文書の構造を明示する要素。見出し要素h1～h6とともに使う事が可能 |
| article | ブログのエントリやニュース記事のように独立したセクションを示す要素 | |
| aside | 補足やバナーなどなくても文書全体には影響しないセクションを示す要素 | |
| hgroup | 複数の見出し要素h1-h6をまとめる要素 | |
| header | 文章やセクションのヘッダーを示す要素 | |
| footer | 文書やセクションのフッターを示す要素。作者・著作権の情報を含める事が可能 | |
| nav | 文書のナビゲーションがあるセクションを示す要素 | |
| figure | 例えば、画像とキャプションなどを1つのまとまりとして示す要素 | |
| figcaption | figure要素のキャプションを示す要素 | |
| テキストの意味づけ | mark | 文書内の文字列を参照のためにハイライトさせる要素 |
| time | 文字列が日付や時間である事を示す要素 | |
| data | 文字列がデータである事を示す要素 | |
| ruby | 漢字にふりがな（ルビ）をふるための要素 | |
| rt | ふりがな（ルビ）を指定する要素 | |
| rp | ルビに対応していないブラウザでルビを括弧に入れて表示するために括弧を記述する要素。ルビに対応するブラウザでは表示されない | |
| bdi | アラビア語など方向が異なるテキストにおいて、混乱しないように前後と隔離する部分を示す要素 | |
| wbr | 改行しても良い位置を指定する要素 | |
| リソース埋め込み | video | 動画ファイルを参照して埋め込む要素 |
| audio | オーディオファイルを参照して埋め込む要素 | |
| source | video/audio要素において、異なる形式の利用可能な複数のストリームを参照する要素 | |
| track | video/audio要素にテキストトラック（字幕）を提供する要素 | |
| embed | プラグインコンテンツを示す要素 | |
| canvas | 動的にビットマップグラフィックス記述するキャンバスを作成する要素 | |
| ユーザーとの対話 | command | ユーザーが呼び出し可能なコマンドを示す要素 |
| details | ユーザーがオンデマンドに参照できる追加情報を示す要素 | |
| summary | details要素においてその概要、凡例、またはキャプションを示す要素 | |
| datalist | input要素でコンボボックスを実現するための選択肢のリストを示す要素 | |
| keygen | 公開鍵暗号の秘密鍵と公開鍵ペアを生成する要素 | |
| 値の表示 | output | スクリプトによる計算結果など出力のための要素 |
| progress | タスクの完了度合いを表示する要素 | |
| meter | ディスク使用量のような測定値を表示する要素 |
（2）HTML5で変更になった要素
見た目を指定する意味がなくなり、テキストの意味を示すだけになった要素などです。
表3：変更された要素
| 変更要素 | HTML4.01での意味 | HTML5での意味 |
|---|---|---|
| a | ハイパーリンク | ハイパーリンクまたはhrefが必須ではなくなり、そのようなa要素は将来のリンクのプレースホルダを示す。他のa要素を含まないブロック要素をマーク可能 |
| address | 文書の作者への連絡先 | articleの中ならばそのarticleの作者の連絡先 |
| b | 太字・強調 | 強調 |
| cite | 引用元作品名 | 引用元作品名・作者名 |
| dl | 定義リスト | 名前と値のグループからなる連想リスト |
| hr | 水平線区切り | 段落区切り |
| i | 斜体字 | 分類の指定、技術用語、別の言語、思考などを表現 |
| label | フォームとラベルの関連付け | フォームとラベルの関連付け・親でないフォームとも関連付けられる |
| menu | リスト | コマンドリスト |
| noscript | JavaScript非対応環境での表示 | JavaScript非対応環境での表示、head内に配置可能になった |
| s | 取り消し線 | 既に正確ではなくなった・関係なくなった内容 |
| script | スクリプト記述 | スクリプトまたはカスタムデータブロック記述 |
| small | フォントを小さく表示 | 注釈 |
| strong | 重要性、強調 | 重要性 |
| u | 下線 | はっきりと伝わりにくかったり、本来とは異なった表記を伴うテキスト |
（3）HTML5で廃止された要素／属性
HTML要素による文書構造と見た目の指定が混在していると、文書や見た目それぞれの保守性が低下してしまう事から、見た目に関する指定の意味しかない要素は非推奨になりました。
見た目に関する部分はCSSのプロパティで指定する事で代替えできます。また、フレームはブラウザの履歴機能、ブックマーク機能との相性が悪くユーザビリティやアクセシビリティの低下につながるために非推奨になりました。同様な外見を維持したい場合はiframeまたはCSSで指定する事で代替できます。
HTML5で廃止される要素・属性も、HTML5対応ブラウザでは後方互換性の維持の原則によりサポートされます。
表4：非推奨の要素
| 非推奨の要素名 | 説明 | 代替方法 |
|---|---|---|
| basefont | 基準フォントを指定 | CSSのfontプロパティ |
| big | フォントを大きく表示 | CSSのfont-sizeプロパティ |
| center | 水平方向の中央揃え | CSSのtext-align: centerプロパティ |
| font | フォントの種類、装飾 | CSSのfontプロパティ |
| strike | 取り消し線 | CSSのtext-decorationプロパティ |
| tt | 等幅フォントで表示 | CSSのfont-familyプロパティ |
| applet | Javaアプレット埋め込み | objectまたはembed |
| acronym | 頭字語である事のマーク | abbr |
| dir | リスト | ul |
| isindex | 検索キーワードの入力欄 | <input type=search> |
| listing | ソースコードなどのテキストをそのまま表示 | preまたはcode |
| frame | フレーム内容の指定 | iframeまたはCSS |
| frameset | フレームの表示 | iframeまたはCSS |
| noframes | フレーム非対応環境での表示 | - |
表5：主な非推奨の属性
| 非推奨の属性 | 要素 | 説明 | 代替方法 |
|---|---|---|---|
| text, bgcolor, background, alink, link, vlink | body | body内のテキストや背景の色 | CSSのbackgroundプロパティ |
| align, frameborder, marginheight, marginwidth, scrolling | iframe | iframeの境界線、スクロールバー指定 | CSSのborder, margin, scrollingプロパティ |
| bgcolor, background | table, tr, td, th | table内の背景 | CSSのbackgroundプロパティ |
| align | caption, iframe, img, input, object, legend, table, hr, div, h1-h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr | 水平の揃え位置 | CSSのtext-alignプロパティ |
| language | script | スクリプト記述言語 | type |
| name | a, embed, img, option | 名前 | id |
HTML5によるセクションとフォームのサンプル
