Документация 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>.
Ссылки
Ответ 2
CSS предназначен для представления.
Белое пространство является значительным (не презентационным) во многих языках программирования.
Ответ 3
Чтобы представить блок компьютерного кода, предварительный элемент можно использовать с элементом кода;
Чтобы представить блок вывода компьютера, предварительный элемент можно использовать с элементом samp.
<pre><code> для блочного кода, который не должен завершаться.
Используйте <code> для встроенного кода, который можно обернуть.
Разрывы строк и пробелы в тексте, заключенные в теги <pre>, поддерживаются так же, как и в html-документе, когда отображаются в браузере. Браузеры обычно отображают текст <pre> шрифтом с фиксированной разметкой, с whitespace.
Ответ 4
<pre> показывает разрывы строк!
Это предотвратит использование функции php, такой как nl2br(), или добавление вручную <br /> в каждом конце строки.
С уважением,
Дух
