Cercando

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>
    フォームの例
  • JAVA
  • <applet> <param>
  • フレーム
  • <frameset> <frame> <noframes> 
    フレームの例
  • 特殊文字
  • &quote; &amp; &lt; &gt; &nbsp; &copy;
  • この一覧について
  • 基本構造
    <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 プロパティ指定 データの区切りは";"
    
    href=url
    rel=link_type  複数文書間の順方向の関係を定義
    rev=link_type  複数文書間の逆方向の関係を定義
    type=     スタイルシートの形式
    
    
    ページレイアウト関連
    <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> スクリプト言語未対応ブラウザで表示される範囲を指定

    ページレイアウトの例
    to TOP
     フォント関連
    <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
    to TOP
    リスト(箇条書き)
    <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

    リストの例
    to TOP
    表(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)

    表の例
    to 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     フレームを解除して表示
    
    
    ハイパーリンクの例
    to 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"             イメージの内容を記述
    

    <IMG>タグのオプション解説  クリッカブル・マップの例
    to TOP
    フォーム
    <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    改行なし(デフォルト)
    
    
    フォームの例 
    to TOP
    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="パラメータの値"
    
    to TOP
    フレーム(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>
    フレーム未対応ブラウザでの表示

    フレームの例
    to TOP
    特殊文字
     
     文字   文字名   文字コード
    "&quot;&#34;
    &&amp;&#38
    <&lt;&#60
    >&gt;&#62
    スペース&nbsp;&#160
    ©&copy;&#169
    to TOP

    この一覧について
    • HTML3.2準拠のタグを中心に集めました。
    • 文字がグレーのタグやオプションはHTML3.2に含まれていないもののうち
      Netscape Navigator 及び Internet Explorer共に使用可能なタグです。
    • オレンジ色で表示した終了タグは省略可能ですが省略しない方がよいでしょう。


    ご利用案内
    Copyright © 2008 Cercando All Rights Reserved.
    inserted by FC2 system