<pre> / <blockquote> / <hr>

<!-- preタグ: スペース・改行がそのまま表示される -->
<pre>
  整形済み
    テキスト

引用テキスト

sample_pre_blockquote_hr.html

<!-- pre単体：空白・改行をそのまま保持する -->
<pre>
  Name: Okita Sougo
  Rank: First Division Captain
  Age:  18
</pre>

<!-- pre + code：コードブロックの標準的な書き方 -->
<p>以下はCSSのサンプルコードです。</p>
<pre><code>body {
  font-size: 1rem;
  color: #333;
}</code></pre>

<!-- hrで話題を区切る -->
<p>前のセクションの内容です。</p>
<hr>
<p>ここから別のトピックです。</p>

<!-- blockquote：引用元URLをcite属性で示す -->
<p>次の文章はWikipediaからの引用です。</p>
<blockquote cite="https://ja.wikipedia.org/wiki/HTML">
  HTML（HyperText Markup Language）はウェブページの構造を記述するための言語です。
</blockquote>

<!-- blockquote + footer：引用元を明示する実践的なパターン -->
<blockquote cite="https://developer.mozilla.org/ja/docs/Web/HTML">
  <p>HTML はウェブのコンテンツに意味や構造を与えるために使用します。</p>
  <footer>— <cite><a href="https://developer.mozilla.org/ja/docs/Web/HTML">MDN Web Docs</a></cite></footer>
</blockquote>

『pre』の中のテキストはスペースや改行がそのまま等幅フォントで表示されます。『hr』は横一本の水平線として表示されます。『blockquote』はデフォルトで左右にインデントが付いて表示されます。

サンプルページはこちら

『pre』はコードスニペットやアスキーアートなど、空白の配置が意味を持つテキストに使用します。プログラミング解説サイトでは『pre』の中に『code』を入れ子にして使うのが一般的です（例：<pre><code>...</code></pre>）。

『blockquote』は意味的な引用を示すための要素です。単にインデントを付けたいだけのレイアウト目的での使用は避けてください。引用元をページ内に示したい場合は『figure』と『figcaption』、または『cite』要素と組み合わせると良いでしょう。

『hr』はかつては「水平線を引く」見た目の要素でしたが、HTML5以降は「段落間のテーマ的な区切り」という意味を持つ要素として再定義されています。単に見た目の区切り線を引きたいだけであれば、CSSの『border』プロパティで代替することを検討してください。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

4 以降 ○

3 以前 ×

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

3.2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

プログラムコードを表示する際は、『<pre>』と『<code>』を組み合わせて使うのが標準的な方法です。『<pre>』が等幅・空白保持の表示を担い、『<code>』がプログラムコードであることを意味的に示します。

<!-- preとcodeの組み合わせ -->
<pre><code>function greet(name) {
  return "Hello, " + name + "!";
}
console.log(greet("World"));
</code></pre>

『<pre><code>』と書く場合は、コンテンツ直前の改行に注意してください。『<pre>』は空白を保持するため、開始タグ直後に改行があると表示上の余白が入ってしまいます。シンタックスハイライトライブラリ（Prism.js、highlight.jsなど）は、この組み合わせを標準のターゲットとして使用します。

『<blockquote>』はデフォルトでインデントされるだけですが、CSSで引用文のデザインを大幅に改善できます。

/* 引用文のスタイリング例1: 左ボーダー付き */
blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #4488ff;
  background-color: #f0f4ff;
  color: #333;
}

/* 引用文のスタイリング例2: 引用符（"）を疑似要素で追加 */
blockquote {
  position: relative;
  padding: 1em 1em 1em 3em;
  font-style: italic;
}

blockquote::before {
  content: '\201C'; /* 左の二重引用符 */
  font-size: 4em;
  color: #ccc;
  position: absolute;
  top: -0.1em;
  left: 0.1em;
  line-height: 1;
}

/* hrのカスタマイズ */
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 2em 0;
}