preタグ内では空白や改行がそのまま反映される。
一般的に等幅フォントになる。
内包例の多いタグは、 <code> <var>, <samp>, <kbd>。
要素 種別 メモ
-------------------------------------------------------
pre ブロック 空白や改行をそのまま表示させる
code インライン ソースコードを示す
var インライン 引数、変数を示す。一般的に斜体になる。
samp インライン 出力サンプルを示す。
kbd インライン ユーザ入力を示す。
上記は下記のように書いた(とんがりカッコは半角英数)。
<pre><code>要素 種別 メモ
-------------------------------------------------------
pre ブロック 空白や改行をそのまま表示させる
code インライン ソースコードを示す
var インライン 引数、変数を示す。一般的に斜体になる。
samp インライン 出力サンプルを示す。
kbd インライン ユーザ入力を示す。</code></pre>
内包できないタグは、 <img>, <object>, <big>, <small>, <sub>。
Ff2, SF2, OP9でそれぞれ細かい差異がある→ Fraternity7 | safariがpreタグのナカミをちゃんと表示しない件について
結論:<code>~</code>使う。
「<pre><code>無改行一行め~最終行無改行</code<>/pre>」を墨守すりゃよさげ。
<start-frame>,<end-frame>,<option>
上記はこんな風に書いた。
<pre><code>&lt;start-frame&gt;,&lt;end-frame&gt;,&lt;option&gt;</code></pre>
なお、上記の&lt;は実際には半角英数(実態参照)で書く必要があるます。
長いものは<pre>と<code>の直後や、</code></pre>の直前などで改行を打ちたくなるのだが、それやるとpreタグ内部に改行が反映され、上下に間のびする。てゆうかその為のpreタグですわな。
<start-frame>,<end-frame>,<option>
<start-frame>,<end-frame>,<option>
Firefox 2、Opera 9とも意図通りの表示になるが、Safari 2のみ、上記いずれも「,,」だけを表示する。
1. は<だけ実態参照(&lt;)、にして、後ろは(>)のまま。
2. は後ろのとんがり括弧>も&gt;にしたもの。
ちなみに、<と>を実態参照にせずそのまま書くとFirefox 2, Safari 2, Opera 9とも「,,」だけ表示になったが、Opera だけそれ以降の表示に不具合が出た。タグが閉じてないぢゃないかと怒っているらしい。見逃してくれよん…そんなタグあんのかな?
Opera向け実験。
<start-frame>,<end-frame>,<option>
</option>,</end-frame>,</start-frame>
などと閉じてもだめぽい。ここから下のエリアがごそっと消える。かつ「,,」もワンセットしか出ない。他は2セット出るのだが。いや出たからどうだというもんでもないが。
まとめ:
preタグの中でもhtmlタグは解釈される。
参考リンク
jmblog.jp - ソースコードを表示させるのに使うべきHTMLタグは?