Почему HTML5 рекомендует помещать элемент кода внутри pre?

<code> представляет только a "фрагмент компьютерного кода". Первоначально это было задумано для простых фрагментов кода, таких как i++ или <code>.

<pre> "представляет собой блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементами". Его первоначальная цель была не более чем именно так: предоставить текст таким же образом, как он был дан автором, например

+----------------------------------+
|                                  |
| WARNING! PREFORMATED TEXT AHEAD! |                      =o=
|                               __;                                  ~^
+----------------TT------------°
                 ||    _____________    _____________________
                 ||    | TO GRANDMA  >  | TOTALLY NOT A TRAP  > 
  oÖo            ||    |°°°°°°°°°°°°    °°°°°°°°°°°°°°°°°°°°°          
   |  ö          ||    |                |      .mm,                    
~"""~"""~"""~"""~"""~"""~~"""~"""~"""~"""~"""~"""~"""~"""~"""~""..MWMWc...~"""~""

вы не нужно использовать друг с другом. <pre> имеет свои собственные роли, как <code> своя. Однако,<pre> это способ сигнализировать, что пробел в данном фрагменте важен, роль, которая <code> отсутствует.

Однако, вернемся к вашему вопросу: обратите внимание на точно текст:

в следующем примере показано, как блок кода может быть помечены с помощью pre и code элементы.

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

класс используется в этом примере для указания используемого языка.

он говорит:может, а не должны. Вы можете делать это так, как вы хотите. Это не рекомендуется W3C в любом случае, однако, я лично рекомендую вам использовать <pre><code>....

дальнейших объяснений

всякий раз, когда пробел является частью вашего кода и структуры вашего кода, Вы должны заявить, что эта структура должна быть сохранена. Как структура в коде задается типографскими соглашениями (табуляциями, строками, пробелами) I лично рекомендуем использовать <pre><code>, даже если это, возможно, больше кода и другой узел в DOM. Но всякий раз, когда недостающие пробелы будут делать ваш код несовершенным, это необходимо.

кроме того, вы можете легко различаться между встроенным кодом и кодовыми блоками без проверки element.className, и некоторые JS синтаксис маркер работает довольно хорошо с <pre><code>... и <code> автоматически.

кроме того, если вы используете общее правило для <code> С white-space:pre;, вы не можете использовать его для встроенных фрагментов без дополнительных классов. Если вы должны были создать класс вместо этого, вы ничего не выиграли по сравнению с <pre><code>.

ссылки

• W3C:HTML5: 4.5.12 элемент кода (рекомендация W3C от 28 октября 2014 г.)

  The code элемент представляет фрагмент компьютерный код. Это может быть имя элемента XML, имя файла, компьютерная программа или любая другая строка, которую распознает компьютер.

• W3C:HTML5: 4.4.3 элемент pre (рекомендация W3C от 28 октября 2014 г.)

  The pre элемент представляет блок предварительно отформатированного текста, в котором структура представлена типографскими соглашениями, а не элементы.