HTMLで<code><pre>...とするのは正しくない

tl;dr

HTMLの規格で <code><pre></pre></code> は許されず、 <pre><code></code></pre> は許されます。

<code><pre>...</pre></code>が正しくない理由

<code> が受け入れる子要素は記述コンテンツ(phrasing content)のみ¹ですが、<pre> は記述コンテンツではありません²。よって <code><pre>...</pre></code> は許されません。

別の言い方をすれば、<pre>の親要素として許可されているのは"フローコンテンツを受け入れるすべての要素"です³が、<code> は記述コンテンツしか受け入れません⁴。よって <code><pre>...</pre></code> は許されません。

<pre><code>...</code></pre>が正しい理由

複数行のコードを表すには、 <code> 要素を <pre> 要素の中に入れてください。 ⁵

とdeveloper.mozilla.orgに書かれていることからも正しいことがわかります。

1. https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩

2. https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content ↩

3. https://developer.mozilla.org/ja/docs/Web/HTML/Element/pre ↩

4. https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩

5. https://developer.mozilla.org/ja/docs/Web/HTML/Element/code ↩