为什么HTML5建议把代码元素放在pre？ [英] Why does HTML5 recommend putting the code element inside pre?

问题描述

HTML5文档建议将 pre 元素里面的code> code 元素，但我不明白这是更好还是更语义比只使用代码元素和CSS。在他们自己的例子中：

The HTML5 documentation recommends putting the code element inside the pre element, but I don't understand how this is better or more semantic than just using the code element and CSS. In their own example:

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

也可以写（假设浏览器的默认值为 / code>）：

Could also be written (Making some assumptions about the browser's defaults for pre):

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

即使 pre 来自内联代码字符串的代码 ，我不认为它比指定代码的 block-ness 在类中。

Even if the pre is there to distinguish a code block from an inline string of code, I don't see it being a more semantic choice than specifying the block-ness of the code in a class.

是否有特定的原因 pre CSS解决方案？

Is there a specific reason the pre is recommended over a CSS solution?

推荐答案

< code> >计算机代码片段。它最初是为简单的代码片段，如 i ++ 或< code> 。

<code> represents only a "fragment of computer code". It was originally thought for simple code snippets like i++ or <code>.

< pre> 表示一个预格式化文本块，其中结构由印刷约定表示， em>。它的原始目的就是这样：提供一个与作者给出的相同的文本，例如

<pre> "represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements". It's original purpose was nothing more than exactly this: provide a text in the same way it was given by the author, e.g.

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

您不需要彼此使用每个。 < pre> 有自己的角色，例如< code> 然而，< pre> 是用信号通知给定片段中的空白是重要的一种方式，< code> / code>。

You don't need to use each with each other. <pre> has its own roles, like <code> has its own. However, <pre> is a way to signalize that the white-space in the given fragment is important, a role that <code> is missing.

但是，回到您的问题：注意 b

However, back to your question: note the exact wording:

以下示例说明如何使用pre和code元素标记代码块。

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

在该示例中使用一个类来表示所使用的语言。

A class is used in that example to indicate the language used.

它表示可以，而不是应。你可以自由地这样做你想要的。这不是W3C以任何方式推荐，但我个人建议你使用< pre>< code> ... 。

It says could, not should. You're free to do this how you want. It's not recommended by the W3C in any way, however, I personally recommend you to use <pre><code>....

无论何时空白都是代码和代码结构的一部分，你应该声明这个结构应该保留。由于代码中的结构由字体约定（制表符，换行符，空格）给出，因此我建议您使用< pre>< code> ，即使它可以说更多的代码和DOM中的另一个节点。但是，每当丢失空格将会使代码不完美，这是必要的。

Whenever white-space is part of your code and the structure of your code, you should state that this structure should be kept. As the structure in code is given by typographic conventions (tabs, linefeeds, spaces) I personally recommend you to use <pre><code>, even if it's arguably more code and another node in the DOM. But whenever missing white-space will render your code imperfect it's necessary.

除此之外，你可以很容易地区分内联代码和代码块，而不检查 element.className ，并且一些JS语法荧光笔在< pre>< code> ... 自动。

Apart from that you can easily differ between inline code and code-blocks without checking element.className, and some JS syntax highlighter work pretty well with <pre><code>... and strip the <code> automatically.

此外，如果您使用< code>的一般规则; white-space：pre; 的，不能用于没有其他类的内联片段。如果你要创建一个类，那么与< pre>< code> 相比，你赢得了什么。

Also, if you use a general rule for <code> with white-space:pre;, you cannot use it for inline snippets without additional classes. If you were to create a class instead, you've won nothing compared to <pre><code>.

• W3C： HTML5：4.6.11代码元素（WD-html5-20120329）

• W3C: HTML5: 4.6.11 The code element (WD-html5-20120329)

代码元素表示计算机代码的片段。这可以是XML元素名称，文件名，计算机程序或计算机可识别的任何其他字符串。

The code element represents a fragment of computer code. This could be an XML element name, a filename, a computer program, or any other string that a computer would recognize.

W3C： HTML5：4.5.3 pre元素（WD-html5-20120329）

W3C: HTML5: 4.5.3 The pre element (WD-html5-20120329)

pre 元表示一组预先格式化的文本，其中结构由印刷

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

这篇关于为什么HTML5建议把代码元素放在pre？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！