HTML クィックリファレンス

Last modified: 2004/12/27

略語

WWW
World-Wide Web (Webとも略す) -- ハイパーテキスト形式の分散情報システム
SGML
Standard Generalized Markup Language -- マークアップ言語(markup language)を記述するための規格
DTD
Document Type Definition -- SGMLを使って書かれた特定のマークアップ言語，文書の型定義
HTML
HyperText Markup Language -- SGMLのDTDで，WWWの文書構造を定義する要素(マークアップタグ)の集まり
URL
Uniform Resource Locator -- インターネット上の資源の所在地やアクセス方法などの情報を形式化したもの

文書構造

<!doctype html public ...>
HTML文書のドキュメントタイプの宣言
<html>...</html>
HTML文書の指定
<head>...</head>
文書ヘッダ部分
<body [background="..."] [bgcolor="..."] [text="..."] [link="..."] [vlink="..."] [alink="..."]> ...</body>
文書本体部分
属性:
background
背景画像のURL
bgcolor
背景色; RGBの16進数値(#rrggbb) あるいは カラーネーム
text
文字の基本表示色; RGBの16進数値(#rrggbb) あるいは カラーネーム
link
リンクテキストの色; RGBの16進数値(#rrggbb) あるいは カラーネーム
vlink
アクセス済みリンクテキストの色; RGBの16進数値(#rrggbb) あるいは カラーネーム
alink
アクティブリンクテキストの色; RGBの16進数値(#rrggbb) あるいは カラーネーム
<!-- コメント -->
注釈

文書ヘッダ部分

<title>...</title>
文書のタイトル
<base href="...">
ベース文書の指定
属性:
href
ベース・アドレス
<meta [http-equiv="..."] [name="..."] content="...">
汎用メタ情報
属性:
http-equiv
HTTP応答ヘッダ名 (値には Content-Type, Refresh, Expires,Pragma,Keywords,Reply-toなどがある)
name
メタ情報の名前 (値にはauthor,robots,keywordなどがある)
content
HTTP応答ヘッダあるいはメタ情報に関する実際のデータ

ブロックと見出し

<p [align=...]> ...[</p>]
段落
属性:
align
段落の表示位置 (値はleft,right,centerのいずれか)
<div [align=...]> ...</div>
ひとまとまりの文
属性:
align
ひとまとまりの文の表示位置 (値はleft,right,centerのいずれか)
<center> ...</center>
テキストの中央揃え; <div align=center>の省略形
<h1 [align=...]> ...</h1>, ... , <h6 [align=...]>...</h6>
レベルNの見出し (N = 1..6)
属性:
align
見出しの表示位置 (値はleft,right,centerのいずれか)
<hr [size=...] [width="..."] [align=...] [noshade]>
区切り線(横罫線) (標準の形状は影付き線)
属性:
size
区切り線の太さ
width
区切り線の幅 (ピクセル数あるいは文書幅のパーセンテージ)
align
ページ内の表示位置 (値はleft,right,centerのいずれか)
noshade
区切り線の形状を影無し塗りつぶしにする

リンクと埋め込み画像

<a [name="..."] [href="..."]> ...</a>
アンカー(リンク元／リンク先)の指定
属性:
name
アンカー(リンク元)の名前
href
リンク先のURL
<img src="..." alt="..." [lowsrc="..."] [width=...] [height=...] [align=...] [border=...] [hspace=...] [vspace=...] [usemap="..."] [ismap]>
埋め込み画像(アイコン，絵，イラスト)
属性:
src
画像ファイルのURL
alt
表示画像の代替テキスト
lowsrc
実際の画像の前に表示する低解像度の画像ファイルのURL
width, height
画像サイズ(幅，高さ); 指定することでページ表示を速められる
align
画像とテキストとの位置関係 (値はtop,middle,bottom,left,rightのいずれか)
border
画像の周りの枠の太さ (ピクセル数)
hspace
画像左右の余白
vspace
画像上下の余白
usemap
クライアントサイド・イメージマップに適用されるマップ設定の名称(URL)
ismap
サーバサイド・イメージマップの指定
<map name="..."> ...</map>
クライアントサイド・イメージマップのマップ設定
属性:
name
マップ設定の名称
<area [shape=...] [coords="..."] [href="..."] [nohref] alt="...">
クライアントサイド・イメージマップ内のリンク箇所(ホットゾーン)
属性:
shape
リンク箇所の形状 (値はrect,circle,polyのいずれか)
coords
その形状を表す座標:
  • shape=rect coords="left-x,top-y,right-x,bottom-y"
  • shape=circle coords="center-x,center-y,radius"
  • shape=poly coords="x1,y1,x2,y2,x3,y3,...,xn,yn"
href
リンク先のURL
nohref
このリンク箇所に関してはリンクを張らない
alt
代替テキスト

リスト（箇条書き）

<dl [compact]> ...</dl>
定義型リスト／用語集
属性:
compact
コンパクトスタイルの指定
<dt>...[</dt>]
定義型リストの用語・項目
<dd>...[</dd>]
その用語の定義・解説文
<ul [type="..."] [compact]> ...</ul>
番号なしリスト (リストの入れ子時の文頭マークは，標準的には 黒丸，丸，四角の順になる)
属性:
type
文頭マークの形 (値はdisc,circle,squareのいずれか)
compact
コンパクトスタイルの指定
<ol [type="..."] [start=...] [compact]>...</ol>
番号付きリスト (標準の文頭の数値タイプは算用数字)
属性:
type
文頭の数値タイプの形 (値は1,a,A,i,Iのいずれか)
start
番号付きリストの開始番号
compact
コンパクトスタイルの指定
<li [type="..."] [value="..."]>...[</li>]
リスト項目
属性:
type
項目の文頭マークあるいは数値タイプの形 (値はdisc,circle,square (番号なしリストの場合), 1,a,A,i,I (番号付きリストの場合)のいずれか)
value
番号付きリストにおける項目の番号

テキスト・フレーズ

テキスト
<tt>等幅表示 (TeleType)</tt>
<b>太字 (Bold)</b>
<i>斜字体 (Italic)</i>
<u>下線 (Underline)</u>
<strike>取消線 (Strike)</strike>
<big>拡大表示</big> と <small>縮小表示</small>
下付き: x<sub>2</sub>
上付き: x<sup>n</sup>
フレーズ
<em>強調 (Emphasis)</em>
<strong>より強い強調 (Strong emphasis)</strong>
<code>ソースコード (Source code)</code>
<samp>サンプルテキスト (Sample)</samp>
<kbd>キーボード入力文字列 (Keyboard)</kbd>
<var>変数 (Variable)</var>
<cite>引用 (Citation)</cite>

<font [size="..."] [color="..."]>...</font>
部分的テキストの書体変更
属性:
size
フォントサイズの固定値(1〜7)あるいは相対値(+1〜+6, -1〜-6)の指定 (標準サイズは 3)
color
文字色; RGBの16進数値(#rrggbb) あるいは カラーネーム
<basefont size="...">
基本文字サイズの指定
<br [clear=...]>
強制改行
属性:
clear
画像のテキスト回り込みの解除方法の指定 (left|right|all|none)
<blockquote> ...</blockquote>
ブロック型の引用部分
<address>...</address>
署名，宛先，連絡先
<pre [width=...]> ...</pre>
整形済みテキスト
属性:
width
1行あたりの最大文字数

表組

<table [border[=...]] [cellspacing=...] [cellpadding=...] [width=...]>...</table>
表組
属性:
border
表組の外枠の太さ (ピクセル数)
cellspacing
表組のセル間の間隔(内罫線の太さ) (標準サイズは 2ピクセル)
cellpadding
表組のセル内の余白 (標準サイズは 1ピクセル)
width
表組の幅 (ピクセル数あるいは文書幅のパーセンテージ)
<tr [align=...] [valign=...]> ...[</tr>]
表組の行; 行の中にはヘッダ項目あるいはデータ項目を含む
属性:
align
行の横方向の表示位置 (値はleft,right,centerのいずれか)
valign
行の縦方向の表示位置 (値はtop,middle,bottomのいずれか)
<td [align=...] [valign=...] [nowrap] [colspan=...] [rowspan=...] [width=...] [height=...]> ...[</td>]
表組のデータ項目(セル)
属性:
align
セル内の横方向の表示位置 (値はleft,right,centerのいずれか)
valign
セル内の縦方向の表示位置 (値はtop,middle,bottomのいずれか)
nowrap
セル内テキストの改行禁止
colspan
横方向で結合するセル数
rowspan
縦方向で結合するセル数
width, height
セルの大きさ(幅，高さ)
<th [align=...] [valign=...] [nowrap] [colspan=...] [rowspan=...] [width=...] [height=...]> ...[</th>]
表組のヘッダ項目(セル)
属性:
align
セル内の横方向の表示位置 (値はleft,right,centerのいずれか)
valign
セル内の縦方向の表示位置 (値はtop,middle,bottomのいずれか)
nowrap
セル内テキストの改行禁止
colspan
横方向で結合するセル数
rowspan
縦方向で結合するセル数
width, height
セルの大きさ(幅，高さ)
<caption [align=...]> ...</caption>
表のタイトル
属性:
align
表組との位置関係 (値はtop,bottomのいずれか)

フォーム

<form [action="..."] [method=...] [enctype="..."]> ...</form>
データ入力フォーム
属性:
action
フォーム処理プログラムのURL
method
フォームの発行方法 (値はGET,POSTのいずれか)
enctype
フォームのデータ表現
<input [type=...] [name="..."] [value="..."] [size="..."] [maxlength=...] [src="..."] [align=...] [checked]>
フォームの入力フィールド
属性:
type
入力データの型 (値は text,password,checkbox,radio,submit,reset,file,image,hidden のいずれか)
name
入力フィールドの名前
value
デフォルト値／初期設定値
size
入力フィールドのサイズ (text,password型のみ)
maxlength
最大有効データ長 (text,password型のみ)
src
画像ファイルのURL (image型のみ)
align
画像とテキストとの位置関係 (値はtop,middle,bottomのいずれか) (image型のみ)
checked
デフォルト選択肢の指定 (checkbox,radio型のみ)
<select name="..." [size=...] [multiple]> ...</select>
選択リスト
属性:
name
選択リストの名前
size
一度に表示する選択肢の数
multiple
複数選択の許可
<option [value="..."] [selected]>...[</option>]
選択リストの選択肢
属性:
value
選択時のデータ
selected
デフォルト選択項目の指定
<textarea name="..." rows=... cols=...> ...</textarea>
テキスト入力領域
属性:
name
入力領域の名前
rows
入力領域の高さ(行数)
cols
入力領域の幅(バイト数)

特殊文字／記号

エスケープ・シーケンス
&amp;
アンパサンド: &
&lt;
小なり記号: <
&gt;
大なり記号: >
&quot;
ダブルクォート: "
アクセント付き文字
ISO Latin 1 文字，例えば:
&ouml;
ウムラウト付きの小文字の o(オー): ö
&eacute;
揚音アクセント付きの小文字の e: é
&Ugrave;
抑音アクセント付きの大文字の U: Ù
&szlig;
小文字のシャープ s (ドイツ語の sz 合字): ß

カラーネーム

Black(=#000000) Gray(=#808080) Silver(=#C0C0C0) White(=#FFFFFF)
Red(=#FF0000) Maroon(=#800000) Purple(=#800080) Fuchsia(=#FF00FF)
Lime(=#00FF00) Green(=#008000) Olive(=#808000) Yellow(=#FFFF00)
Blue(=#0000FF) Navy(=#000080) Teal(=#008080) Aqua(=#00FFFF)
細野 文雄 <hosono@si.gunma-u.ac.jp>