HTML5 & CSS3 の基本事項

■ 概要

項 目詳細項目
基本用語
ハイパーテキスト(HyperText), WWW(World Wide Web),
HTML(HyperText Markup Language), HTTP(HyperText Transfer Protocol),
プロトコル(Protocol), URL(Uniform Resorce Locater), サーバー, クライアント,
Webサーバー, ブラウザー, Webページ, コンテンツ, マークアップ
HTML5 用   語
(必須知識)
タグ, 要素, 属性(コンテンツ属性), インベントハンドラ,
カテゴリー, コンテンツ・モデル, トランスペアレント
要素の分類(1)
(カテゴリー)
  • メタデータ・コンテンツ (Metadata content)
  • フロー・コンテンツ (Flow content)
  • セクショニング・コンテンツ (Sectioning content)
  • ヘッディング・コンテンツ (Heading content)
  • フレージング・コンテンツ (Phrasing content)
  • エンベッディッド・コンテンツ (Embedded content)
  • インタラクティブ・コンテンツ (Interactive content)
  • セクショニング・ルート (Sectioning roots)
  • パルパブル・コンテンツ (Palpable content)
要素の分類(2)
(機能別)
  • ルート要素 (The root element)
  • ドキュメントのメタデータ (Document metadata)
  • スクリプティング (Scripting)
  • セクション (Sections)
  • コンテンツのグループ化 (Grouping content)
  • テキストレベルの意味づけ (Text-level semantics)
  • 訂正 (Edits)
  • 組み込みコンテンツ (Embedded content)
  • テーブルのデータ (Tabular data)
  • フォーム (Forms)
  • リンク (Links)
文書形式(1)
最も簡単な形HTML4.01 からの変更点HTML5.1 での変更点
文書形式(2)
一般的な文書の形
CSS3
用   語
(必須知識)
CSS, セレクタ, プロパティ, , クラス, コメント,
長さの値, 色の値, 主軸, 副軸, アットルール, 継承
セレクタ
  • セレクタのグループ化 (Groups of selectors)
  • 型セレクタ (Type selector)
  • 全称セレクタ (Universal selector)
  • 属性セレクタ (Attribute selectors)
  • クラスセレクタ (Class selectors)
  • IDセレクタ (ID selectors)
  • 擬似クラス (Pseudo-classes)
  • 擬似要素 (Pseudo-elements)
  • 子孫結合子(子孫セレクタ) (Descendant combinator)
  • 子供結合子(子供セレクタ) (Child combinators)
  • 隣接結合子(隣接セレクタ) (Sibling combinators)
プロパティ
主要なキーワード, ABC 順索引, 機能別一覧,
知っておくとよいプロパティ
値と基準値
長さの値, 色の値, 要素のボックス, ベースライン(基準線)

一般基本用語

すでに HTML による文書作成の経験があり,以下の項目は知っているという方は,まず HTML4.01 からの変更点 を御覧ください。

■ ハイパーテキスト(HyperText)

次に何を知りたいかに応じて,マウス操作等により,自由にあっちこっち飛び回りながら参照できる形式の文書

■ WWW (World Wide Web)

全世界に広がったインターネット上のハイパーテキスト・システム。

"web"は「くもの巣」のことであり,くもの巣のように(日本語では「網の目のように」?)広がったハイパーテキストの通信網を指す言葉です。

■ HTML (HyperText Markup Language)

ハイパーテキスト(の論理的構造)を記述するための言語。

とくに、HTML5 からは、文書の装飾やレイアウトに関する部分は、CSS(Cascading Style Sheets)等によるスタイルシートを用いて記述することが徹底されました。 このため,見栄えのよい文書を作成するためには、HTML5 に加えて、CSS3 の知識が不可欠です。

■ HTML の歴史

現在までの HTML のバージョンには、以下のものがあります(廃止されたものを含む)。

この歴史を紐解いて見ると、HTML5 は 10年以上ぶりの大改訂であることがわかります。 しかも、現状で、IE,FireFox,Opera,Safari,GoogleChrome などの新しいブラウザーでは、すでに HTML5 や CSS3 の機能の大部分が先行してサポートされています。

さらに、W3C により HTML5 や HTML5.1 の勧告が既に行われたため、現在は、新規 Webページの作成には、これ以前のバージョン( HTML4.01等)を使用することは認められていません。 つまり、 HTML5 以降により記述することが必須 となっています。
(それに対して、HTML5 から HTML5.1 への変更はほぼ上位互換の小規模な内容 であるため、HTML5 の文法は依然として有効な知識といえます。)

このリファレンス資料の内容も、順次 HTML5.1 に則した内容に更新していく予定です。

■ URL (Uniform Resorce Locater)

ハイパーテキスト等のインターネット上の資源について、所在場所を一元的に表記する方法

URLを入力することにより、だれでも簡単に、世界中のハイパーテキスト等の資源にアクセスできるようにしたのが WWW です。 (記述方法の詳細は リンクの書き方パスの記入方法 を見てください。)

■ サーバーとクライアント

ネットワーク通信において、情報を提供する側のコンピュータをサーバーといい、情報を受取る側のコンピューターをクライアントといいます。

■ Webサーバー (Web Server)

HTML によるハイパーテキスト等の情報を提供するサーバーのこと。 WWWサーバーともいいます。

■ ブラウザー (Browser)

クライアントPCでハイパーテキストを読むためのアプリケーション。

IE(Internet Exploler)、FireFox、Opera、Google Chrome、 ...など色々あります。

なお、文書や画像を単に表示するだけの機能しかもたないアプリケーションのことを、通常、ビューワー(Viewer)といいます。 ブラウザーの場合は、必要な情報を選択したり探したりしながら表示する機能があるため、browse(拾い読みをする)という言葉を元に、このように呼びます。

■ Webページ (Web Pages)

WWW 上のハイパーテキストのページのこと。

■ HTTP(HyperText Transfer Protocol)

ハイパーテキストをインターネット上で閲覧するためのプロトコル(通信規約)のこと。

WebページURL は、通常、"http://"、または、"https://" で始まりますが、HTTP による通信であること表しています。

■ プロトコル(Protocol)

サーバーからクライアントへ情報を提供する際のやり取りの手順やデータ形式を定めた規約のこと。 日本語では通信規約といいます。

■ コンテンツ (Contents)

Webページに含まれる内容のこと。

■ マークアップ (Markup)

HTMLM は マークアップ (Markup)の頭文字です。 マークアップ は動詞として使う場合、HTML 文書を「記述する・作成する」という意味で使用されます。 また、名詞として使うときは HTML 文書の「書法・記述法」という意味でも使われます。

HTML5 の用語

■ タグ (tag)

<p> や <a> のように "<" と ">" で囲まれた表記をタグ(tag)といい、ハイパーテキストを構成する要素を指定するために使われます。

タグには、<p> や <a> のように、 <p> ~ </p> あるいは <a> ~ </a> のように"/"付きのものとのペアで使用するものが多くありますが、一方、<br> や <hr> のように、単独で使用されるものもあります。

■ 要素 (element)

タグを用いて記述された HTML 文書の構成単位を要素(element)といいます。

<p> ~ </p> のようなペア・タグの場合では、開始位置のタグ <p> を含めて、そこから、終了位置のタグ</p> まで(これも含める)の範囲が要素となります。

また、箇条書きの項目として使用される <li> は単独で記述できますが、このタグで指定される要素の範囲は、当然ながら、このタグと「この項目を記述する文字列」ということになります。

■ 属性(attributes) または コンテンツ属性(content attributes)

たとえば、<a> タグでリンクを張る場合では、

   <a href="next_doc.html">次のページ</a>

のように、リンク先を表す href="" のような記述が必要です。 このように、要素の機能、内容、名前、処理対象などを指定するために使われるタグ内の記述部分をその要素の属性(attribute)といいます。 より正確には、コンテンツ属性(content attribute)というのが正式名ですが、このページでは、慣例に従って簡単に「属性」と書くことにします。

属性の中には、すべての要素(タグ)で使用可能なグローバル属性(global attributes)のほかに、ある特定の要素でのみ指定が可能な固有属性(specific attributes)などがあります。

また、閲覧者の操作に対応して、Java Script による処理を呼び出すために使用されるインベントハンドラも属性の一種です。 body要素 でのみ使用可能な少数のもの( HTML5 で新規に導入)とすべての要素で使用可能なものの2種類があります。

■ IDL属性(interface definition language attributes)

以上に述べた属性グローバル属性固有属性)、および、イベントハンドラなどのコンテンツ属性以外にも、HTML には、JavaScript などのスクリプト言語で使用するための IDL属性(interface definition language attributes) というものがあります。

これは、JavaScript の場合ではそのオブジェクト・プロパティとして使用されるもののことです。 HTML5 では、スクリプト言語が JavaScript ただ1つに限定されているわけではなく、また、さらにオブジェクト指向のスクリプト言語に限定されているわけでもないので、「オブジェクト・プロパティ」とは呼ばずに、「IDL属性」と呼んでいるのです。 IDL属性の大半はコンテンツ属性に連動したもので同じ名前を持っていますが、HTML要素の中にはコンテンツ属性には存在しない IDL属性を持つものもあります。

注意: 本ページでは、「コンテンツ属性」を単に「属性」と表記する一方で、「IDL属性」については省略なしに表記することによって両者を区別します。 これは W3C の英語資料の用語の使用法にも対応する表記方法となっております。

■ グローバル属性(global attributes)

グローバル属性とは、すべての要素タグ)で使用可能な属性です。 これには、以下のものがあります。

グローバル属性名指 定 内 容
accesskey
キーボード・ショートカットを指定する
class
クラス名を指定する
contenteditable *
その要素のコンテンツが編集可能かどうかを指定する
dir
要素内のテキストの読み書きの方向を指定する
hidden *
ブラウザー上には隠して表示しないことを指定する
id
要素に一意的な識別子(id)を設定する
lang
要素の含むコンテンツやテキストの言語を指定する
spellcheck *
編集可能なテキストのスペルや文法をチェックするかどうかを指定する
style
当該要素に CSS によるスタイルを適用する
tabindex
(Tab キーを押すことによって)その要素にフォーカスを移動できるようにするかどうかを指定する
title
要素に説明や補足的な情報を提供する
translate *
要素の内容を翻訳して表示するかどうかを指定する。

"*" つきの属性は、HTML5 で新規に導入されたものです。

(各属性の詳細については、解説ページを参照してください。)

■ インベントハンドラ(event handler)

インベントハンドラ(正式名称は、インベントハンドラ・コンテンツ属性)は、HTML 文書内の要素から JavaScript で記述した処理を呼び出すために使用されるものです。 body 要素でのみ使用可能な

onafterprint#onbeforeprint#onbeforeunload#onhashchange#onmessage#
onoffline#ononline#onpagehide#onpageshow#onpopstate#
onresize#onstorage#onunload#

を除いた残りは、グローバル属性と同様に、すべての要素タグ)で使用可能です。

JavaScript による Webアプリケーションでは、様々な状況に応じて、必要な処理を実行します。 この状況のことをインベント(「事象」の意味)といい、インベントにより処理を実行するやり方をイベントドリブン(イベント駆動)方式といいます。 JavaScript もイベントドリブン方式のスクリプト言語です。

インベントハンドラには、以下のものがあります。

onabort, onafterprint#, onbeforeprint#, onbeforeunload#, onblur+, oncancel, oncanplay,
oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick,
ondurationchange, onemptied, onended, onerror+, onfocus+, onhashchange#, oninput,
oninvalid, onkeydown, onkeypress, onkeyup, onload+, onloadeddata, onloadedmetadata,
onloadstart, onmessage#, onmousedown, onmouseenter, onmouseleave, onmousemove,
onmouseout, onmouseover, onmouseup, onmousewheel, onoffline#, ononline#, onpagehide#,
onpageshow#, onpause, onplay, onplaying, onpopstate#, onprogress, onratechange,
onreset, onresize#, onscroll+, onseeked, onseeking, onselect, onshow, onstalled, onstorage#,
onsubmit, onsuspend, ontimeupdate, ontoggle, onunload#, onvolumechange, onwaiting

"#" つきの属性は、body 要素でのみ使用可能です。 また、"+" つきの属性は、body 要素で指定されたときには、処理内容が異なります。 これは、body 要素では、Window オブジェクトのイベントハンドラへアクセスできるためです。

"+" つきと無印の属性はすべての要素に適用可能ですが、すべての要素で使用用途があるわけではありません。 例えば、 volumechange イベントを受け取って必要な処理を行うのは、通常メディア要素以外には考えられません。

(各属性の詳細については、解説ページを参照してください。)

上記のものをおおよその機能別に分けるとつぎのようになります。

用 途インベントハンドラ名対象となる動作条件
【汎 用】 onAbort
画像の読み込みを中断した時
onBeforeUnload#
次のページに移動する時(リロードされた時)
onCancel
中止した時
onClose
閉じた時
onError+
読み込み中にエラーが発生した時
onHashChange#
ハッシュが更新された時
onLoad+
ページや画像の読み込みが完了した時
onLoadedMetadata
メタデータの読み込みが完了した時
onLoadStart
外部ファイルの読み込みを開始した時
onMessage#
バックグラウンドスレッド(ワーカー)からメッセージが送信された時
onOffline#
ウィンドウ,または,バックグラウンドスレッド(ワーカー)がオフラインになった時
onOnline#
ウィンドウ,または,バックグラウンドスレッド(ワーカー)がオンラインになった時
onPageHide#
他のページへ移動した時などそのページが隠された時
onPageShow#
ページが表示された時
onPopState#
[戻る] または [進む] をクリックした時,history.pushState(),history.replaceState() メソッドが呼び出された時
onResize#
ウィンドウのサイズが変更された時
onStorage#
localStorage.setItem 関数の実行が終了した時
onScroll+
スクロールバーでスクロールした時
onUnload#
ページや画像のデータをアンロードした時
【マウス操作】 onClick
クリック= マウスの左ボタンを1度押して、離した時
onDblClick
マウスの左ボタンでダブルクリックした時
onMouseDown
マウスのボタンが押された時
onMouseEnter
マウスカーソルが入り込んだ時
onMouseLeave
マウスカーソルが出て行った時
onMouseMove
マウスカーソルがオブジェクト上を移動した時
onMouseOut
マウスカーソルが一度オブジェクト上に来て、離れた時
onMouseOver
マウスカーソルがオブジェクト上に来た時
onMouseUp
マウスのボタンが離された時
onMouseWheel
マウスのホイールを操作した時
onSelect
テキストが選択された時
【キーボード】 onKeyDown
キーボードのいずれかのキーが押された時
onKeyPress
キーボードのいずれかのキーが押されて放された時
onKeyUp
キーボードのいずれかのキーが放された時
onSelect
テキストが選択された時
【フォーム】 onBlur+
フォームのテキストボックスや、テキストエリアが一度アクティブになり、フォーカスを失う時
onChange
フォームのテキストボックスや、テキストエリアの内容が変更された時
onFocus+
フォームのテキストボックスや、テキストエリアにカーソルが移動した時
onInput
フォームの値(value)が変更された時
onInvalid
onBlur関数がfalseを返した時
onReset
フォームがリセットされた時
onSubmit
フォームを送信しようとした時
【マルチメディア】 onCanPlay
再生が可能になった時
onCanPlayThrough
現状の速度で読み込みを続ければ途切れることなく動画を再生できる時
onCueChange
cuechange=TextTrack(字幕など)に関するイベントの発生時
onDurationChange
コンテンツの長さの変化を示すメタデータが読み込まれた時
onEmptied
指定されたコンテンツが空になった時
onEnded
再生終了時
onLoadedData
現在の再生位置でvideo映像の表示が可能になった時
onPause
アクティビティがバックグラウンドになる直前
onPlay
メディア・ファイルを再生した時
onPlaying
メディア・ファイルを再生中の時
onProgress
外部ファイルの読み込み作業中の時
onRateChange
videoファイルの再生フレームレートが変更された時
onReadyStateChange
RedyState の値が変わった時
onSeeked
videoファイルのシーク終了時
onSeeking
videoファイルのシーク開始時
onShow
画像を表示する時
onStalled
メディアのデータの取得に失敗した時
onSuspend
サスペンドからの復帰時
onTimeUpdate
video の再生開始からの時間の更新時
onVolumeChange
音量が変化した時
onWaiting
video再生が中断して待機状態になった時
【印 刷】 onAfterPrint#
フォームの印刷の完了時
onBeforePrint#
フォームの印刷の開始直前
onFocus+
フォームのテキストボックスや、テキストエリアにカーソルが移動した時
onInput
フォームの値(value)が変更された時
onInvalid
onBlur関数がfalseを返した時
onReset
フォームがリセットされた時
onSubmit
フォームを送信しようとした時

■ カテゴリー (categories)

HTML 4.01 までは、要素の包含関係を規定するために、要素は「ブロック要素」と「インライン要素」の2種類に分類されておりました。

HTML5 では、これらが廃止されるとともに、どの要素にどの要素を含むことができるかという取り決めが詳細かつ厳密なもの(コンテンツ・モデル)となりました。 そのうちの1つとして、次の9つのカテゴリーによる要素の分類とそれによる包含関係の規則が導入されています。

  • メタデータ・コンテンツ (Metadata content)
  • フロー・コンテンツ (Flow content)
  • セクショニング・コンテンツ (Sectioning content)
  • ヘッディング・コンテンツ (Heading content)
  • フレージング・コンテンツ (Phrasing content)
  • エンベッディッド・コンテンツ (Embedded content)
  • インタラクティブ・コンテンツ (Interactive content)
  • パルパブル・コンテンツ (Palpable content)

これらのうち、はじめの7つの包含関係を図に示すと次のようになります。

カテゴリーの包含関係

なお、機能別の分類とは異なり、要素タグ)は、上の9つのカテゴリーのうち、必ずどれかに属しているわけではなく、また、属するカテゴリーも1つに限られているわけではありません。 つまり、上のカテゴリーのいずれにも属さない要素や複数のカテゴリーに属する要素があります。

さらに、また、ここに示した要素のカテゴリーによる分類と後述の機能別の分類の項目には、原語では同じ言葉や似通った言葉が使われています。 これらを明確に区別して混同を避けるために、カテゴリーの方はあえて元のままのカタカナ表記となっています。 この点、意味が分かりづらく、また、覚えにくいですが、あまり意味にこだわらずに、要素の包含関係を決めるための分類として、とりあえず理解してください。

■ メタデータ・コンテンツ (Metadata content)

ブラウザーの画面上には表示されない HTML 文書の付加的な情報をメタデータ(metadata)といいます。 これらを記述する要素です。

メタデータ・コンテンツに属する要素は、つぎのものです。

base, link, meta, noscript, script, style, template, title

(各要素の詳細については、解説ページを参照してください。)

■ フロー・コンテンツ (Flow content)

HTML 文書の本体とアプリケーションで使用されるほとんどの要素は、フロー・コンテンツ(Flow content)に分類されます。

フロー・コンテンツに属する要素は、つぎのものです。

a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, br, button,
canvas, cite, code, datalist, del, dfn, div, dl, em, embed, fieldset, figure,
footer, form, h1-h6, header, hr, i, iframe, img, input, ins, kbd, keygen,
label, main, map, mark, math, meter, nav, noscript, object, ol, output,
p, pre, progress, q, ruby, s, samp, script, section, select, small, span,
strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video,
wbr,テキスト

条件付きでフロー・コンテンツに属する要素は、つぎのものです。

  • area (この要素が map 要素の中にある場合)

(各要素の詳細については、解説ページを参照してください。)

■ セクショニング・コンテンツ (Sectioning content)

章や節などの段落のグループを作って、文書全体における役割を明確にするための要素です。

セクショニング・コンテンツに属する要素は、つぎのものです。

article, aside, nav, section

(各要素の詳細については、解説ページを参照してください。)

セクショニング・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならセクショニング・コンテンツに属する要素を置くことができます。

■ ヘッディング・コンテンツ (Heading content)

見出し(heading)を書くための要素です。

ヘッディング・コンテンツに属する要素は、つぎのものです。

h1 - h6,

(各要素の詳細については、解説ページを参照してください。)

ヘッディング・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならヘッディング・コンテンツに属する要素を置くことができます。

■ フレージング・コンテンツ (Phrasing content)

フレージング・コンテンツは、文書のテキストとその段落内での記述のために使用される要素です。

フレージング・コンテンツに属する要素は、つぎのものです。

a, abbr, audio, b, bdi, bdo, br, button, canvas, cite, code, datalist, del, dfn,
em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math,
meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small,
span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr,テキスト

条件付きでフレージング・コンテンツに属する要素は、つぎのものです。

  • area (この要素が map 要素の中にある場合)

(各要素の詳細については、解説ページを参照してください。)

フレージング・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならフレージング・コンテンツに属する要素を置くことができます。

■ エンベッディッド・コンテンツ (Embedded content)

画像や映像を表示したり、音声を再生したり、特定のオブジェクトを HTML 文書内に組み込むための要素です。

エンベッディッド・コンテンツに属する要素は、つぎのものです。

audio, canvas, embed, iframe, img, math, object, svg, video

(各要素の詳細については、解説ページを参照してください。)

エンベッディッド・コンテンツに属するすべての要素はフレージング・コンテンツに属しますので、フレージング・コンテンツが置ける場所やフロー・コンテンツが置ける場所ならエンベッディッド・コンテンツに属する要素を置くことができます。

■ インタラクティブ・コンテンツ (Interactive content)

閲覧者の操作や入力の対象となる要素です。

インタラクティブ・コンテンツに属する要素は、つぎのものです。

a, button, embed, iframe, keygen, label, select, textarea

条件付きでインタラクティブ・コンテンツに属する要素は、つぎのものです。

  • audiocontrols 属性が指定された場合)
  • imgusemap 属性が指定された場合)
  • inputtype 属性の値が "hidden" でない場合)
  • menutype 属性の値が "toolbar" である場合)
  • objectusemap 属性が指定された場合)
  • videocontrols 属性が指定された場合)

(各要素の詳細については、解説ページを参照してください。)

インタラクティブ・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならインタラクティブ・コンテンツに属する要素を置くことができます。

■ セクショニング・ルート (Sectioning root)

一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。

HTML 文書に限らず、少し長めの文書では、通常、章や節などの相互に関連した階層構造をもちます。 しかし、セクショニング・ルートに属する要素は、その前後のコンテンツとは切り離されたものと見なされます。 つまり、このカテゴリーに属する要素は、このような階層構造から独立したコンテンツと見なされるのです。

セクショニング・ルートに属する要素は、つぎのものです。

blockquote, body, fieldset, figure, td

(各要素の詳細については、解説ページを参照してください。)

■ パルパブル・コンテンツ (Palpable content)

コンテンツ・モデル が、フロー・コンテンツまたはフレージング・コンテンツの要素は、その中に パルパブル・コンテンツ (Palpable content) と呼ばれる子ノードを1個以上もつことが要求されます。

パルパブル・コンテンツに属する要素は、つぎのものです。

a, abbr, address, article, aside, b, bdi, bdo, blockquote, button,
canvas, cite, code, dfn, div em, embed, fieldset, figure, footer,
form, h1-h6, header, i, iframe, img, ins, kbd, keygen, label, main,
map, mark, math, meter, nav, object, output, p, pre, progress, q,
ruby, s, samp, section, select, small, span, strong, sub, sup, svg,
table, textarea, time, u, var, video

条件付きでパルパブル・コンテンツに属する要素は、つぎのものです。

  • audiocontrol属性が指定された場合)
  • dl (子要素に name属性の値をもつものがある場合)
  • inputtype属性の値が "hidden" でない場合)
  • menutype属性の値が "toolbar" または "list" である場合)
  • ol (少なくとも1つ以上の li要素を含む場合)
  • ul (少なくとも1つ以上の li要素を含む場合)
  • テキスト (複数の要素に渡る whitespace (空白,タブ,改行等) でない場合)

(各要素の詳細については、解説ページを参照してください。)

■ コンテンツ・モデル (Content models)

HTML5 では、どの要素にどの要素を含むことができるかという取り決めが詳細かつ厳密に行われております。 そして、この取り決めをコンテンツ・モデル(Content model)という名前で呼んでいます。

HTML5 におけるコンテンツ・モデルの主要かつ代表的なものはカテゴリーによるものですが、それ以外のコンテンツ・モデルを採用している要素もあるので、注意が必要です。

コンテンツ・モデルの主なものは、つぎのものです。

  1. カテゴリー(categories)によるもの
  2. 含むことのできる要素を直接指定したもの
  3. トランスペアレントによるもの(transparent content models)

このうち、1のカテゴリーによるコンテンツ・モデルでは、通常、要素が含むことができる要素は、自身が属するカテゴリーのうちの指定された1つに属するものに限定されます。

また、2 の例としては、<hgroup> があり、この要素に対するコンテンツ・モデルでは、<hgroup> と </hgroup> の間に含むことができる要素として、<h1>,<h2>,<h3>,<h4>,<h5>,<h6> が直接指定されています。

最後の 3 のトランスペアレントは、この要素を含む親要素がもつコンテンツ・モデルをこの要素が含む子要素(親要素から見ると孫要素)に適用するという透過型のコンテンツ・モデルです。 つまり、このコンテンツ・モデルが指定された要素では、その要素(のタグ)を取り除いた形で内容に親要素のコンテンツ・モデルを適用するという形式の処理になります。

■ コンテンツ・モデルと HTML の マークアップ

以上、カテゴリー(categories)コンテンツ・モデル について述べてきましたが、おそらく 「何と複雑で面倒な!」 とか 「こんなにたくさんの規則は覚えられない!」 とかの感想を持った人が多いと思います。 (私もその一人です。)

しかし、安心してください。 これらの取り決めは、HTML文書が常識的に考えてあるべき形式で書かれるために、明らかに非常識、かつ、通常使用されるべきではない形式の書法(マークアップ)を排除するために設けられた取り決めであることは忘れないでおきましょう。

つまり、英語やその文法を全く知らない場合は、英語の文章は書けませんが、ある程度英語の文章表現に慣れてくると、別に文法はそれほど意識しなくても文章が書けるのと同様です。 「常識的に考えておかしくない文書の構成」 で書く限りは、コンテンツ・モデルに合わない箇所が多発するようなことは、ほとんどありません。

とはいえ、もちろんコンテンツ・モデルに注意が必要な場合もあります。 たとえば、hgroup要素 の中には「見出し」を書くための h1要素h6要素 しか書くことができません。 したがって、「章の見出し」に続いて1行だけ本文がありすぐに「節の見出し」が続くような場合では、hgroup要素 でこれらの見出しをくくることは出来ません。 (これもよく考えれば当然のことなのですが、...)

■ HTML要素の機能別分類

HTML5 では、コンテンツ・モデルによる要素の包含関係を規定するために、カテゴリーという要素の分類がされています。 一方、文書内における機能による分類として、要素は以下のように分類されます。

  • ルート要素 (The root element)
  • ドキュメントのメタデータ (Document metadata)
  • スクリプティング (Scripting)
  • セクション (Sections)
  • コンテンツのグループ化 (Grouping content)
  • テキストレベルの意味づけ (Text-level semantics)
  • 訂正 (Edits)
  • 組み込みコンテンツ (Embedded content)
  • テーブルのデータ (Tabular data)
  • フォーム (Forms)
  • リンク (Links)

■ ルート要素 (The root element)

ルート要素は、すべての文書に使用するものです。 そして、すべての HTML による記述は、この要素の中に含まれていなければなりません。 この分類に属する要素は、つぎのただ一つのみです。

html ( <html> ~ </html> )

したがって、1つの文書には、2つ以上の <html> や </html> を含むことはできません。

ただし、意外なことに、HTML5 の規格の中には、実は、すべての HTML 文書には必ずこの要素を含まなくてはいけないという規定はないのです。 とはいえ、 <html> 要素を含まないような HTML 文書を書くことは、通常まずありませんので、<html></html> は、必ず1対含むと覚えておきましょう。

( <html> 要素の詳細については、解説ページを参照してください。)

■ ドキュメントのメタデータ (Document metadata)

メタデータとは、ブラウザーの画面上には表示されない HTML 文書の付加的な情報のことをいいます。

この中には、ブラウザーで正常に表示されるために必要な大切な情報も含まれるので、間違いのない記述をするように注意しましょう。

メタデータ関連の要素は、つぎのものです。

head, title, base, link, meta, style

(各要素の詳細については、解説ページを参照してください。)

■ スクリプティング (Scripting)

スクリプティング要素とは、HTML 文書にスクリプトを組み込むために使用される要素です。

通常は、 <head> と </head> の間に置くことが多いですが、コンテンツ・モデルによれば、それ以外の場所に置くこともできます。

スクリプティング要素は、つぎのものです。

script, noscript, template, canvas,

(各要素の詳細については、解説ページを参照してください。)

■ セクション (Sections)

セクション要素は、章節などの文書レベルの構成単位となる要素です。 HTML 4.01 では、 <body> と <h1>~<h6> のみでしたが、HTML5 では、大幅な拡張が行われました。

セクション要素は、つぎのものです。

body, section, nav, article, aside, h1 ~ h6 , header, footer, address

(各要素の詳細については、解説ページを参照してください。)

■ コンテンツのグループ化 (Grouping content)

グループ化要素は、いくつかの要素を1つのグループにまとめたり、グループとグループの区切りとなる境界を設定する要素です。 HTML 4.01 から、新たな要素は、<figure> と <figcaption> の2つだけですが、既存の要素で属性そのほかに変更のあったものがあります。

グループ化要素は、つぎのものです。

p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main

(各要素の詳細については、解説ページを参照してください。)

■ テキストレベルの意味づけ (Text-level semantics)

テキストレベルの意味づけの原語は、上記の通り、Text-level semantics です。 このセマンティクス(semantics)という言葉は、文書中の表現の表記の方法に対立する概念としての意味や意図をさす言葉です。 つまり、これに属する要素は、いずれも、文書中でのある一定の意味をもった表記のために使われるものであり、「太字」や「斜体」など見栄えを指定するための表記ではありません。

したがって、HTML5 では、<b> や <i> は、もはや「太字」や「斜体」を指定するためのタグではなくなりました。 前者は、「他の文章と区別したいテキストの表記」(ただし、強調や重要性の意味を持たない → この意味をもつ <em> や <strong> があるため)として、また、後者は、「声やムードを表すテキスト、分類用語、技術用語、他言語のイデオム、思考、船の名前などの表記」として、HTML 4.01 までとは定義が異なっていますので注意が必要です。

テキストレベルの意味づけ要素は、つぎのものです。

a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd,
sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr

(各要素の詳細については、解説ページを参照してください。)

■ 訂正 (Edits)

訂正の原語は、上記の通り、 Edits です。 つまり、一旦作成した文書の後日の追加や削除等の編集経過をそのまま記述するために使われる要素です。 そのため、日本語では、通常、訂正と訳されております。

訂正の要素は、つぎのものです。

ins, del

(各要素の詳細については、解説ページを参照してください。)

■ 組み込みコンテンツ (Embedded content)

組み込みコンテンツとは、画像ファイルや音声ファイルなどの外部リソースを取り込んで、HTML 文書に組み込んだ形の要素を指します。  埋め込みコンテンツともいいます。

HTML5 においては、多数の新要素が導入されるとともに、既存の要素についても種々の拡張がなされております。

組み込みコンテンツの要素は、つぎのものです。

img, iframe, embed, object, param, video, audio, source, track, map, area,
MathML, SVG

(各要素の詳細については、解説ページを参照してください。)

■ テーブルのデータ (Tabular data)

テーブルのデータ要素は、表を作成するために使われる要素です。 HTML 4.01 から新たに追加された要素はありません。 しかし、従来よく行われてきた「レイアウト目的にテーブルを使用する」ことは認められていないなど、変更もあります。

テーブルのデータ要素は、つぎのものです。

table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th

(各要素の詳細については、解説ページを参照してください。)

■ フォーム (Forms)

HTML 文書内で閲覧者の操作やデータ入力を可能にし、その処理を行うフォームで使われる要素です。 HTML5 において、多数の新要素や属性が導入されて、機能が大幅に拡張されました。

フォーム要素は、つぎのものです。

form, fieldset, legend, label, input, button, select, datalist, optgroup, option,
textarea, keygen, output, progress, meter

(各要素の詳細については、解説ページを参照してください。)

リンクは、aarea,および,link により作られる概念的な構造で、2つの資源間の接続を表します。 ただし、このうちの一方は現在の HTML文書です。

HTML では、次の2つの種類のリンクがあります。

  • 外部資源へのリンク (現在の文書に追加した形で用いられる文書へのリンクで、一般的にユーザー側のソフトで自動的に表示等の処理が行われます。)
  • ハイパーリンク (一般的にユーザーに自動的に処理されて提示されるとともに、ブラウザーで表示を自在に切り替えたりダウンロードしたりできるようにするための他の資源へのリンクです。)

(各要素の詳細については、解説ページを参照してください。)

■ HTML5 文書形式 (1): 最も簡単な形

<html> と </html> を含まないような例外的なものを除いて、HTML5 の規約で最も基本的かつ簡単な文書の形式は、つぎのようになります。

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Webページの作成例 (1)</title>
   </head>
   <body>
      最も簡単なWebページです。
   </body>
</html>

この形式は、HTML5 文書の基本形 といえるものですので、よく覚えておきましょう。

■ HTML4.01 からの変更点

前項の 「HTML5 文書の基本形」 について、HTML4.01 からの変更点 を箇条書きにまとめると、以下の通りです。

  1. ドキュメント宣言の書式変更
  2. <html> 要素の lang属性 の値の変更
  3. HTML文書ファイルに対する <meta> 要素の記述の変更
  4. 基準となるスタイルシートやスクリプト言語の指定が不要
  5. <link> 要素の type属性 の指定の省略

HTML4.01 からの各変更点の詳細 は、以下の通りです。

  1. ドキュメント宣言の書式変更
    HTML4.01 までの書き方:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    から、
    <!DOCTYPE html>
    のように簡単になっています。
  2. <html> 要素の lang属性 の値の変更
    lang属性 の指定で、「HTML 4.01」等で使用できていた「ja-JP」が有効ではなくなりました。 従って、従来の lang属性 の指定:
    <html lang="ja-JP">
    は、
    <html lang="ja">
    のように簡単な指定に変更します。
  3. HTML文書ファイルに対する <meta> 要素の記述の変更
    必須である HTML文書についての <meta> 要素の記述は、従来の http-equiv属性 を利用した
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    ではなく、charset属性 を使用して、
    <meta charset="UTF-8">
    のように、より簡単に書けるようになりました。 また、日本語の HTML文書では、文字符号化方式(charset属性 の値)は、"UTF-8" を指定することが必須 となっており、"Shift_JIS""ISO-2022-JP" は指定できません。(当然ながら、HTMLファイルは "UTF-8" で作成する必要があります。)
  4. 基準となるスタイルシートやスクリプト言語の指定が不要
    HTML4.01 で行っていた、 <meta> 要素 による CSS や Javascript についての:
    <meta http-equiv="Content-Style-Type" content="text/css">

    <meta http-equiv="Content-Script-Type" content="text/javascript">
    のような記述は HTML5 では不要 です。 (スタイルシートは CSS、スクリプトの言語は Javascript がそれぞれ既定値 となっています。) 
    また、http-equiv属性 の値として、上記のものに含まれている 「Content-Style-Type」や「Content-Script-Type」は使用できなくなっています ので、注意が必要です。
  5. <link> 要素の type属性 の指定の省略
    HTML文書に関連付けるスタイルシートやその他の外部ファイルは、<link> 要素で指定します。 HTML5 では、このとき rel属性 で指定した値に「既定のファイルタイプ」がある場合には type属性 の指定は不要 です。
    HTML5 では、スタイルシートは CSS が既定値 ですので、HTML4.01 で行っていた
    <link href="style.css" rel="stylesheet" type="text/css">
    という記述は、
    <link href="style.css" rel="stylesheet">
    のように 簡単になっています。

■ HTML5.1 での変更点

HTML5 から HTML5.1 の変更点 を箇条書きにまとめると、以下の通りです。

  1. 新規に追加された仕様
  2. 廃止された仕様
  3. 変更された仕様

HTML5 からの各変更点の詳細 は、この通り です。

■ HTML5 文書形式 (2): 一般文書でよく使う形

一般的なレポートや論文などで使われる定型文書では、つぎのような形が例として挙げられます。

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Webページの作成例 (2)</title>
      <link rel="stylesheet" href="style.css">
      <style type="text/css">
      <!--
         article { margin: 0em 1em 0em 1em; }
      -->
      </style>
   </head>
   <body>
      <header>
          <nav>
              <div>2011 <a href="○×△.html">大阪教育大学 情報科学講座</a></div>
              <br>><a href="menu.html">メニュー</a>>HTML5 文書形式
          </nav>
      </header>
      <hr>
      <section>
         <h2>1.はじめに </h2>
         <article>
            <h4>1.1 HTML5 文書形式 (1): 最も簡単な形 </h4>
            <p>[段落1]</p>
            <p>[段落2]</p>
            ・・・・・・・・・
         </article>
         <article>
            <h4>1.2 HTML5 文書形式 (2): 一般文書でよく使う形 </h4>
            <p>[段落1]</p>
            <p>[段落2]</p>
            ・・・・・・・・・
         </article>
      </section>
      <section>
         <h2>2.HTML5 文書の作成方法 </h2>
         <article>
            <h4>2.1 メモ帳による入力 </h4>
            <p>[段落1]</p>
            ・・・・・・・・・
         </article>
      </section>
      <section>
           ・・・・・・・・・
           ・・・・・・・・・
      </section>
      <hr>
      <footer>
         <div>Copyright (C) 2011 大阪教育大学 情報科学講座</div>
         <div>初版:2011年xx月xx日 最終更新:2011年xx月29日</div>
         <div><a href="http://www.osaka-kyoiku.ac.jp/~joho/">http://www.osaka-kyoiku.ac.jp/~joho/</a></div>
      </footer>
   </body>
</html>

これをブラウザーで表示すると、つぎのようになります。

なお、この例では、<link rel="stylesheet" href="style.css"> により、スタイルシートに style.css というこの文書全体と同じファイルが指定されていますので、<h2> ~ </h2> や <h4> ~ </h4> の表示がこの文書全体と同一の形式になっています。

また、上の書式は、一例に過ぎませんので、もっと様々な形式で文書の作成が可能です。 ただし、コンテンツ・モデルに注意をする必要があります。

■ HTMLで特殊文字(<、>、&)を書くには

HTML の本文では、アンパサンド(&)、右大不等号(<)、左大不等号(>)をそれぞれ、&amp;、&lt;、&gt; と記述する必要があります。この形式を文字参照と呼びます。加えて、タグの属性部で、"..." の中ではダブルクォーテーション(")を &quot;、'...' の中ではシングルクォーテーション(')を &#39; と記述する必要があります。

太字にするには &lt;b&gt; を用います。
<img src="xx.gif" alt="&quot;&#39; の説明">

画像が表示できない場合に、ブラウザーでこれを表示すると次のようになります。

太字にするには <b> を用います。
" や ' の説明

なお、このような HTML文書内で使用する特殊文字の変換ツール を提供しておりますので、ご利用ください。

■ 備考

IE8 や IE9 で、上部のメニューや「HTML5 文書形式 (2)」のブラウザー表示部分が正常に表示されないときは、Windows のエキスプローラで 、

  • ファイル: html5.html をマウスで右クリックして、「プロパティ」を選択
  • 「セキュリティー」タブを選択
  • 「このファイルは他コンピュータから取得したものです」という表示があれば、「アクセスを許可する」を選択
することにより、正常に表示できます。