PR

HTML5の新機能、HTML4との違い

2012年4月17日(火)
飯島 聡(著)山田 祥寛(監修)

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
Think IT会員限定特典
  • HTML5によるセクションとフォームのサンプル

著者
飯島 聡(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています