項 目 | 詳細項目 | |
---|---|---|
基本用語 |
ハイパーテキスト(HyperText),
WWW(World Wide Web),
HTML(HyperText Markup Language), HTTP(HyperText Transfer Protocol), プロトコル(Protocol), URL(Uniform Resorce Locater), サーバー, クライアント, Webサーバー, ブラウザー, Webページ, コンテンツ, マークアップ |
|
HTML5 | 用 語 (必須知識) |
タグ,
要素,
属性(コンテンツ属性),
インベントハンドラ,
カテゴリー, コンテンツ・モデル, トランスペアレント |
要素の分類(1) (カテゴリー) |
| |
要素の分類(2) (機能別) |
| |
文書形式(1) |
最も簡単な形,
HTML4.01 からの変更点,
HTML5.1 での変更点
|
|
文書形式(2) | 一般的な文書の形 |
|
CSS3 |
用 語 (必須知識) |
CSS,
セレクタ,
プロパティ,
値,
クラス,
コメント,
長さの値, 色の値, 主軸, 副軸, アットルール, 継承 |
セレクタ |
| |
プロパティ |
主要なキーワード,
ABC 順索引,
機能別一覧,
知っておくとよいプロパティ |
|
値と基準値 |
長さの値,
色の値,
要素のボックス,
ベースライン(基準線)
|
すでに HTML による文書作成の経験があり,以下の項目は知っているという方は,まず HTML4.01 からの変更点 を御覧ください。
次に何を知りたいかに応じて,マウス操作等により,自由にあっちこっち飛び回りながら参照できる形式の文書。
全世界に広がったインターネット上のハイパーテキスト・システム。
"web"は「くもの巣」のことであり,くもの巣のように(日本語では「網の目のように」?)広がったハイパーテキストの通信網を指す言葉です。
ハイパーテキスト(の論理的構造)を記述するための言語。
とくに、HTML5 からは、文書の装飾やレイアウトに関する部分は、CSS(Cascading Style Sheets)等によるスタイルシートを用いて記述することが徹底されました。 このため,見栄えのよい文書を作成するためには、HTML5 に加えて、CSS3 の知識が不可欠です。
現在までの 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を入力することにより、だれでも簡単に、世界中のハイパーテキスト等の資源にアクセスできるようにしたのが WWW です。 (記述方法の詳細は リンクの書き方 や パスの記入方法 を見てください。)
ネットワーク通信において、情報を提供する側のコンピュータをサーバーといい、情報を受取る側のコンピューターをクライアントといいます。
HTML によるハイパーテキスト等の情報を提供するサーバーのこと。 WWWサーバーともいいます。
クライアントPCでハイパーテキストを読むためのアプリケーション。
IE(Internet Exploler)、FireFox、Opera、Google Chrome、 ...など色々あります。
なお、文書や画像を単に表示するだけの機能しかもたないアプリケーションのことを、通常、ビューワー(Viewer)といいます。 ブラウザーの場合は、必要な情報を選択したり探したりしながら表示する機能があるため、browse(拾い読みをする)という言葉を元に、このように呼びます。
WWW 上のハイパーテキストのページのこと。
ハイパーテキストをインターネット上で閲覧するためのプロトコル(通信規約)のこと。
Webページの URL は、通常、"http://"、または、"https://" で始まりますが、HTTP による通信であること表しています。
サーバーからクライアントへ情報を提供する際のやり取りの手順やデータ形式を定めた規約のこと。 日本語では通信規約といいます。
Webページに含まれる内容のこと。
HTML の M は マークアップ (Markup)の頭文字です。 マークアップ は動詞として使う場合、HTML 文書を「記述する・作成する」という意味で使用されます。 また、名詞として使うときは HTML 文書の「書法・記述法」という意味でも使われます。
<p> や <a> のように "<" と ">" で囲まれた表記をタグ(tag)といい、ハイパーテキストを構成する要素を指定するために使われます。
タグには、<p> や <a> のように、 <p> ~ </p> あるいは <a> ~ </a> のように"/"付きのものとのペアで使用するものが多くありますが、一方、<br> や <hr> のように、単独で使用されるものもあります。
タグを用いて記述された HTML 文書の構成単位を要素(element)といいます。
<p> ~ </p> のようなペア・タグの場合では、開始位置のタグ <p> を含めて、そこから、終了位置のタグ</p> まで(これも含める)の範囲が要素となります。
また、箇条書きの項目として使用される <li> は単独で記述できますが、このタグで指定される要素の範囲は、当然ながら、このタグと「この項目を記述する文字列」ということになります。
たとえば、<a> タグでリンクを張る場合では、
属性の中には、すべての要素(タグ)で使用可能なグローバル属性(global attributes)のほかに、ある特定の要素でのみ指定が可能な固有属性(specific attributes)などがあります。
また、閲覧者の操作に対応して、Java Script による処理を呼び出すために使用されるインベントハンドラも属性の一種です。 body要素 でのみ使用可能な少数のもの( HTML5 で新規に導入)とすべての要素で使用可能なものの2種類があります。
以上に述べた属性(グローバル属性と固有属性)、および、イベントハンドラなどのコンテンツ属性以外にも、HTML には、JavaScript などのスクリプト言語で使用するための IDL属性(interface definition language attributes) というものがあります。
これは、JavaScript の場合ではそのオブジェクト・プロパティとして使用されるもののことです。 HTML5 では、スクリプト言語が JavaScript ただ1つに限定されているわけではなく、また、さらにオブジェクト指向のスクリプト言語に限定されているわけでもないので、「オブジェクト・プロパティ」とは呼ばずに、「IDL属性」と呼んでいるのです。 IDL属性の大半はコンテンツ属性に連動したもので同じ名前を持っていますが、HTML要素の中にはコンテンツ属性には存在しない IDL属性を持つものもあります。
注意: 本ページでは、「コンテンツ属性」を単に「属性」と表記する一方で、「IDL属性」については省略なしに表記することによって両者を区別します。 これは W3C の英語資料の用語の使用法にも対応する表記方法となっております。
グローバル属性とは、すべての要素(タグ)で使用可能な属性です。 これには、以下のものがあります。
グローバル属性名 | 指 定 内 容 |
---|---|
accesskey | キーボード・ショートカットを指定する |
class | クラス名を指定する |
contenteditable * | その要素のコンテンツが編集可能かどうかを指定する |
dir | 要素内のテキストの読み書きの方向を指定する |
hidden * | ブラウザー上には隠して表示しないことを指定する |
id | 要素に一意的な識別子(id)を設定する |
lang | 要素の含むコンテンツやテキストの言語を指定する |
spellcheck * | 編集可能なテキストのスペルや文法をチェックするかどうかを指定する |
style | 当該要素に CSS によるスタイルを適用する |
tabindex | (Tab キーを押すことによって)その要素にフォーカスを移動できるようにするかどうかを指定する |
title | 要素に説明や補足的な情報を提供する |
translate * | 要素の内容を翻訳して表示するかどうかを指定する。 |
"*" つきの属性は、HTML5 で新規に導入されたものです。
(各属性の詳細については、解説ページを参照してください。)
インベントハンドラ(正式名称は、インベントハンドラ・コンテンツ属性)は、HTML 文書内の要素から JavaScript で記述した処理を呼び出すために使用されるものです。 body 要素でのみ使用可能な
を除いた残りは、グローバル属性と同様に、すべての要素(タグ)で使用可能です。
JavaScript による Webアプリケーションでは、様々な状況に応じて、必要な処理を実行します。 この状況のことをインベント(「事象」の意味)といい、インベントにより処理を実行するやり方をイベントドリブン(イベント駆動)方式といいます。 JavaScript もイベントドリブン方式のスクリプト言語です。
インベントハンドラには、以下のものがあります。
"#" つきの属性は、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 | フォームを送信しようとした時 |
HTML 4.01 までは、要素の包含関係を規定するために、要素は「ブロック要素」と「インライン要素」の2種類に分類されておりました。
HTML5 では、これらが廃止されるとともに、どの要素にどの要素を含むことができるかという取り決めが詳細かつ厳密なもの(コンテンツ・モデル)となりました。 そのうちの1つとして、次の9つのカテゴリーによる要素の分類とそれによる包含関係の規則が導入されています。
これらのうち、はじめの7つの包含関係を図に示すと次のようになります。
なお、機能別の分類とは異なり、要素(タグ)は、上の9つのカテゴリーのうち、必ずどれかに属しているわけではなく、また、属するカテゴリーも1つに限られているわけではありません。 つまり、上のカテゴリーのいずれにも属さない要素や複数のカテゴリーに属する要素があります。
さらに、また、ここに示した要素のカテゴリーによる分類と後述の機能別の分類の項目には、原語では同じ言葉や似通った言葉が使われています。 これらを明確に区別して混同を避けるために、カテゴリーの方はあえて元のままのカタカナ表記となっています。 この点、意味が分かりづらく、また、覚えにくいですが、あまり意味にこだわらずに、要素の包含関係を決めるための分類として、とりあえず理解してください。
ブラウザーの画面上には表示されない HTML 文書の付加的な情報をメタデータ(metadata)といいます。 これらを記述する要素です。
メタデータ・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
HTML 文書の本体とアプリケーションで使用されるほとんどの要素は、フロー・コンテンツ(Flow content)に分類されます。
フロー・コンテンツに属する要素は、つぎのものです。
条件付きでフロー・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
章や節などの段落のグループを作って、文書全体における役割を明確にするための要素です。
セクショニング・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
セクショニング・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならセクショニング・コンテンツに属する要素を置くことができます。
見出し(heading)を書くための要素です。
ヘッディング・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
ヘッディング・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならヘッディング・コンテンツに属する要素を置くことができます。
フレージング・コンテンツは、文書のテキストとその段落内での記述のために使用される要素です。
フレージング・コンテンツに属する要素は、つぎのものです。
条件付きでフレージング・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
フレージング・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならフレージング・コンテンツに属する要素を置くことができます。
画像や映像を表示したり、音声を再生したり、特定のオブジェクトを HTML 文書内に組み込むための要素です。
エンベッディッド・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
エンベッディッド・コンテンツに属するすべての要素はフレージング・コンテンツに属しますので、フレージング・コンテンツが置ける場所やフロー・コンテンツが置ける場所ならエンベッディッド・コンテンツに属する要素を置くことができます。
閲覧者の操作や入力の対象となる要素です。
インタラクティブ・コンテンツに属する要素は、つぎのものです。
条件付きでインタラクティブ・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
インタラクティブ・コンテンツに属するすべての要素はフロー・コンテンツに属しますので、フロー・コンテンツが置ける場所ならインタラクティブ・コンテンツに属する要素を置くことができます。
一部の要素は、セクショニング・ルートと呼ばれるカテゴリーに属します。
HTML 文書に限らず、少し長めの文書では、通常、章や節などの相互に関連した階層構造をもちます。 しかし、セクショニング・ルートに属する要素は、その前後のコンテンツとは切り離されたものと見なされます。 つまり、このカテゴリーに属する要素は、このような階層構造から独立したコンテンツと見なされるのです。
セクショニング・ルートに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
コンテンツ・モデル が、フロー・コンテンツまたはフレージング・コンテンツの要素は、その中に パルパブル・コンテンツ (Palpable content) と呼ばれる子ノードを1個以上もつことが要求されます。
パルパブル・コンテンツに属する要素は、つぎのものです。
条件付きでパルパブル・コンテンツに属する要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
HTML5 では、どの要素にどの要素を含むことができるかという取り決めが詳細かつ厳密に行われております。 そして、この取り決めをコンテンツ・モデル(Content model)という名前で呼んでいます。
HTML5 におけるコンテンツ・モデルの主要かつ代表的なものはカテゴリーによるものですが、それ以外のコンテンツ・モデルを採用している要素もあるので、注意が必要です。
コンテンツ・モデルの主なものは、つぎのものです。
このうち、1のカテゴリーによるコンテンツ・モデルでは、通常、要素が含むことができる要素は、自身が属するカテゴリーのうちの指定された1つに属するものに限定されます。
また、2 の例としては、<hgroup> があり、この要素に対するコンテンツ・モデルでは、<hgroup> と </hgroup> の間に含むことができる要素として、<h1>,<h2>,<h3>,<h4>,<h5>,<h6> が直接指定されています。
最後の 3 のトランスペアレントは、この要素を含む親要素がもつコンテンツ・モデルをこの要素が含む子要素(親要素から見ると孫要素)に適用するという透過型のコンテンツ・モデルです。 つまり、このコンテンツ・モデルが指定された要素では、その要素(のタグ)を取り除いた形で内容に親要素のコンテンツ・モデルを適用するという形式の処理になります。
以上、カテゴリー(categories) と コンテンツ・モデル について述べてきましたが、おそらく 「何と複雑で面倒な!」 とか 「こんなにたくさんの規則は覚えられない!」 とかの感想を持った人が多いと思います。 (私もその一人です。)
しかし、安心してください。 これらの取り決めは、HTML文書が常識的に考えてあるべき形式で書かれるために、明らかに非常識、かつ、通常使用されるべきではない形式の書法(マークアップ)を排除するために設けられた取り決めであることは忘れないでおきましょう。
つまり、英語やその文法を全く知らない場合は、英語の文章は書けませんが、ある程度英語の文章表現に慣れてくると、別に文法はそれほど意識しなくても文章が書けるのと同様です。 「常識的に考えておかしくない文書の構成」 で書く限りは、コンテンツ・モデルに合わない箇所が多発するようなことは、ほとんどありません。
とはいえ、もちろんコンテンツ・モデルに注意が必要な場合もあります。 たとえば、hgroup要素 の中には「見出し」を書くための h1要素 ~ h6要素 しか書くことができません。 したがって、「章の見出し」に続いて1行だけ本文がありすぐに「節の見出し」が続くような場合では、hgroup要素 でこれらの見出しをくくることは出来ません。 (これもよく考えれば当然のことなのですが、...)
HTML5 では、コンテンツ・モデルによる要素の包含関係を規定するために、カテゴリーという要素の分類がされています。 一方、文書内における機能による分類として、要素は以下のように分類されます。
ルート要素は、すべての文書に使用するものです。 そして、すべての HTML による記述は、この要素の中に含まれていなければなりません。 この分類に属する要素は、つぎのただ一つのみです。
したがって、1つの文書には、2つ以上の <html> や </html> を含むことはできません。
ただし、意外なことに、HTML5 の規格の中には、実は、すべての HTML 文書には必ずこの要素を含まなくてはいけないという規定はないのです。 とはいえ、 <html> 要素を含まないような HTML 文書を書くことは、通常まずありませんので、<html> と </html> は、必ず1対含むと覚えておきましょう。
( <html> 要素の詳細については、解説ページを参照してください。)
メタデータとは、ブラウザーの画面上には表示されない HTML 文書の付加的な情報のことをいいます。
この中には、ブラウザーで正常に表示されるために必要な大切な情報も含まれるので、間違いのない記述をするように注意しましょう。
メタデータ関連の要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
スクリプティング要素とは、HTML 文書にスクリプトを組み込むために使用される要素です。
通常は、 <head> と </head> の間に置くことが多いですが、コンテンツ・モデルによれば、それ以外の場所に置くこともできます。
スクリプティング要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
セクション要素は、章節などの文書レベルの構成単位となる要素です。 HTML 4.01 では、 <body> と <h1>~<h6> のみでしたが、HTML5 では、大幅な拡張が行われました。
セクション要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
グループ化要素は、いくつかの要素を1つのグループにまとめたり、グループとグループの区切りとなる境界を設定する要素です。 HTML 4.01 から、新たな要素は、<figure> と <figcaption> の2つだけですが、既存の要素で属性そのほかに変更のあったものがあります。
グループ化要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
テキストレベルの意味づけの原語は、上記の通り、Text-level semantics です。 このセマンティクス(semantics)という言葉は、文書中の表現の表記の方法に対立する概念としての意味や意図をさす言葉です。 つまり、これに属する要素は、いずれも、文書中でのある一定の意味をもった表記のために使われるものであり、「太字」や「斜体」など見栄えを指定するための表記ではありません。
したがって、HTML5 では、<b> や <i> は、もはや「太字」や「斜体」を指定するためのタグではなくなりました。 前者は、「他の文章と区別したいテキストの表記」(ただし、強調や重要性の意味を持たない → この意味をもつ <em> や <strong> があるため)として、また、後者は、「声やムードを表すテキスト、分類用語、技術用語、他言語のイデオム、思考、船の名前などの表記」として、HTML 4.01 までとは定義が異なっていますので注意が必要です。
テキストレベルの意味づけ要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
訂正の原語は、上記の通り、 Edits です。 つまり、一旦作成した文書の後日の追加や削除等の編集経過をそのまま記述するために使われる要素です。 そのため、日本語では、通常、訂正と訳されております。
訂正の要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
組み込みコンテンツとは、画像ファイルや音声ファイルなどの外部リソースを取り込んで、HTML 文書に組み込んだ形の要素を指します。 埋め込みコンテンツともいいます。
HTML5 においては、多数の新要素が導入されるとともに、既存の要素についても種々の拡張がなされております。
組み込みコンテンツの要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
テーブルのデータ要素は、表を作成するために使われる要素です。 HTML 4.01 から新たに追加された要素はありません。 しかし、従来よく行われてきた「レイアウト目的にテーブルを使用する」ことは認められていないなど、変更もあります。
テーブルのデータ要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
HTML 文書内で閲覧者の操作やデータ入力を可能にし、その処理を行うフォームで使われる要素です。 HTML5 において、多数の新要素や属性が導入されて、機能が大幅に拡張されました。
フォーム要素は、つぎのものです。
(各要素の詳細については、解説ページを参照してください。)
リンクは、a,area,および,link により作られる概念的な構造で、2つの資源間の接続を表します。 ただし、このうちの一方は現在の HTML文書です。
HTML では、次の2つの種類のリンクがあります。
(各要素の詳細については、解説ページを参照してください。)
<html> と </html> を含まないような例外的なものを除いて、HTML5 の規約で最も基本的かつ簡単な文書の形式は、つぎのようになります。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Webページの作成例 (1)</title> </head> <body> 最も簡単なWebページです。 </body> </html>
この形式は、HTML5 文書の基本形 といえるものですので、よく覚えておきましょう。
前項の 「HTML5 文書の基本形」 について、HTML4.01 からの変更点 を箇条書きにまとめると、以下の通りです。
HTML4.01 からの各変更点の詳細 は、以下の通りです。
HTML5 から HTML5.1 の主な変更点 を、
の項目別に箇条書きにまとめると、以下の通りです。
HTML5 からの各変更点の詳細 は、こちら です。 また、Takanori Maeda さんの日本語の解説:
「HTML 5.1勧告によるHTML5の仕様変更点まとめ」 も参照してください。一般的なレポートや論文などで使われる定型文書では、つぎのような形が例として挙げられます。
<!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 の本文では、アンパサンド(&)、右大不等号(<)、左大不等号(>)をそれぞれ、&、<、> と記述する必要があります。この形式を文字参照と呼びます。加えて、タグの属性部で、"..." の中ではダブルクォーテーション(")を "、'...' の中ではシングルクォーテーション(')を ' と記述する必要があります。
太字にするには <b> を用います。 <img src="xx.gif" alt="" や ' の説明">
画像が表示できない場合に、ブラウザーでこれを表示すると次のようになります。
なお、このような HTML文書内で使用する特殊文字の変換ツール を提供しておりますので、ご利用ください。
IE8 や IE9 で、上部のメニューや「HTML5 文書形式 (2)」のブラウザー表示部分が正常に表示されないときは、Windows のエキスプローラで 、