<pre>: 整形済みテキスト要素

HTML <pre> 要素は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("monospace") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。

コンテンツカテゴリ	フローコンテンツ、知覚可能コンテンツ
許可されている内容	記述コンテンツ
タグの省略	不可。開始と終了タグの両方が必要。
許可されている親要素	フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLPreElement` (en-US)

属性

この要素はグローバル属性のみを持ちます。

cols: 1行あたりの望ましい文字数を示します。これは width の標準外の別名です。同様の効果を得るには、CSS の width を使用してください。
width: 1行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の width を使用してください。
wrap: テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の white-space を使用してください。

例

<!-- CSS コードを表示する例 -->
<pre>
body {
  color:red;
}
</pre>

結果

body {
  color:red;
}

アクセシビリティの考慮事項

整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。

弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。

<figure> 及び <figcaption> 要素の組み合わせに、 id 及び ARIA role 及び aria-labelledby 属性を補ったもので、整形済みテキストを図形として扱い、 figcaption を図形の別の説明として提供することができます。

例

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  __________________
< 私は牧場の達人です。>
  ------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
  </figcaption>
</figure>

仕様書

仕様書	状態	備考
HTML Living Standard <pre> の定義	現行の標準	HTML5 から重大な変更はない
HTML5 <pre> の定義	勧告	HTML 4.01 Specification から重大な変更はない
HTML 4.01 Specification <pre> の定義	勧告	`cols` 属性を非推奨に変更

ブラウザーの対応

BCD tables only load in the browser