今さら聞けないHTML5総おさらい第1回

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とは？

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