改行マークや半角スペースなどを表示する
<pre>

 <pre>タグに囲まれた内容は、改行マークなどがそのままの形で表示されます。
 通常は、連続した改行、半角スペース、タブは「ひとつの半角スペース」にまとめて表示されますが、<pre>タグを指定すると、それらをそのまま表示します。

 <pre>整形済みテキスト</pre>
* <pre>タグに囲まれた部分は、一般的なブラウザでは等幅フォントで表示され、上と下に1行分の間隔が空きます。また、自動折り返しは行われなくなります。
ページ上にソースコードを表示する場合などに使用します。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
<pre>crlf
Function PopTag() {crlf
  if (!document.getElementById) {crlf
     alert("アラートの表示");crlf
     return;crlf
  }crlf
}crlf
</pre>
<pre></pre>で囲った場合の表示
Function PopTag() {
  if (!document.getElementById) {
     alert("アラートの表示");
     return;
  }
}
<pre>を使わなかった場合の表示
Function PopTag() { if (!document.getElementById) { alert("アラートの表示"); return; } }
"crlf" は、改行している箇所です。
alert("アラートの表示"); の行と return; の行は、
タブを使用しています。
<pre>で囲うと等幅フォントで表示されます。

関連するページ
CSS スタイルシート改行・スペース・タブの指定:改行・スペース・タブの扱いを指定する

ソースコードを示す
<code>

 <code>タグで、それがプログラムのソースコードであることを示すことができます。
 <code>タグで囲んだ箇所は、一般的なブラウザでは等幅フォントで表示します。

 <code>ここにソースコードを記述します</code>
* 改行やインデントなどをそのまま表示させたい場合は、<pre>タグで囲います。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
<pre><code>crlf
Function PopTag() {crlf
  if (!document.getElementById) {crlf
	alert("アラートの表示");crlf
	return;crlf
  }crlf
}crlf
</code></pre>
<pre></pre>で囲った場合の表示
Function PopTag() {
  if (!document.getElementById) {
	alert("アラートの表示");
	return;
  }
}
<pre>を使わなかった場合の表示
Function PopTag() { if (!document.getElementById) { alert("アラートの>表示"); return; } }
"crlf" は、改行している箇所です。
alert("アラートの表示"); の行と return; の行は、
タブを使用しています。
<pre><code>で囲うと等幅フォントで表示されます。

変数や引数を示す
<var>

 <var>タグで、それが変数や引数であることを示すことができます。
 <var>タグで囲んだ箇所は、一般的なブラウザではイタリック体で表示します。

 <var>ここに変数または引数を記述します</var>
文字色や文字飾りは、<font>タグやスタイルシートで変更できます。詳細は、「テキスト・フォント リファレンス(タグページ)」や「テキスト・フォント リファレンス(CSSページ)」を参照して下さい。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
変数 <var><font color=green>elem</font>
</var> に代入します。
変数 elem に代入します。

関連するページ
タグ リファレンス テキスト・フォント(tag):テキスト・フォント リファレンス(tag)
CSS リファレンス テキスト・フォント(css):テキスト・フォント リファレンス(css)

プログラムの出力サンプルを示す
<samp>

 <samp>タグで、それがプログラムの出力サンプルであることを示すことができます。
 <samp>タグで囲んだ箇所は、一般的なブラウザでは等幅フォントで表示します。

 <samp>ここに出力結果のサンプルを記述します</samp>
文字色や文字飾りは、<font>タグやスタイルシートで変更できます。詳細は、「テキスト・フォント リファレンス(タグページ)」や「テキスト・フォント リファレンス(CSSページ)」を参照して下さい。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
数字以外を入力すると、「<samp>error!? 数字を入力して下さい。</samp>」とエラーメッセージを表示します。 数字以外を入力すると、「error!? 数字を入力して下さい。」とエラーメッセージを表示します。

関連するページ
タグ リファレンス テキスト・フォント(tag):テキスト・フォント リファレンス(tag)
CSS リファレンス テキスト・フォント(css):テキスト・フォント リファレンス(css)

ユーザーが入力する文字を示す
<kbd>

 <kbd>タグで、その文字列が「ユーザーが入力する文字列」であることを示すことができます。
 <kbd>タグで囲んだ箇所は、一般的なブラウザでは等幅フォントで表示します。

 <kbd>入力するテキストを示します</kbd>
ブラウザの設定によっては、等幅フォントで表示されない場合があります。

 ★ 使用例とブラウザでの表示
使 用 例   ブラウザの表示
入力欄に<kbd><font color=green>ユーザーID</font></kbd>を入力し、「ログイン」ボタンを押して下さい。 入力欄にユーザーIDを入力し、「ログイン」ボタンを押して下さい。

関連するページ
タグ リファレンス テキスト・フォント(tag):テキスト・フォント リファレンス(tag)
CSS リファレンス テキスト・フォント(css):テキスト・フォント リファレンス(css)

スペース表示<pre>ソースコード<code> 変数・引数<var>出力サンプル<samp> 入力文字<kbd> テキスト・フォント リファレンス へ