HTMLタグ一覧
目 次 |
<html> <head> <body> <!-- -->
基本構造の例
BODY タグ設定例
カラーサンプル
| <title> <isindex> <base> <meta> <link> <script>
META タグの例
| <hn> <hr> <br> <p> <center> <div> <pre>
<blockquote> <address> <noscript>
ページレイアウトの例
| <font> <basefont> <i> <tt> <b> <u> <strike>
<big> <small> <sub> <sup> <em> <strong>
<code> <samp> <kbd> <var> <cite>
FONTタグの例
| <ul> <ol> <li> <dl> <dt> <dd>
リストの例
| <table> <tr> <th> <td> <caption>
表の例
| <a>
ハイパーリンクの例
| <img> <map> <area>
<IMG>タグのオプション解説
クリッカブル・マップの例
| <form> <input> <select> <option> <textarea>
フォームの例
| <applet> <param>
| <frameset> <frame> <noframes>
フレームの例
| "e; & < > ©
| |
基本構造 |
<html> </html> | HTML文書 |
<head> </head> | ヘッダー |
<body> </body> | ボディ(本文)文書全体のデザインを設定 |
<!-- --> | 注釈(コメント) |
基本構造の例 BODYタグ設定例 カラーサンプル |
background="filename" 背景のタイルイメージを指定 bgcolor =#rrggbb or colorname 背景の色 text =#rrggbb or colorname テキストの色 link =#rrggbb or colorname リンクの色 vlink =#rrggbb or colorname アクセス済みのリンク色 alink =#rrggbb or colorname アクセス中のリンクの色 onLoad =code HTMLファイルの読み込み完了時に実行するイベントハンドラ onUnload =code HTMLファイルの表示終了時に実行するイベントハンドラ |
ヘッダー HEADER |
<title> </title> | タイトル |
<isindex> </isindex> | キーワード検索 |
prompt="キーワード入力ボックスのプロンプト" action="CGIプログラムのURL" | |
<base> </base> | 基準URL 相対パスのURLは,ここでの設定が基準となる |
href="基準となるURL" target="表示先の基準となるフレーム名" | |
<meta> </meta> | 文書情報 |
<link> </link> | 文書の前後関係などを定義 |
<script> </script> | 使用するスクリプト言語を宣言する |
language = JavaScript , VBScript など | |
META タグの例 |
http-equiv="Content-Type" MIMEタイプ,文字コードセットを指定 expires 文書の有効期限を指定 keywords 文書のキーワード refresh 文書の自動読み込み設定 name= "author" 著者 keywords キーワード description 文書内容 robots 検索ロボットの制御 content= "DATA" http-equiv, name プロパティ指定 データの区切りは";" |
ページレイアウト関連 |
<hn> </hn> | 見出し文字(n=1 最大 〜 n=6 最小) |
<hr> | 横罫線を引く |
width = n, n% 線の長さ(pixel or %) size = n 線の太さ(pixel) align = left , center , right noshade 平面的に表示 | |
<br> | 強制改行 |
clear = all , left , right イメージに対するテキストの回り込みを解除する | |
<p> </p> | 段落 |
align = left, center, right | |
<center> </center> | センタリング |
<div> </div> | 分割テキスト(左・中央・右揃え) |
align = left, center, right | |
<pre> </pre> | 整形済みテキスト(改行やタブをそのまま表示) |
<blockquote> </blockquote> | ブロック引用(上下に空白行,左右がインデントされる) |
<address> </address> | アドレス情報(イタリック体で表示される) |
<noscript> </noscript> | スクリプト言語未対応ブラウザで表示される範囲を指定 |
ページレイアウトの例 |
フォント関連 |
<font> </font> | フォント |
size=n 最大はn=7 size=+n basefontに対する相対値 n=1〜6 color=#rrggbb, colorname フォント色指定 | |
<basefont> | ベースフォント |
size = n | |
<i> </i> | イタリック体 |
<tt> </tt> | 等幅フォント |
<b> </b> | ボールド |
<u> </u> | アンダーライン |
<strike> </strike> | |
<big> </big> | 大きめのフォント |
<small> </small> | 小さめのフォント |
<sub> </sub> | 下付文字 H2O |
<sup> </sup> | 上付文字 x2+y2=9 |
<em> </em> | 強調文字 |
<strong> </strong> | 強い強調 |
<code> </code> | プログラムコード PROGRAM CODES
|
<samp> </samp> | USED FOR SAMPLE OUTPUT |
<kbd> </kbd> | KEYBOARD TYPED |
<var> </var> | 変数名 variables |
<cite> </cite> | 引用 used for citations |
リスト(箇条書き) |
<ul> </ul> | 番号なしリスト Unnumbered List |
type=disk, circle, square 行頭記号の種類設定 | |
<ol> </ol> | 番号付きリスト Ordered List |
type=1, a, A, i, I 行頭番号の種類設定 start=n 開始番号(数値) | |
<li> </li> | リスト項目 |
type=disk, circle, square (<ul> </ul>の場合のみ) type=1, a, A, i, I (<ol> </ol>の場合のみ) value=n 開始番号(数値) | |
<dl> </dl> | 定義型リスト Definition Lists |
<dt> </dt> | 定義語 Term name |
<dd> </dd> | 定義内容 Term Definition |
リストの例 |
表(TABLE) |
<table> </table> | 表組み |
align=left, center, right border=n 表の外枠の太さ(pixel default:1) width=n, n% 表の幅(pixel or %) height=n, n% 表の高さ(pixel or %) cellspacing=n 表の枠の太さ(pixel default:2) cellpadding=n 枠と文字の間隔(pixel default:1) | |
<tr> </tr> | 表の行 |
align=left, center, right 左右の配置 valign=top, middle, bottom 上下の配置 | |
<th> </th> | 表の見出し要素(字体がボールドになる) |
width=n セルの幅 height=n セルの高さ rowspan=n 複数行にまたがるセルの指定 colspan=n 複数列にまたがるセルの指定 nowrap セル内折り返し禁止 align=left, center, right 左右配置(default:center) valign=top, middle, bottom 上下配置(default:middle) bgcolor=#rrggbb , colorname セルの背景色 | |
<td> </td> | 表のデータ要素 |
width=n セルの幅 height=n セルの高さ rowspan=n 複数行にまたがるセルの指定 colspan=n 複数列にまたがるセルの指定 nowrap セル内折り返し禁止 align=left, center, right 左右配置(default:left) valign=top, middle, bottom 上下配置(default:middle) bgcolor=#rrggbb , colorname セルの背景色 | |
<caption> </caption> | 表題 |
align=top, bottom (default:top) | |
表の例 |
ハイパーリンク |
<a> </a> | アンカー Anchor |
href="url" リンク先のURL href=#marker_name ページ内のアンカーに飛ぶ href="mailto:your@mail.address" メール機能呼び出し name=marker_name ページ内にアンカーを設定 target=frame_name 表示するフレームを指定 target=top 別ウィンドウを開いて表示 target=_top フレームを解除して表示ハイパーリンクの例 |
イメージ(画像)関連 |
<img> | イメージ Inline Image | ||||||||
src="url" 表示するイメージのURL alt="text" 画像を表示できないときの説明 align=top テキストを画像の上端に合わせる middle テキストを画像の中央に合わせる bottom テキストを画像の下端に合わせる left 画像を左に配置しテキストを回り込ませる right 画像を右に配置しテキストを回り込ませる width=n, n% 画像の幅 height=n, n% 画像の高さ border=n 枠線の太さ hspace=n 画像左右のスペース vspace=n 画像上下のスペース usemap=url#map_name クライアントサイド・イメージマップ ismap=url#map_name サーバーサイド・イメージマップ |
フォーム |
<form> </form> | フォーム |
action="処理するCGIプログラムのURL" ="mailto:address" method="POST", "GET" enctype="multipart/form-data" 内容を文字コードに合わせてエンコードして送信 |
|
<input> | 入力エリアの作成 |
type=text テキストフィールド(デフォルト) password パスワードフィールド checkbox チェックボックス radio ラジオボタン submit 送信ボタン image グラフィカル送信ボタン reset リセットボタン file ファイル名入力 hidden 隠蔽フィールド name= 入力フィールド名 value= データのデフォルト値,ボタン名 checked type=checkbox, radio のデフォルトチェック size=n type=text, file の入力フィールド幅(default:20) maxlength=n type=text, password 時に入力できる最大文字数 src=url グラフィカル送信ボタンのイメージURL align=top, middle, bottom, left, right グラフィカル送信ボタン時のテキスト配置 |
|
<select> </select> | 選択メニュー |
name= selectメニュー名(必須) size=n 複数表示時の行数 multiple 複数項目の選択を許可 |
|
<option> </option> | <select> </select>内で選択項目を指定 |
selected デフォルトで選択された状態にしておく value="text" 選択項目の代わりに送信したいデータ |
|
<textarea> </textarea> | 複数行テキスト入力フィールド |
name= テキストフィールド名 rows=n 縦サイズ(行数) cols=n 横サイズ(1行文字数) wrap=soft 横サイズに合わせて改行(画面表示のみ) hard 横サイズに合わせて改行(送信時に改行コード付加) off 改行なし(デフォルト)フォームの例 |
JAVA |
<applet> </applet> | Java Appletの設定 |
codebase="Java AppletのURL" code="Java Appletのclassファイル" (必須) alt="Java未対応ブラウザ用代用テキスト" name="Java Applet名" width=n, n% (必須) height=n, n% (必須) align=top, middle, bottom, left, right hspace=n vspace=n | |
<param> </param> | Java Appletのパラメータ |
name="パラメータ名" (必須) value="パラメータの値" |
フレーム(HTML3.2には含まれません) |
<frameset> </frameset> | フレーム設定 |
rows="n1,n2,*" フレームの高さ(pixel) "n1%,n2%,*" (%) *は残りの割合 cols="n1,n2,*" フレームの幅(pixel) "n1%,n2%,*" (%) frameborder=yes, no (default:yes) | |
<frame> </frame> | フレームに表示するデータを設定 |
src="フレームに表示するデータのURL" name="フレーム名" marginwidth=n フレーム内左マージン(pixel) marginheight=n フレーム内上マージン(pixel) scrolling=yes, no, auto スクロールバーの表示(default:auto) noresize フレームサイズを固定 | |
<noframes> </noframes> | フレーム未対応ブラウザでの表示 |
フレームの例 |
特殊文字 |
文字 | 文字名 | 文字コード |
---|---|---|
" | " | " |
& | & | & |
< | < | < |
> | > | > |
スペース | |   |
© | © | © |
この一覧について |
- HTML3.2準拠のタグを中心に集めました。
- 文字がグレーのタグやオプションはHTML3.2に含まれていないもののうち Netscape Navigator 及び Internet Explorer共に使用可能なタグです。
- オレンジ色で表示した終了タグは省略可能ですが省略しない方がよいでしょう。