構文
<!DOCTYPE>
<html>
<head>
:
</head>
<body>
:
</body>
</html>
説明文
HTML文書は大きく分けてヘッダ部分とボディー部分に分けられる。<body>ヘッダはHTMLのWebページの本文を記載する。一般的に<body>に記載した内容がWebページに表示される。
<body>タグは開始タグおよび終了タグのいずれも省略することができる。しかし,HTMLの本文であるということを表すために記述しておくとよい。
また,HTML 4 Transitionalでは,<body>タグ直下にブロック要素およびインライン要素を配置できるが,HTML 4 Strictからはブロック要素のみを配置することが推奨している。そのため,タグを利用せずに文書を記載したり,画像タグといったインラインタグを直接することは推奨されない。<p>や<div>といったブロック要素のタグを利用するようにする。
サンプル
HTMLソース
<html lang="ja">
<head>
<title>HTMLの作成の仕方</title>
</head>
<body>
<h1>HTMLとは</h1>
:
</body>
</html>
ブラウザ表示例
対応状況
HTML |
IE |
Firefox |
Opera |
4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素,タグ
タグ要素 |
ヘッダ要素 |
包括可能要素 |
HTML 4 Strict:ブロック要素,<ins>,<del>
HTML 4 Transitional:ブロック要素,インライン要素,<ins>,<del> |
タグ記述条件 |
開始タグ:省略可 終了タグ:省略可 |
属性
よく利用する属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
background=URL |
Webコンテンツの背景に表示する画像ファイルのURLを指定する |
× |
○ |
|
bgcolor=色 |
Webコンテンツの背景の色を指定する。色は「#a0ffff」のような16進数表記または「red」や「blue」などの色の名前で指定できる |
× |
○ |
|
alink=色 |
マウスでクリックしている際の,リンクの文字の色を指定する。色は「#a0ffff」のような16進数表記または「red」や「blue」などの色の名前で指定できる |
× |
○ |
|
link=色 |
リンクのはられた文字の色を指定する。色は「#a0ffff」のような16進数表記または「red」や「blue」などの色の名前で指定できる |
× |
○ |
|
text=色 |
コンテンツ内の文字の色を指定する。色は「#a0ffff」のような16進数表記または「red」や「blue」などの色の名前で指定できる |
× |
○ |
|
vlink=色 |
訪問済みのリンクの文字の色を指定する。色は「#a0ffff」のような16進数表記または「red」や「blue」などの色の名前で指定できる |
× |
○ |
|
その他の属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
bgproperties=値 |
Webページをスクロールした際に,背景画像を固定するかを設定する。「fixed」または「1」を指定すると背景が固定され,「0」またはこの属性を指定しないと背景はスクロールする |
× |
× |
IE |
bottommargin=余白幅 |
表示するコンテンツに対して下の余白を指定する。単位はピクセル |
× |
× |
IE |
class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に,rtlを指定すると「右から左」に表示する。しかし,多くのWebブラウザでは,文字コードを自動判別し,自動的に表示方向を決定している。そのため,日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や,Java Scriptでのタグの制御,個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
lang=言語 |
タグ内に記述した言語。例えば,日本語の場合は「ja」,英語の場合は「en」を指定する |
○ |
○ |
|
leftmargin=余白幅 |
表示するコンテンツに対して左右の余白を指定する。単位はピクセル |
× |
× |
IE |
marginheight=余白幅 |
表示するコンテンツに対して上下の余白を指定する。単位はピクセル |
× |
× |
Fox |
marginwidth=余白幅 |
表示するコンテンツに対して左右の余白を指定する。単位はピクセル |
× |
× |
Fox |
rightmargin=余白幅 |
表示するコンテンツに対して右の余白を指定する。単位はピクセル |
× |
× |
IE |
style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは,タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
topmargin=余白幅 |
表示するコンテンツに対して上下の余白を指定する。単位はピクセル |
× |
× |
IE |
マウスやキーボードの状況変化に関わる属性
属性 |
意味 |
対応 |
HTML 4s |
HTML 4t |
その他 |
onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下して離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーを押下した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で,キーボードのキーから離した場合に,指定したスクリプトを実行する |
○ |
○ |
|
onload=スクリプト |
HTMLドキュメントが読み出された場合に,指定したスクリプトを実行する |
○ |
○ |
|
onunload=スクリプト |
表示中のWebページ閉じる場合に,指定したスクリプトを実行する |
○ |
○ |
|
関連項目