为什么HTML5推荐将code元素放在pre标签内？

Question

为什么HTML5推荐将code元素放在pre标签内？

71

HTML5文档建议将code元素放在pre元素内，但我不明白这种做法相对于仅使用code元素和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 解决方案的可能吗？

- kojiro

4

因为<code>虽然应用了等宽字体，但是不像<pre>那样保留换行。比如将格式化的代码应用于<code>标签将破坏其格式。这在<code>标签最初的定义中有些遗漏，现在我们必须保持向后兼容性。 - Marc B

4

这份文档并非“推荐”这样做，只是将其作为示例展示。 “[示例] 展示了如何使用 pre 和 code 元素来标记一段代码块。” - gen_Eric

1

@MarcB 我认为这不是疏忽。正如我在问题中所说的，code 对于内联代码字符串也很有用。但这并不意味着 pre 比 CSS 更适合块格式化。 - kojiro

4

你是不是指在 CSS 代码片段中应该使用 white-space: pre;？ - xec

3

深呼吸，想象一下平静的蓝色海洋。同时，在 "white-space" 中加一个短横线吧？ :) - xec

显示剩余2条评论

5个回答

11

CSS是用于网页展示样式的。

在许多编程语言中，空白字符通常具有重要意义（而不仅仅是用于样式呈现）。

- Quentin

3

需要注意的是，即使在编程语言中，对于白空格并非“必需”的（从技术上讲），但为了让人类更容易阅读代码，它仍然是必要的。 - 0b10011

2

@FabianBarney，嗯...是的，我知道。这就是我所说的"...即使在一些编程语言中并不需要空格...". 我从来没有说过任何编程语言在技术上不需要空格。 - 0b10011

@bfrohs 对不起，我一开始误解了你的意思。+1 - Fabian Barney

1

那么我应该在代码中使用 pre 标签来处理有意义的空格，而对于空格是表现形式的代码则使用 CSS？ - kojiro

4

这个答案让我想知道<pre>是否真的是语义化标记，还是像<b>、<i>一样(即早期HTML版本中的纯表示性遗留标记)。 - stakx - no longer contributing

4

为了代表一段计算机代码块，可以使用 pre 元素与 code 元素；

为了代表计算机输出的一段块状文字，可以使用 pre 元素与 samp 元素。

<pre><code> 用于不需要换行的块状代码。使用 <code> 表示可换行的内联代码。

在被 <pre> 标签包含的文本中，行间距和空格都会保留，就像HTML文档中一样，当在浏览器中显示时。浏览器通常会使用等宽字体和 whitespace 渲染 <pre> 文本。

- Prashobh

这并没有真正回答OP的问题，即HTML5示例中为什么要使用<pre>标签？ - xec

1

他问道：“为什么推荐使用pre而不是CSS解决方案？”我回答了我的所知。 - Prashobh

-1

<pre>标签显示换行符！

这可以防止您使用诸如nl2br（）之类的php函数或在每行末尾手动添加<br />。

此致， Ghost

- Ghost

-1

什么使得<pre>成为显示预格式化文本的语义元素，是它默认的white-space属性值。

white-space: pre;

如果由于某种原因需要覆盖它，那么使用<pre>就不再有意义了，并且在标记中添加额外元素是一种不好的做法。例如，如果您喜欢包装长字符串的代码，您需要使用white-space: pre-wrap。在这种情况下，以下是如何处理内联代码和块代码的方法：

code.block {
  display: block;
  white-space: pre-wrap;
  background: tan;
}

code:not(.block) {
  background: plum;
}

<code class="block">var i: Integer;
begin
   i := 1;
end.</code>

<p>The <code>code</code> element is enough.</p>

为了使标记更加清晰，将 class 分配给您网站中较少常见的用例：要么是 class="inline"，要么是 class="block"。

- Mori

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zeta · Accepted Answer

<code>代表计算机代码的片段。它最初是为像i++或<code>这样的简单代码片段而设计的。 <pre>“表示一块预格式化文本，其中结构由排版约定而不是元素表示”。它的最初目的只是提供以与作者给出的方式相同的方式提供文本。

您不需要将它们彼此配合使用。 <pre> 有其自身的作用，就像 <code> 一样。但是，<pre> 是一种信号，表示所给片段中的空格很重要，而这是 <code> 所缺失的角色。

然而，回到您的问题：请注意“确切”的措辞：

The following example shows how a block of code could be marked up using the pre and code elements.
<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>...来使内容更加易懂，保留代码中的空格和换行符。因为代码的结构是由排版约定（制表符、换行符、空格）给出的，即使这可能会增加代码量并且在DOM中添加另一个节点，但我仍然建议您使用<pre><code>标签。但是，当缺少空格时，将使您的代码不完美，此时使用<pre><code>是必要的。

此外，您可以轻松区分内联代码和代码块，无需检查element.className，某些JS语法高亮器也可以很好地与<pre><code>...配合使用，并自动删除<code>标签。

此外，如果您为 <code> 使用了 white-space:pre; 的通用规则，则无法在不添加额外类的情况下用于内联代码片段。如果您创建了一个类，那么与 <pre><code> 相比，您并没有获得任何优势。

参考资料

W3C: HTML5: 4.5.12 代码元素 (W3C推荐标准，2014年10月28日)

code元素代表计算机代码片段。这可以是XML元素名称、文件名、计算机程序或任何计算机可识别的字符串。
W3C: HTML5: 4.4.3 预格式化文本元素 (W3C推荐标准，2014年10月28日)

pre元素代表预格式化文本块，其中结构由排版约定而不是元素表示。