HTMLタグ（要素名と属性）／こまホームページシステムズ静岡

HTMLタグ（要素名と属性）の主なもの一覧。

HTMLタグ（要素名と属性）の主なもの一覧

ドキュメント（DOCTYPE、body、h*、p、blockquote、q、div、em、strong、acronym、abbr、address）
リンク（a）
画像（img）
リスト（ul、ol、li、dl、dt、dd）
フォーム（form、input、button、textarea、select、option）
テーブル（table、caption、tr、th、td）
フレーム（iframe）
プラグイン（object、embed、noembed）
テキスト（font、br、nobr、hr、center、pre、b、i、s、strike、tt、u、sup、sub、big、small）
特殊文字・コメント（♠、♣、♥、♦、©、®、&、¥、±、²、³、<、>、コメント）

ドキュメント

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

不適切な（廃止予定の）タグとフレーム関連のものを除いた、厳密で正確なバージョン。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

不適切な（廃止予定の）タグを含み、フレーム関連のものを除いたバージョン。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

不適切な（廃止予定の）タグと、フレーム関連のものを含んだバージョン。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>タイトル</title>
  <meta name="description" content="（概要）">
  <meta name="keywords" content="（キーワード1）,（キーワード2）,（キーワード3）">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <link rel="stylesheet" href="（URL）" type="text/css">
  <script language="javascript" src="（URL）" type="text/javascript"></script>
  <meta name="author" content="（著者）">
  <meta name="robots" content="index,follow">
  <meta name="revisit_after" content="7 days">
  <meta name="copyright" content="（著作権）">
  <meta name="robots" content="NOYDIR,NOODP">
  <meta http-equiv="refresh" content="（秒数）;URL=（絶対パス）">
</head>
<body>
</body>
</html>

bgcolor …
background … ファイルを指定。これを使う時は「bgcolor」も指定しておく方が良い。
text … テキストの標準の色。
link … リンク設定部分の色。
alink … 読み込み中のリンクの色。
vlink … 訪問済みのリンクの色。

<h*>～</h*>

見出し
「*」は「1」…題、「2」…部、「3」…章、「4」…節、「5」…項、「6」…小見出し。
align … left,center,right

段落。空の「<p></p>」は無視される。
align … left,center,right

引用・抜粋文。

改行などを伴わない短い文章の引用。
cite属性（IE非対応）…どのサイトからの引用文なのか

囲まれた範囲がひとまとまり
align … left,center,right
<div align="right"></div>

強調

より強い強調

頭文字を連結した略語
<acronym title="Small Office Home Office">SOHO</acronym>

頭文字以外の略語
<abbr title="Hypertext Markup Language">HTML</abbr>

<address>社名、URL、Eメール、所在地、電話番号、FAXなど</address>

ドキュメントの製作者と連絡をとるための情報を記載

リンク

href="リンク先URL（#キーワード）" … 同一ページ内へは「リンク先URL」省略可。
name="キーワード" … リンク先の表示位置。
target="" … _blank,_self,_parent,_top
　※「self」のフレームからリンクした場合の表示関係図
href="mailto:メールアドレス"
<a href="" target="_blank"></a>

画像

<img>

src
alt … 画像の代わりのテキスト
width … ピクセル、%。
height … ピクセル、（% … Win版NNでは不可。Mac版NNでは可）。
border … ピクセル。
align … left,right,top,middle,bottom
vspace … 画像に対する上下の余白。ピクセル。
hspace … 画像に対する左右の余白。ピクセル。
<img src="" width="" height="" border="0" vspace="0" hspace="0" alt="">
usemap … イメージマップ。「#マップ名」。
name … マップ名
shape … default（全体）、rect（四角形）、circle（円）、poly（多角形）
coords … 座標,座標…（ピクセル）
- rect … 左上のX座標,左上のY座標,右下のX座標,右下のY座標
- circle … 中心のX座標,中心のY座標,半径
- poly … 角1のX座標,角1のY座標,角2のX座標,角2のY座標,角3のX座標,角3のY座標,角1のX座標,角1のY座標
href … リンク先URL
<map name="">
<area shape="" coords="" href="" alt="">
</map>

フォーム

入力フォーム
action … データの送信先URL
method … get,post
enctype … method="post"の場合のMIMEタイプ。application/x-www-form-urlencoded（デフォルト）。multipart/form-data（input type="file"がある場合に指定する）。text/plain（プレーンテキスト形式）。
<form action="" method="" enctype="">
<fieldset>
  <legend align="right">◯◯</legend>
  <input type="text" name="" value="" size="" maxlength="">
</fieldset>
<input type="radio" name="" value="" checked>
<input type="radio" name="" value="">
<input type="checkbox" name="" value="">
<input type="checkbox" name="" value="">
<textarea name="" cols="" rows="">～</textarea>
<select name="">
  <option value="" selected>～</option>
  <option value="">～</option>
</select>
<input type="submit" name="" value="">
<input type="reset" value="">
</form>

<input>

type … text,password。1行の入力フィールド。改行文字を含めることはできない。
type … hidden。隠しフィールド。
type … radio。ラジオボタン。name属性でグループ化。「 checked」属性を指定すると、そのボタンがあらかじめ選択された状態になる。
type … checkbox。チェックボックス。name属性でグループ化。「 checked」属性を指定すると、そのボタンがあらかじめ選択された状態になる。
type … submit。送信ボタン。
type … reset。リセットボタン。
type … image。画像を送信ボタンにする。属性は「src」「alt」「name」「align 」。回り込みの解除は「<br clear="all">」。
type … file
name … フィールド名。ボタン名。PHPやJavaScriptなどのプログラムからフォーム部品を参照する場合のキー（ラベル）となる。
value … 初期状態で表示されるテキスト。送信されるテキスト。ラベル名。
size … フィールド幅（文字数）。type=text,passwordのみ。
maxlength … 入力可能な最大文字数。type=text,passwordのみ。
<input type="" name="" value="" size="" maxlength="">

ボタン。<button>～</button>の間の内容をボタン上に表示。
type … submit（送信）,reset（リセット）,button（汎用押しボタン。デフォルト。）
name … ボタン名。
value … 送信されるテキスト。
<button type="" name="" value="">～</button>

複数行の入力フィールド。<textarea>～</textarea>の間にテキストを記述することで、あらかじめ入力フィールドの中にそのテキストを表示させることができる。
name … フィールド名
cols … 幅（半角文字数）
rows … 行数
wrap … 改行方法。soft,hard,off。※ HTML4.0、4.01ともに未定義。IE（Internet Explorer）とNN（Netscape Navigator）が独自に拡張したもの。
<textarea name="" cols="" rows="">～</textarea>

プルダウン形式のメニュー
name … メニュー名
value … 送信されるテキスト
selected … あらかじめ選択された状態にする
<select name="">
<optgroup label="◯◯">
<option label="△△" value="" selected>～</option>
<option label="□□" value="">～</option>
</optgroup>
</select>

リストボックス
size … 表示行数
name … メニュー名
multiple … 複数項目の選択を可能にする
value … 送信されるテキスト
selected … あらかじめ選択された状態にする
<select size="" name="" multiple>
<option value="" selected>～</option>
<option value="">～</option>
</select>

テーブル

border … ピクセル。
align … left,center,right
width … ピクセル、%。
height … ピクセル、%。※ HTML4.0、4.01では未定義。
cellspacing … ピクセル。外枠とセル、セルとセルの間隔。
cellpadding … ピクセル。セル枠と内容の間隔。
bgcolor …
background … 画像。
bordercolor … IEのみ有効。
<table border="0" width="750" cellspacing="0" cellpadding="0">

<caption> </caption>
<tr>
  <th> </th>
  <th> </th>
</tr>
<tr align="left" valign="top">
  <td> </td>
  <td> </td>
</tr>
</table>

タイトルを付ける。
align … top,bottom

行
bgcolor …
align … left,center,right
valign … top,middle,bottom,baseline（各セル内の1行目のベースラインを揃える。）

見出し（セル）。
bgcolor …
align … left,center,right
valign … top,middle,bottom,baseline（各セル内の1行目のベースラインを揃える。）
width … ピクセル、%。最初に指定すると、後は省ける。
height … ピクセル（「%」は無効）。最初に指定すると、後は省ける。
background … 画像。
nowrap … 改行しない。
rowspan … 連結するセル数。縦。
colspan … 連結するセル数。横。

セル。
bgcolor …
align … left,center,right
valign … top,middle,bottom,baseline（各セル内の1行目のベースラインを揃える。）
width … ピクセル、%。最初に指定すると、後は省ける。
height … ピクセル（「%」は無効）。最初に指定すると、後は省ける。
background … 画像。
nowrap … 改行しない。
rowspan … 連結するセル数。縦。
colspan … 連結するセル数。横。

フレーム

インラインフレーム
src …
name … フレーム名
width … 幅（ピクセル、%）
height … 高さ（ピクセル、%）
marginwidth … フレーム内の左右の余白（ピクセル）
marginheight … フレーム内の上下の余白（ピクセル）
hspace … フレーム外の左右の余白（ピクセル）
vspace … フレーム外の上下の余白（ピクセル）
scrolling … auto（自動表示・デフォルト）,yes（常に表示）,no（常に非表示）。スクロールバーの表示／非表示。
frameborder … 0（非表示）,1（表示）
align … left,center,right
<iframe src="" name="" width="" height="" marginwidth="" marginheight="" hspace="" vspace="" scrolling="" frameborder="">～</iframe>

プラグイン

プラグインを利用する
src … URL
width … 幅（ピクセル）
height … 高さ（ピクセル）
<embed src="" width="" height=""><noembed>～</noembed>
※ HTML4.0では代わりに<object>を定義。
<object data="（URL）" type="（MIMEタイプ）">～</object>
<object width="" height="">
<param name="movie" value="（パス）"></param>
<embed src="（パス）" type="application/x-shockwave-flash" width="" height="">
<noembed>〜</noembed>
</embed>
</object>

テキスト

color
size … （小）1→2→3→4→5→6→7（大）。基準は「3」。ユーザーの環境に左右される。
face
<font color="#ff0000" size="2"></font>

<br>

改行
clear="all" … 回り込みの解除（「<img>」「<table>～</table>」）
<br clear="all">

改行させない。 ※ HTML4.01では規格外。

<hr>

横罫線
size … 太さ。ピクセル。
width … 長さ。ピクセル、%。
align … left,center,right
noshade … 影無し

中央揃え。

囲まれた部分が入力した通りに等幅フォントで表示される。

太字。

斜体。

抹消線

等幅

下線

上付き。小さめの文字になる。

下付き。小さめの文字になる。

大きめの文字

小さめの文字

特殊文字・コメント

特殊文字

♠ … &spades;
♣ … &clubs;
♥ … &hearts;
♦ … &diams;

¥ … ¥／¥（UTF-8の場合）
± … ±
² … ²
³ … ³

< … <
> … >

非表示。タグを無効にすることもできる。
コメント中に「--」（複数のハイフン）は避けた方が良い。

… スタイルシートの利用が推奨されているタグ（要素名・属性）