【HTML】preタグ - 整形済みテキスト

HTMLのpreタグについて解説します。

検証環境

HTML

macOS

14.1

preタグ

preタグは“整形済みテキスト”を意味するタグです。

Webブラウザ表示において、p要素内の改行や連続したスペースは反映されませんが、pre要素ではそのまま表示されます。

基本構文

<pre>テキスト</pre>

サンプル

以下はp要素とpre要素を比較したサンプルです。

p要素

<p>
    HTMLの正式名称は
    HyperText     Markup     Language
    です。
    コンピュータ言語の１つで、マークアップ言語という分類に属します。
</p>

プレビュー

pre要素

___ih_hl_start
<pre>
___ih_hl_end
    HTMLの正式名称は
    HyperText     Markup     Language
    です。
    コンピュータ言語の１つで、マークアップ言語という分類に属します。
___ih_hl_start
</pre>
___ih_hl_end

プレビュー

要素内のテキストは同じですが、プレビューからp要素とpre要素では改行や連続スペースの表示に違いがあることが確認できます。