哪种 HTML 格式在语义上是正确的？

Question

我想知道哪种格式是正确的/最好的HTML？

freeCodeCamp 建议使用第二种格式，但是当我通过 HTML 验证器运行该格式时，它会给我错误。

1:

<section id="Hello_world" class="main-section">
    <h1>Hello world</h1>
    <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
      <code>
         function greetMe(yourName) { alert("Hello " + yourName); }
         <br>
         greetMe("World");
      </code>
</section>

或

2:

<section id="Hello_world" class="main-section">
  <header>Hello world</header>
<article>
    <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
      <code>
         function greetMe(yourName) { alert("Hello " + yourName); }
         <br>
         greetMe("World");
      </code>
</article>
</section>

我很困惑，因为我认为第一种格式是正确的，但 freeCodeCamp 另有建议。请帮忙

Answer 1

要编写多行 pre-formatted 代码，您应该在 <pre> 元素中使用 <code> 元素，而不使用 <br> 元素。

此外，使用 <article> 而不是 <section> 可能更好，因为内容读起来像是可再分发的——但如果没有更多上下文，就很难分辨。

如果“Hello World”是文章的标题，您应该使用 <h1> 而不是 <header>。 <header> 元素是分节元素，而不是版式元素。

综上所述，我会采取这样的方法：

pre {
  background: #eee;
  padding: 1rem;
}

<article id="hello-world" class="main-section">
  <h1>Hello world</h1>
  <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
  <pre><code>function greetMe(yourName) {
  alert("Hello " + yourName);
}

greetMe("World");</code></pre>
</article>

补充说明：

确保您使用的是 HTML5 验证器。如果您尝试使用仅适用于以前版本的 HTML 的验证器来验证 HTML5 代码，您将遇到很多错误。

FreeCodeCamp 在这种情况下是不正确的。我发现学习 HTML 语义的最佳途径是阅读 MDN Web 文档的 HTML Element Reference.

哪种 HTML 格式在语义上是正确的？

Which HTML format is semantically correct?

html

format

semantics

semantic-markup