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

Документация HTML5 рекомендует помещать элемент code внутри элемента pre, но я не понимаю, как это лучше или более семантично, чем просто использовать элемент кода и CSS. В собственном примере:

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

Также можно написать (сделав некоторые предположения о настройках браузера по умолчанию для pre):

<style>
code {
    display: block;
    white-space: pre;
}
</style>
…
<code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code>

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

Есть ли конкретная причина, по которой рекомендуется pre в решении CSS?

Ответы

Ответ 1

<code> представляет собой только "фрагмент компьютерного кода". Первоначально это предполагалось для простых фрагментов кода, таких как 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>....

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

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

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

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

Ссылки

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

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

  • W3C: HTML5: 4.4.3 Предварительный элемент (Рекомендация W3C от 28 октября 2014 года)

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

Ответ 2

CSS предназначен для представления.

Белое пространство является значительным (не презентационным) во многих языках программирования.

Ответ 3

Чтобы представить блок компьютерного кода, предварительный элемент можно использовать с элементом кода;

Чтобы представить блок вывода компьютера, предварительный элемент можно использовать с элементом samp.

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

Разрывы строк и пробелы в тексте, заключенные в теги <pre>, поддерживаются так же, как и в html-документе, когда отображаются в браузере. Браузеры обычно отображают текст <pre> шрифтом с фиксированной разметкой, с whitespace.

Ответ 4

<pre> показывает разрывы строк!

Это предотвратит использование функции php, такой как nl2br(), или добавление вручную <br /> в каждом конце строки.

С уважением, Дух