目次に戻る

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

概要

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

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

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

Polyglot Markup仕様では、当該要素内容改行文字で始まるべきではない。

意味・用法

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

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

アクセシビリティ関連

私見・補足

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

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

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

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

表示確認

ソース

  <figure>
  <figcaption id="pre-label">モナーのアスキーアート</figcaption>
  <pre role="img" aria-labelledby="pre-label">  ------------------
    ∧_∧  / ̄ ̄ ̄ ̄ ̄
  ( ´∀`)< オマエモナー
  (    )  \_____
   | |  |
  (__)_)
  ------------------</pre>
  </figure>
  
表示結果
モナーのアスキーアート