HTMLタグ一覧

HTMLタグ一覧

HTMLを使ったサイトの作り方はこちら。

HTMLテンプレートを使ったサイトの作り方はこちら。

基本構造

<html> </html>	HTML文書
<head> </head>	ヘッダー
<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ファイルの表示終了時に実行するイベントハンドラ
<!--  -->	注釈(コメント)
 

ヘッダー

<title> </title>	タイトル
<isindex> </isindex>	
キーワード検索
  prompt="キーワード入力ボックスのプロンプト"
  action="CGIプログラムのURL"
<base> </base>	
基準URL 相対パスのURLは,ここでの設定が基準となる
  href="基準となるURL"
  target="表示先の基準となるフレーム名"
<meta> </meta>	
文書情報
  http-equiv="Content-Type" MIMEタイプ,文字コードセットを指定
              expires     文書の有効期限を指定
              keywords     文書のキーワード
              refresh       文書の自動読み込み設定

  name=      "author"       著者
              keywords      キーワード
              description   文書内容
              robots        検索ロボットの制御

  content=   "DATA"         http-equiv, name のプロパティ指定(必須)。データの区切りは";"
<link> </link>	
文書の前後関係などを定義
  href=url
  rel=link_type  複数文書間の順方向の関係を定義
  rev=link_type  複数文書間の逆方向の関係を定義
  type=     スタイルシートの形式
<script> </script>	
使用するスクリプト言語を宣言する
  language = JavaScript , VBScript など

ページレイアウト

<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>	
番号なしリスト
type=disk, circle, square  行頭記号の種類設定
※表示例
・テスト1
・テスト2
・テスト3
<ol> </ol>	
番号付きリスト
type=1, a, A, i, I      行頭番号の種類設定
start=n  開始番号(数値)
※表示例
1.テスト1
2.テスト2
3.テスト3
<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  サーバーサイド・イメージマップ
<map> </map>	
イメージマップの指定
  name=map_name(必須 usemapで指定したmap_name)
<area>	
イメージマップデータ <map> </map>内でリンク先を指定
  shape=rect  リンク領域形状 四角形
        circle         円形
        poly          多角形
  coords="x1,y1,x2,y2"  四角形の場合”左上と右下の座標”
         "x,y,r"      円形の場合 ”中心の座標,半径”
      "x1,y1,x2,y2,.." 多角形の場合左上から反時計回りに頂点の座標
  href="url"  指定したareaでのリンク先
  alt="text"  イメージの内容を記述

フォーム

<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="パラメータの値" 

フレーム

<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>	
フレーム未対応ブラウザでの表示

引用元:http://www.fureai.or.jp/~irie/html-tag/