目次に戻る

pre要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、generic。デフォルトroleをrole属性値に指定することは、推奨されない。
  • デフォルトrole以外では、すべてのroleが指定可能。
視覚系ブラウザのデフォルトとして期待されるCSS

  pre {
    display: block;
    unicode-bidi: isolate;
    margin-block: 1em;
    font-family: monospace;
    white-space: pre;
  }

  pre[dir=auto i] {unicode-bidi: plaintext;}
視覚系ブラウザにおいて期待されるレンダリング
  • HTML構文においては、開始タグの直後にある冒頭の改行文字は取り除かれる。
意味・用法

その構造が印刷規則によって表されるような、整形済みテキストのブロックを表す。

例→電子メールに含まれる、空白行で示される段落、中黒が付く行で示されるリストなど。言語の慣習に従って示された構造をもつ、プログラミングコードの断片。アスキーアート。

アクセシビリティ関連

私見・補足

空白や改行（おおむね、要素間空白文字に該当）を自動折り返しなしでそのままで表示させたい場合、特に、そのように表示させないと視覚的に意味がない場合に使う。とはいえ、どのような場合に使用すべきかは、慣例によるところも大きい。

「<」や「&」などはタグや実体参照として解釈されてしまうので、実体参照でエスケープしておくこと。

タブ文字をうまく処理できないブラウザ等があるので、タブ文字の使用は控えること。

当サイトのようにHTMLのソースの例示をする場合は、実体参照によるエスケープが面倒くさい（そのうえ、実体参照だらけなので、ソース例示のソースが読みづらい）。プレーンテキストのテキストファイルでソースの例示を書いてiframe要素などで埋め込むなどということをしたくなってくる。

表示確認

ソース

  <figure>
  <figcaption id="pre-label">モナーのアスキーアート</figcaption>
  <pre role="img" aria-labelledby="pre-label">  －－－－－－－－－－－－－－－－－－
　　 　∧＿∧　　／￣￣￣￣￣
　　（　´∀｀）＜　オマエモナー
　　（　　　　） 　＼＿＿＿＿＿
　　 ｜ ｜　 |
　　（_＿）＿）
  －－－－－－－－－－－－－－－－－－</pre>
  </figure>
表示結果
モナーのアスキーアート