仕様

PRE要素は、
整形済みテキストを表します。

pre整形済みテキスト (Preformatted text)
カテゴリ
  • フローコンテンツ
  • パルパブルコンテンツ
種類通常要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		フレージングコンテンツ。
属性グローバル属性のみ
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		任意。
[既定値 : なし]
DOM
インター
フェイス
HTMLPreElement
  1. [Exposed=Window]
  2. interface HTMLPreElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. };
レンダリング
フローコンテンツ
  1. pre {
  2. display: block;
  3. margin-block-start: 1em;
  4. margin-block-end: 1em;
  5. font-family: monospace;
  6. white-space: pre;
  7. unicode-bidi: isolate;
  8. unicode-bidi: bidi-override;
  9. }
  10. pre[wrap] {
  11. white-space: pre-wrap;
  12. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 ブロック方向の前後(上下)の余白を１文字分空けます。 フォントにすべての字が同じ幅を持つ字形のフォントを指定します。 連続するホワイトスペースはそのまま残され、行の折り返しは、ソース内の改行文字と br要素でのみ行い、行ボックスを埋めるのに必要なときには wbr要素に従い行います。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
(許可されている内容がフレージングコンテンツだけなので、実質はインラインフォーマットコンテキスト)
pre要素は、整形済みテキストを表します。

pre要素は、事前にフォーマットされたテキストのブロックを表します。構造は、要素ではなく活版印刷の規則によって表されます。

  1. <div>
  2. <pre>
  3. <span>Text</span>
  4. <span>Text</span>
  5. </pre>
  6. </div>
Text
Text
参照元
  1. HTML Living Standard. 4.4.3 The pre element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML 5.2 W3C 勧告. 4.4.4 The pre element
  4. HTML 4.01 Specification W3C 勧告. 9.3.4 Preformatted text: The PRE element
  5. MDN Web Docs. HTML <pre>: 整形済みテキスト要素

使用可能な箇所

フローコンテンツを
受け入れる要素に
配置できます。

pre要素は、フローコンテンツを受け入れる要素に配置できます。

  1. <div>
  2. <pre>text</pre>
  3. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、pre要素を配置できます。

text

配置できるコンテンツ

フレージングコンテンツを
配置できます。

pre要素は、フレージングコンテンツを配置できます。

  1. <pre>
  2. <span>test</span>
  3. </pre>

pre要素のコンテンツの一部として、フレージングコンテンツである span要素を配置できます。

test

属性

グローバル属性のみ、
設定できます。

pre要素は、グローバル属性のみ 設定できます。

気を付ける点

配置できるコンテンツ

  1. <pre>
  2. <ol>
  3. <li>List
  4. List</li>
  5. <li>List
  6. List</li>
  7. </ol>
  8. </pre>

フローコンテンツを配置できる div要素のコンテンツの一部としては、ol要素を配置できます。しかしフレージングコンテンツを配置できる pre要素のコンテンツの一部としては、ol要素を配置できません。
個々の li要素のコンテンツとしてpre要素を配置するか、CSSで装飾するのが望ましいです。ブラウザが描画してくれる事もありますが。

    
 
  1. List
List
    2. 
 
  2. List
List
    3.