HTML <pre>

HTMLタグ <PRE> は、開始タグと終了タグに挟まれたテキストが整形済みテキスト (Preformatted Text) であることを表します。

整形済みテキストの特徴を以下に示します。

書式

<pre>
  <!-- phrasing content -->
</pre>

属性

属性は全て省略可能です。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。 
<pre class="ma-4">text</pre>
data-*
カスタムデータ属性を指定する。
id
一意な識別子を指定する。 
<pre id="example">text</pre>
lang
要素の言語を指定する。 
<pre lang="ja">text</pre>
ondblclick
要素がダブルクリックされたときに実行するJavaScriptを指定する。
style
CSSのプロパティを指定する。セミコロンで区切って。複数のプロパティを指定できる。 
<pre style="margin-top: 1rem;">text</pre>
title
要素のアドバイザリー情報を指定する。 
<pre title="example">text</pre>

コンテンツ・モデル

pre 要素の開始タグと終了タグの間には、フレージング・コンテンツを含めることができる。具体的には、以下に示す要素である。

使用例と表示サンプル

<pre>
if (flag == true) {
  ret = true;
}
</pre>
if (flag == true) {
  ret = true;
}

空白は纏められず、そのまま表示される。

<pre>This  is  a  pen.</pre>
<div>This  is  a  pen.</prdive>
This  is  a  pen.
This is a pen.

改行はそのまま改行される。

<pre>This
is
a
pen.</pre>
<div>This
is
a
pen.</div>
This 
is
a
pen.
This is a pen.

JavaScript

JavaScriptからはHTMLPreElementインタフェースを通じてpre要素へアクセスできる。HTMLPreElementインタフェースは次に示すプロパティを持つ。

dir
pre要素のdir属性をDOMString型で指定する。
innterText
ノードに描写されるテキストをDOMString型で指定する。
lang
pre要素のlang属性をDOMString型で指定する。
style
pre要素のstyle属性をCSSStyleDeclaration型で指定する。 
<pre id="example">text</pre>
<script>
  document.getElementById("example").style = "margin: 1rem"
</script>
title
pre要素のtitle属性をDOMString型で指定する。

参考文献

Web Hypertext Application Technology Working Group (2022) "Grouping content" HTML Living Standard