基礎

HTML要素

プレフォーマッテッド・テキスト

pre要素

最終更新日：2023-10-09
公開日：2016-01-22

整形済みテキストを記述したい場合に使用します。
例えば通常のHTMLであれば要素間のタブやスペースなどは無視され詰められますが、pre要素内では入力したそのままの状態（タブ、スペースが詰められない状態）で表示されるようになります。

HTML サンプルコード

<!-- JavaScriptのサンプルコード -->
<pre><code class="language-javascript">var sample_val = $("#sample").val();
console.log(sample_val);</code></pre>

カテゴリー

フローコンテンツ、パルパブルコンテンツ
コンテンツモデル

フレージングコンテンツ
使用ケース

フローコンテンツが期待される場所

属性

グローバル属性: グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

使用例

PHPコードをWebページで表示する

code要素内でコードを記述する場合、「<」を「<」、「>」を「>」と記述しなければHTML要素と見なされてしまい、想定した表示とならないことがありますので注意してください。

HTML コード例

<pre><code class="language-php"><?php
// Initialize
$test = array(
  0 => "japan",
  1 => "america",
  2 => "switzerland",
  3 => "england",
  4 => "braizl"
);

reach( $test as $value ) {
  var_dump($value);
}
?></code></pre>