xHTML標準タグのリファレンス（よく使うタグだけ）

目的別リファレンスは、ここを見てください

 

（ひんぱんに使われるタグは、赤字で表示しています）

（ジャンプボタンです）

a b c d e f g h i j k l m n o p q r s t u v w x y z
A
タグ名 働き 使用方法 表示例
<a> リンクをはる

<a href="css.html">相対パスでリンクします</a><br />


<a href="http://sv.tomicom.ac.jp/~hanrin/">絶対パスでリンクします</a><br />


<a href="../index.html">ひとつ上のディレクトリへ</a><br />


<a href="mailto:hanrin@tomicom.ac.jp">メール</a><br />


<a href="../index.html"><img src="img/btnOwners.jpg" border="0" alt="tmp" /></a><br />

相対パスでリンクします

絶対パスでリンクします

ひとつ上のディレクトリへ

メール

イメージでリンク
img
<abbr> 省略の書式 <abbr title="World Wide Web Consoritum">W3C</abbr>  
<acronym> 頭字語の書式 <acronym title="North Atlantic Treaty Organisation">NATO</acronym>  
<address> 連絡先のための書式 <address>
お問合せは<br />
ホームページ：<a href="http://sv.tomicom.ac.jp/~hanrin" >http://sv.tomicom.ac.jp/~hanrin</a><br />
Eメール：<a href="mailto:hanrin@tomicom.ac.jp">hanrin@tomicom.ac.jp</a><br />
住所：〒000-0000　○○県○○市○○町0-0-0<br />
ＴＥＬ：000-000-0000<br />
ＦＡＸ：000-000-0000
</address> 
お問合せは
ホームページ：
Eメール：
住所：〒000-0000　○○県○○市○○町0-0-0
ＴＥＬ：000-000-0000
ＦＡＸ：000-000-0000
<area> イメージマップの領域を決める（<map>タグといっしょに使う） <img src="img/map1.png" width="100" height="100" border="0" usemap="#linked" alt="map"/>
<map name="linked" id="linked">
<area shape="rect" coords="3,4,48,48" href="index.html" alt="left" />
</map>		 map left
B
タグ名 働き 使用方法 表示例
<b> テキストを太字にする <b>ビッグバン</b> ビッグバン 
<base> 基準になるURLを指定 <base href="http://www.google.co.jp/mobile/" />
...
<p>Googleの<a href="../">トップページ</a>です。</p>		  
<bdo> 文字の向き <p>ヘブライ語で｢こんにちは｣は、<bdo dir="ltr" lang="he">םולש</bdo>（シャローム）といいます。</p>  
<big> テキストのサイズをひとまわり大きくする
 テキストの表示に関するタグはいくつかありますが、<em>強調したいとき</em>、<strong>より強く強調したいとき</strong>、普通のテキストに対して<big>相対的にサイズを大きくしたいとき</big>等により使い分けてください。 テキストの表示に関するタグはいくつかありますが、強調したいとき、より強く強調したいとき、普通のテキストに対して相対的にサイズを大きくしたいとき等により使い分けてください。
<blockquote> 引用文であることを表す 私は今日<blockquote>１時に仕事に行った</blockquote>そうして、眠った 私は今日
１時に仕事に行った
そうして、眠った 
<body> 文書の本体を表す <html>
<head>
<title>文書のタイトル</title>
</head>
<body bgcolor="#ffffff" text="#000000">
文書の本体（背景色が白で、文字色が黒で表示される）
</body>
</html> 		 
<br /> 改行

今日は八月三十一日<br />今日で<br />

８月も終わりだ。

 今日は八月三十一日
今日で
８月も終わりだ。 
<button> 画像ボタンを作る <button type="button" name="aaa" value="押しボタン"><img src="img/btnOwners.jpg" width="150" height="40">これがボタンになります</button>  
C
タグ名 働き 使用方法 表示例
<caption> テーブル（表）にタイトルをつける
 <table border="1">
<caption>表のタイトル</caption>
<tr><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td></tr>
</table>
表のタイトル
内容 内容
内容 内容
内容 内容
<cite> 引用の書式 この言葉は<cite>「論語」</cite>からの引用です この言葉は「論語」からの引用です
<code> プログラムコード用書式 <pre>
<code>
public class Test{
public static void main(String[] args){
system.out.println("Hello Takasho!");
}
}
</code></pre>		 
	
	public class Test{
		public static void main(String[] args){
			system.out.println("Hello Takasho!");
		}
	}
 
<col> 列の書式 <table border="1">
<caption>保元の乱</caption>
<colgroup span="5" align="right"><col>
<col style="background:#f96;"><col style="background:#ffc;">
<col style="background:#9fc;"><col style="background:#69f;">
</colgroup>
<tr><th></th><th>天皇家</th><th>藤原氏</th><th>平氏</th><th>源氏</th></tr>
<tr><th>天皇方</th><td>後白河</td><td>忠通</td><td>清盛</td><td>義朝</td></tr>
<tr><th>上皇方</th><td>崇徳</td><td>頼長</td><td>忠正</td><td>為義</td></tr>
</table>		  
<colgroup> 列のグループ化    
D
タグ名 働き 使用方法 表示例
<dd>

定義語と定義の説明の書式

 

 <dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日リヴァプール生まれ。</dd>
<dt>ポール・マッカートニー</dt>
<dd>１９４２年６月１８日リヴァプール生まれ。</dd>
</dl>
ジョン・レノン
１９４０年１０月９日リヴァプール生まれ。
ポール・マッカートニー
１９４２年６月１８日リヴァプール生まれ。
 
<del> 削除されたことを示す書式 <p>彼は、「勿論だ」と<del>合槌を打った</del><ins>相槌を打った</ins>。</p>  
<dfn> 定義語の明示 インターネットとは、<dfn>世界中のネットワークをつないだネットワーク</dfn>である インターネットとは、世界中のネットワークをつないだネットワークである 
<div>

改行付で、ブロックを表示する。

（画面デザインでは、もっとも重要なタグ。CSSといっしょに使う）

 <div style="text-align:center;">
<div style="border: 1px solid black; ">ヘッダー</div>
<div style="border: 1px solid black; float:left;">本文左</div>
<div style="border: 1px solid black; width: 100px;">本文右</div>
<div style="border: 1px solid black; ">フッター</div>
</div>
ヘッダー
本文左
本文右
フッター
<dl> 定義リストの書式 <dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日リヴァプール生まれ。</dd>
<dt>ポール・マッカートニー</dt>
<dd>１９４２年６月１８日リヴァプール生まれ。</dd>
</dl>
ジョン・レノン
１９４０年１０月９日リヴァプール生まれ。
ポール・マッカートニー
１９４２年６月１８日リヴァプール生まれ。
 
<dt> 定義する語の書式 <dl>
<dt>ジョン・レノン</dt>
<dd>１９４０年１０月９日リヴァプール生まれ。</dd>
<dt>ポール・マッカートニー</dt>
<dd>１９４２年６月１８日リヴァプール生まれ。</dd>
</dl>
ジョン・レノン
１９４０年１０月９日リヴァプール生まれ。
ポール・マッカートニー
１９４２年６月１８日リヴァプール生まれ。
 
E
タグ名 働き 使用方法 表示例
<em> 強調する 見栄えに関するタグについては、<em>スタイルシートの使用</em>が推奨された上で、<strong>廃止される</strong>予定にあるそうです。 見栄えに関するタグについては、スタイルシートの使用が推奨された上で、廃止される予定にあるそうです。  
<embed>
(Objectタグに切り替わる）		 ビデオ、音声ファイル、フラッシュムービーなどを組み込む <embed src="img/test.swf" width="200" height="50"></embed>

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得
F
タグ名 働き 使用方法 表示例
<fieldset> フォームの要素を囲む

<fieldset> <legend>グループの名前</legend>
<input type="text" size="5"/>
<input type="text" size="5"/>
<input type="text" size="5"/>
</fieldset>

 
<form> 入力フォームを作る <form action="cgi-bin/aaa.cgi" method="post">
<fieldset> <legend>グループの名前</legend>
名前：<input type="text" name="name" size="40" /><br />
性別：<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女<br />
血液型：<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select><br />
ご感想：<br />
<textarea name="kanso" rows="4" cols="40"></textarea><br />
<input type="submit" value="送信" /><input type="reset" value="リセット" />
</fieldset>
</form>
名前：
性別： 男 女
血液型：
ご感想：

 
<frame> 使用しません    
<frameset> 使用しません    
H
タグ名 働き 使用方法 表示例
<h1>-<h6> 見出し用の書式 <h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6
<head> 文書のヘッダ情報（表示の前にブラウザに渡す情報）を記述する <html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta name="author" content="HTMQ">
<meta name="keywords" content="HTML,スタイルシート,特殊文字,リファレンス">
<meta name="description" content="HTMLタグ・スタイルシートの早見表。">
<meta name="robots" content="all">
<title>文書のタイトル</title>
<link rel="stylesheet" href="../style1.css" />
</head>
<body>
文書の本体
</body>
</html> 		 
<hr /> 横罫線を書く <hr />
<hr width="90%" />
<hr width="300" />
<hr size="20" />
<hr width="20" size="20" />
<hr size="1" color="#000000" />
<hr size="10" color="#0000ff" noshade="true" />
<hr width="300" color="#ff0000" align="right" />
<html> HTML文書であることを示す <html>
<head>
<title>文書のタイトル</title>
</head>
<body>
文書の本体
</body>
</html> 		 
I
タグ名 働き 使用方法 表示例
<i> テキストをイタリック体にする テキストを<i>斜体</i>にします テキストを斜体にします 
<iframe> 別の文書ファイルを表示する <iframe src="css.html" name="sample" width="200" height="150">
この部分はインラインフレームを使用しています。
</iframe>
<img> 画像を表示します <img src="img/btnOwners.jpg" width="150" height="40" alt="Owner"/> owners
<input> フォームの構成部品（入力欄・ボタン等）を作成する

<form action="cgi-bin/aaa.cgi" method="post">
<fieldset> <legend>グループの名前</legend>
<table border="0">
  <tr>
    <td align="right"><b> 名前：</b></td>
    <td><input type="text" name="name" size="30" maxlength="20"></td>
  </tr>
  <tr>
    <td align="right"><b> パスワード：</b></td>
    <td><input type="password" name="pass" size="6" maxlength="4"></td>
  </tr>
  <tr>
    <td align="right"><b>学年：</b></td>
    <td>
      <input type="radio" name="gakunen" value="１年生" />１年生
      <input type="radio" name="gakunen" value="２年生" />２年生
      <input type="radio" name="gakunen" value="３年生" />３年生
      <input type="radio" name="gakunen" value="４年生" />４年生
      <input type="radio" name="gakunen" value="５年生" />５年生
      <input type="radio" name="gakunen" value="６年生" />６年生
    </td>
  </tr>
  <tr>
    <td align="right"><b>好きな課目：</b></td>
    <td>
      <input type="checkbox" name="kamoku" value="国語" />国語
      <input type="checkbox" name="kamoku" value="英語" />英語
      <input type="checkbox" name="kamoku" value="算数" />算数
      <input type="checkbox" name="kamoku" value="理科" />理科
      <input type="checkbox" name="kamoku" value="社会" />社会
      <input type="checkbox" name="kamoku" value="体育" />体育
    </td>
  </tr>
  <tr>
    <td align="right"><b>宿題ファイル：</b></td>
    <td><input type="file" name="syukudai" /></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="submit" value="送信" />
      <input type="reset" value="リセット" />
    </td>
  </tr>
</table>
</fieldset>
</form>
名前：
パスワード：
学年： １年生 ２年生 ３年生 ４年生 ５年生 ６年生
好きな課目： 国語 英語 算数 理科 社会 体育
宿題ファイル：
<ins> 追加されたことを表す書式 <ins title="この部分は後から追加されました" datetime="2009-08-31T22:40:00+09:00">新コーナーを追加しました。</ins> 新コーナーを追加しました。  
K
タグ名 働き 使用方法 表示例
<kbd> キーボードで入力されることをあらわす書式 <kbd>qwerty</kbd>と入力してみてください qwertyと入力してみてください
L
タグ名 働き 使用方法 表示例
<label> フォーム部品と項目名（ラベル）を関連付ける
 <form action="cgi-bin/formmail.cgi" method="post">
<fieldset> <legend>グループの名前</legend>
<label for="namae" accesskey="n">名前：</label>
<input type="text" name="name" id="namae" /><br />
性別：<input type="radio" name="sex" value="male" id="otoko" />
<label for="otoko" accesskey="m">男</label>
<input type="radio" name="sex" value="female" id="onna" />
<label for="onna" accesskey="f">女</label><br />
血液型：<label><input type="radio" name="blood" value="a" />A型</label>
<label><input type="radio" name="blood" value="b" />B型</label>
<label><input type="radio" name="blood" value="o"/>O型</label>
<label><input type="radio" name="blood" value="ab"/>AB型</label><br />
<input type="submit" value="送信"/>
</fieldset>
</form>

性別：
血液型：
<legend>

フォームの入力項目グループにタイトルを付ける

（<fieldset> タグといっしょに使う）

 <form action="aaa.cgi" method="post">
<fieldset> <legend>グループの名前</legend>
<legend>個人情報</legend>
お名前：<input type="text" name="name" size="20"/>
メール：<input type="text" name="mail" size="40"/>
</fieldset>
<fieldset> <legend>グループの名前</legend>
満足度<br />
<input type="radio" name="manzoku" checked="true"/>いいと思う<br />
<input type="radio" name="manzoku"/>まあまあ<br />
<input type="radio" name="manzoku"/>ふつう<br />
<input type="radio" name="manzoku"/>あんまり<br />
<input type="radio" name="manzoku"/>よくないと思う<br /><br />
一言どうぞ<br />
<textarea rows="3" name="S1" cols="40"></textarea>
</fieldset>
<input type="submit" value="送信"/>
</form>
個人情報 お名前： メール：
ご感想 満足度
いいと思う
まあまあ
ふつう
あんまり
よくないと思う

一言どうぞ
<li> リスト項目を表示 <h3>好きな動物</h3>
<ul>
<li>白くま</li>
<li>ライオン</li>
<li>クロヒョウ</li>
<li>チンパンジー</li>
<li>山猫</li>
</ul>

好きな動物

  • 白くま
  • ライオン
  • クロヒョウ
  • チンパンジー
  • 山猫
<link> 外部ファイル（スタイルシートなど）を関連付ける <link rel="stylesheet" href="style.css" type="text/css" />  
M
タグ名 働き 使用方法 表示例
<map> ひとつの画像の中にたくさんのリンクを作る

<img src="img/map1.png" width="100" height="100" border="0" usemap="#linked1" alt="map1"/>
<map name="linked1">
<area shape="rect" coords="0,0,50,50" href="index.html" alt="left"/>

<area shape="rect" coords="50,0,100,100" href="css.html" alt="right"/>
</map>

 map left right
<meta> その文書に関する情報（メタ情報）を指定する

[文字コード]
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=shift_jis" />

その文書の文字コードが｢UTF-8｣の場合は｢UTF-8｣、｢shift-jis｣の場合は｢Shift_JIS｣、 ｢JIS｣の場合は｢iso-2022-jp｣を指定します。 文字コード指定は文字化け防止のために指定すること。 文字コードの指定は、<TITLE>～</TITLE>内などで日本語が現れる前に行う必要があります。

[文書の説明・キーワード]
<meta name="description" content="HTMLタグ・WEBカラー等の早見表。" />
<meta name="keywords" content="HTML,カラー,画像,特殊文字,リファレンス" />
その文書の説明（description）・キーワード（keyword）を指定します。 ここで指定した値は多くの検索エンジンで利用されるので、慎重に言葉を選んでください。

[検索ロボットの制御]
<meta name="robots" content="noindex,nofollow">
検索ロボットに対して登録されないよう（noindex）、また文書内のリンクをたどらないように（nofollow）指定しています。 この指定はすべての検索ロボットに対して有効ではなく、この情報を参照する紳士的な検索ロボットに対してのみ有効です。

[基準スタイルシート言語と基準スクリプト言語]
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
その文書のデフォルトのスタイルシート言語とスクリプト言語を指定します。 タグに直接style属性でスタイルシートを指定する場合などに、ここで指定した言語であると解釈されます。 多くの場合これらの指定をしなくてもブラウザが自動的に判断しますが、誤動作を避けるためにも記述しておく方がベターでしょう。

[別ページへの自動ジャンプと画読み込み]
<meta http-equiv="refresh" content="5; url=aaa.htm" />
<meta http-equiv="refresh" content="5" />
5秒後にaaa.htmに自動的にジャンプします。 またジャンプ先urlを指定しない場合には、その文書を再読み込みします。 この機能に対応していないブラウザもあるので、利用の際には注意が必要です。

[キャッシュ制御と有効期限]
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="Sat, 31 Aug 2002 17:35:42 GMT" />
文書がブラウザにキャッシュされないようにします。 また、文書のキャッシュが消去される時刻を指定します。
※GMTとは｢グリニッジ標準時｣を表し、YYYY-MM-DDThh:mm:ssTZD の書式とは異なります。 上の例ではグリニッジ標準時2002年8月31日17時35分42秒にキャッシュが消えるよう指定しています。

[文書の作者]
<meta name="author" content="HTMQ" />
その文書の作者（author）を表記します。

[文書を作成したエディタ]
<meta name="generator" content="notepad" />
その文書を作成したエディタを表記します。

 
N
タグ名 働き 使用方法 表示例
<noscript> Javascriptを無効にしてある場合に表示される文字 <script type="text/javascript">
//<![CDATA[
today = new Date();
document.write(today);
//]]> ]]>
</script>
<noscript>このページではJavaScriptを使用しています。</noscript>
O
タグ名 働き 使用方法 表示例
<object> 文書にデータを埋め込む

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
・・・・省略・・・・

</object>

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得
<ol> 順序のあるリストを表示する
 <ol type="a">
<li>肉と野菜を炒める</li>
<li>水を入れて中火で煮込む</li>
<li>時々アクを取る</li>
<li>カレールーを入れる</li>
<li>とろみがつくまで弱火で煮込む</li>
</ol>

<ol type="A">
<li>肉と野菜を炒める</li>
<li>水を入れて中火で煮込む</li>
<li>時々アクを取る</li>
<li>カレールーを入れる</li>
<li>とろみがつくまで弱火で煮込む</li>
</ol>
  1. 肉と野菜を炒める
  2. 水を入れて中火で煮込む
  3. 時々アクを取る
  4. カレールーを入れる
  5. とろみがつくまで弱火で煮込む
  1. 肉と野菜を炒める
  2. 水を入れて中火で煮込む
  3. 時々アクを取る
  4. カレールーを入れる
  5. とろみがつくまで弱火で煮込む
<optgroup> セレクトボックスの選択肢をグループ化する
 <form action="cgi-bin/formmail.cgi" method="post">
<p>好きな食べ物は？：<br />
<select name="food">
<optgroup label="野菜">
  <option label="トマト" value="tomato">トマト</option>
  <option label="なす" value="nasu">なす</option>
  <option label="にんじん" value="ninjin">にんじん</option>
  <option label="さつまいも" value="satuma">さつまいも</option>
  <option label="とうもろこし" value="morokosi">とうもろこし</option>
</optgroup>
<optgroup label="果物">
  <option label="さくらんぼ" value="sakura">さくらんぼ</option>
  <option label="メロン" value="melon">メロン</option>
  <option label="ぶどう" value="budou">ぶどう</option>
  <option label="りんご" value="ringo">りんご</option>
  <option label="みかん" value="mikan">みかん</option>
</optgroup>
</select></p>
<input type="submit" value="送信"><input type="reset" value="リセット">
</form>

好きな食べ物は？：
<option> セレクトボックスの選択肢 <form action="cgi-bin/formmail.cgi" method="post">
<p>星座：<br />
<select name="horoscope">
<option value="Aries">おひつじ座</option>
<option value="Taurus">おうし座</option>
<option value="Gemini">ふたご座</option>
<option value="Cancer">かに座</option>
<option value="Leo" selected>しし座</option>
<option value="Virgo">おとめ座</option>
<option value="Libra">てんびん座</option>
<option value="Scorpio" disabled>さそり座</option>
<option value="Saggitarius">いて座</option>
<option value="Capricorn">やぎ座</option>
<option value="Aquarius">みずがめ座</option>
<option value="Pisces">うお座</option>
</select></p>
<input type="submit" value="送信" /><input type="reset" value="リセット" />
</form>

星座：
P
タグ名 働き 使用方法 表示例
<p> 段落（パラグラフ）であることを表す

<p>これは段落です。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>

<p style="line-height:1.5em ">ちょっと行間を広げてみた。。。。。。。。。。。。。。。。。。。。。。。。。</p>

これは段落です。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

ちょっと行間を広げてみた。。。。。。。。。。。。。。。。。。。。。。。。。
<param> パラメータを指定する（<object>タグといっしょに使う）

<object>
<param name="movie" value="img/test.swf">
<param name=quality value=high>
<embed src="img/test.swf" quality=high type="application/x-shockwave-flash" width="200" height="50"></embed>
</object>
<pre> 書いたものをそのまま表示する <pre>
&lt;strong&gt;ニホンカワウソ&lt;/strong&gt;<br />
かつては日本全国に生息していましたが、
今や&lt;em&gt;特別天然記念物&lt;/em&gt;です。
既に絶滅している可能性も指摘されています。
</pre> 
<strong>ニホンカワウソ</strong>

かつては日本全国に生息していましたが、
今や<em>特別天然記念物</em>です。
既に絶滅している可能性も指摘されています。
Q
タグ名 働き 使用方法 表示例
<q> 引用文の書式 <q>神はサイコロをふらない</q> 神はサイコロをふらない
S
タグ名 働き 使用方法 表示例
<samp> 出力結果のサンプル用書式 実行ボタンを押した後、<samp>処理が完了しました。</samp>というメッセージが画面に表示されるまで、しばらくお待ちください。 実行ボタンを押した後、処理が完了しました。というメッセージが画面に表示されるまで、しばらくお待ちください。
<script> Javascriptを埋め込む script type="text/javascript">
<![CDATA[
document.write("ブラウザの名前･････････" + navigator.appName + "<br />");
document.write("ブラウザのコード名･･････" + navigator.appCodeName + "<br />");
document.write("ブラウザのバージョン････" + navigator.appVersion + "<br />");
document.write("プラットフォーム･････････" + navigator.platform + "<br />");
document.write("ユーザーエージェント･････" + navigator.userAgent + "<br />");
// ]]>
</script>
<select> セレクトボックスを作成する
 <form action="cgi-bin/formmail.cgi" method="post">
<p>血液型：<br />
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select></p>
<p>星座：<br />
<select name="horoscope" size="12">
<option value="Aries">おひつじ座</option>
<option value="Taurus">おうし座</option>
<option value="Gemini">ふたご座</option>
<option value="Cancer">かに座</option>
<option value="Leo">しし座</option>
<option value="Virgo">おとめ座</option>
<option value="Libra">てんびん座</option>
<option value="Scorpio">さそり座</option>
<option value="Saggitarius">いて座</option>
<option value="Capricorn">やぎ座</option>
<option value="Aquarius">みずがめ座</option>
<option value="Pisces">うお座</option>
</select></p>
<input type="submit" value="送信" /><input type="reset" value="リセット" />
</form>

血液型：

星座：
<small>   普通のテキストに対して<small>相対的に小さく</small>表示されます。 普通のテキストに対して相対的に小さく表示されます。
<span> ひとかたまりの範囲として定義する（インライン要素）
 絵の具の 
<span style="background-color: #0099FF">青色</span>と 
<span style="background-color: #FFFF00">黄色</span>を混ぜると 
<span style="background-color: #33CC33">緑色</span>になります。 		絵の具の 青色と 黄色を混ぜると 緑色になります。
<strong> 強調 <strong>廃止される</strong> 廃止される
<style> スタイルシートを定義します <style type="text/css">.clsam{background-color:#CC99FF}</style>
<div class="clsam">ここの背景色を決めました</div>
ここの背景色を決めました
<sub> 下付文字 例えば水ができる化学反応式は、
2H<sub>2</sub>+O<sub>2</sub>→2H<sub>2</sub>O
となります。 		例えば水ができる化学反応式は、 2H2+O2→2H2O となります。  
<sup> 上付き文字 直角三角形の直角をはさむ２辺の長さをa、b、斜辺の長さをcとすると、
c<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>
が成り立ちます。これを「三平方の定理」または「ピタゴラスの定理」といいます。 		直角三角形の直角をはさむ２辺の長さをa、b、斜辺の長さをcとすると、 c2=a2+b2 が成り立ちます。これを「三平方の定理」または「ピタゴラスの定理」といいます。
T
タグ名 働き 使用方法 表示例
<table> テーブル（表）を作成する
 <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</table>
メニュー 説明 豆知識
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
 
<tbody> テーブル（表）のボディ部分を定義する
 <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<thead>
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" bgcolor="#CCCCCC" align="right">パスタ倶楽部</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</tbody>
</table>
メニュー 説明 豆知識
パスタ倶楽部
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
<td> テーブル（表）のデータセルを作成する <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</table>
メニュー 説明 豆知識
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
<textarea> 複数行の入力フィールドを作成する <form action="cgi-bin/formmail.cgi" method="post">
ご感想：<br />
<textarea name="kanso" rows="4" cols="40">ここに感想を記入してください。</textarea><br />
<input type="submit" value="送信" /><input type="reset" value="リセット" />
</form>
ご感想：
<tfoot> テーブル（表）のフッタ行を定義する <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<thead>
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" bgcolor="#CCCCCC" align="right">パスタ倶楽部</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</tbody>
</table>
メニュー 説明 豆知識
パスタ倶楽部
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
<th> テーブル（表）の見出しセルを作成する <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</table>
メニュー 説明 豆知識
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
<thead> テーブル（表）のヘッダ行を定義する
 <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<thead>
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" bgcolor="#CCCCCC" align="right">パスタ倶楽部</td>
</tr>
</tfoot>
<tbody>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</tbody>
</table>
メニュー 説明 豆知識
パスタ倶楽部
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
<title> 文書にタイトルをつける <html>
<head>
<title>文書のタイトル</title>
</head>
<body>
文書の本体
</body>
</html> 		 
<tt> 等幅フォントで表示する 古池や　蛙飛び込む　水の音<br />
<tt>古池や　蛙飛び込む　水の音</tt><br />
Old pond - A frog jumping in - sounds of water<br />
<tt>Old pond - A frog jumping in - sounds of water</tt><br /> 		古池や　蛙飛び込む　水の音
古池や　蛙飛び込む　水の音
Old pond - A frog jumping in - sounds of water
Old pond - A frog jumping in - sounds of water
<tr> テーブル（表）の横方向の一行を定義する
 <table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
<tr>
<th bgcolor="#EE0000"><font color="#FFFFFF">メニュー</font></th>
<th bgcolor="#EE0000" width="150"><font color="#FFFFFF">説明</font></th>
<th bgcolor="#EE0000" width="200"><font color="#FFFFFF">豆知識</font></th>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>カルボナーラ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">玉子とベーコンとクリームソースのパスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">カルボナーラとは炭焼き職人という意味</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>ペスカトーレ</td>
<td bgcolor="#FFFFFF" valign="top" width="150">エビとあさりの漁師風パスタ</td>
<td bgcolor="#FFFFFF" valign="top" width="200">ペスカトーレは漁師風という意味</td>
</tr>
</table>
メニュー 説明 豆知識
カルボナーラ 玉子とベーコンとクリームソースのパスタ カルボナーラとは炭焼き職人という意味
ペスカトーレ エビとあさりの漁師風パスタ ペスカトーレは漁師風という意味
U
タグ名 働き 使用方法 表示例
<ul> 順序のないリストを表示する <ul type="disc">
<li>白くま</li>
<li>ライオン</li>
<li>クロヒョウ</li>
<li>チンパンジー</li>
<li>山猫</li>
</ul>

<ul type="circle">
<li>白くま</li>
<li>ライオン</li>
<li>クロヒョウ</li>
<li>チンパンジー</li>
<li>山猫</li>
</ul>
  • 白くま
  • ライオン
  • クロヒョウ
  • チンパンジー
  • 山猫
  • 白くま
  • ライオン
  • クロヒョウ
  • チンパンジー
  • 山猫
V
タグ名 働き 使用方法 表示例
<var> 変数や引数であることを示す 値を変数<var>rs</var>に代入します。 値を変数rsに代入します。
-
タグ名 働き 使用方法 表示例
<!DOCTYPE> ドキュメントタイプを宣言する
HTML 4.01 Transitional
HTML 4.01の文法（規格）を完全には守れていないページ、あるいは他のバージョンに移行中のページ。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Strict
HTML 4.01の文法（規格）を厳正に守っているページ。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Frameset
HTML 4.01のフレームを使ったページ。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Transitional
XHTML 1.0の文法（規格）を完全には守れていないページ、あるいは他のバージョンに移行中のページ。 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict
XHTML 1.0の文法（規格）を厳正に守っているページ。 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
XHTML 1.1
XHTML 1.1の文法（規格）で書かれているページ。XHTML 1.1ではフレームが廃止されたり、ruby要素のサポートがされたりしています。 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  
<![CDATA[ ]]> ソース中にコメントを入れる <![CDATA[ 地球の公転の説明ここから ]]>

宇宙では一度動かしたものはどこまでも同じ速度で同じ方向に進んでいきます。公転とは、まっすぐ進みたい地球に対して太陽の引力が邪魔をして円運動をさせる現象です。

地球の公転の説明ここまで ]]> ]]> 		 
&xxx; 特殊文字を表示する &quot; 　 &amp; 　 &lt; 　 &gt; 　 &nbsp; 　 &copy;
 " 　 & 　 < 　 > 　   　 ©