ソースコードを表示させるのに使うべきHTMLタグは?

ソースコードをWebページで表示させるために、どんなHTMLを書いてますか?私はこれまで、<pre>…</pre> を使っていました。<code>…</code> というタグは知っていましたが、これだと半角スペースや改行がうまく反映されていない、という理由で使っていなかったのです。

が、Web標準の教科書という本を読んで、目からうろこが落ちました。

(pre要素の解説で)

pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。

(code要素、var要素、samp要素、kbd要素の解説で)

コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。
(略)
これらはインライン要素であり、インライン要素やテキストを含むことができる。

そうだったのかー!code要素はインライン要素なので、半角スペースや改行が反映されないのは当たり前なのでした。つまり、ソースコードをWebページで表示させるには、

<pre><code>
function someFunction() {
    // code
}
</code><pre>

というふうに、pre要素の中にcode要素を含ませて書くのが正しいようです。ちなみにcode要素はインライン要素なので、次のような書き方もできます。

<p>1行目の<code>someFunction()</code>の中にコードを実装していきます。</p>

なお、<pre>…</pre>を使うと、一行が長い場合、

function someFunction() {
    // code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code
}

という感じで、横スクロールバーが表示されてしまいますが、以下のサイトで紹介されているcssハックを使えば、折り返すことができます。

» Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

最近になって、ようやくWeb標準の勉強を始めたのですが、新しい発見がいっぱいあって楽しいです。

ソースコードを表示させるのに使うべきHTMLタグは?」への7件のフィードバック

  1. ピンバック: 米が好き | コードが大文字で表示される解決方法

  2. ピンバック: 怒涛のめもめもリンク集 » Blog Archive » WordPressプラグイン:iG:Syntax Hiliter

  3. ピンバック: Cheerfull days - 今日のWordPress – Google AdSenseの設定

  4. ピンバック: L2TP » preとかcodeとかでソースコードをきれいに表示できるらしい

  5. ピンバック: 御飯定食 | [WordPress] コードが大文字で表示される解決方法

  6. ピンバック: ピントクルBlog ソースコードを表示させる

  7. ピンバック: Wordpressでのソースコード表示について色々考えてみた | TeraDas-テラダス

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>