pre要素

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

サンプルコード

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

カテゴリー

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

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

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

属性

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

使用例

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

code要素内でコードを記述する場合、「<」を「<」、「>」を「>」と記述しなければ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>

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。