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>
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 DOMString pre要素のdir属性
innterText DOMString ノードに描写されるテキスト
lang DOMString pre要素のlang属性
style CSSStyleDeclaration pre要素のstyle属性
title DOMString pre要素のtitle属性
<pre id="example">text</pre>
<script>
  document.getElementById("example").style = "margin: 1rem;";
</script>

HTMLタグ