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

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

属性

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

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 属性を非推奨に変更

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
cols
非推奨非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 1 — 29IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 4 — 29Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
width
非推奨非標準
Chrome 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Edge 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Firefox 完全対応 1
補足
完全対応 1
補足
補足 Since Firefox 29, specifying the width attribute has no layout effect.
IE 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Opera 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Safari 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Chrome Android 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Edge Mobile 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Since Firefox 29, specifying the width attribute has no layout effect.
Opera Android 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Safari iOS 完全対応 あり
補足
完全対応 あり
補足
補足 Specifying the width attribute has no layout effect.
Samsung Internet Android 完全対応 あり
wrap
非推奨非標準
Chrome ? Edge 未対応 なしFirefox 完全対応 1IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, SphinxKnight, yyss, ethertank
最終更新者: mfuji09,