Question

我使用HTML已有很长时间了，但是从未深入研究新的HTML5元素和HTML结构/部分。我已经对MDN和w3s进行了一些阅读，但是仍然很困惑。下面是布局，正文部分的文档结构以及我所遇到的一些问题的图像。

<body>
  <header id='header'>
    <h1 id='header-left'>
      <img id='logo' />
    </h1>
    <div id='header-right'>
      <nav id='nav-links-cont'>
        <a class='nav-links' href='' alt=''>FILTER</a>
        <a class='nav-links' href='' alt=''>SELL</a>
        <a class='nav-links' href='' alt=''>FEEDBACK</a>
      </nav>
    </div>
  </header>
  <main id='content'>
    <div id='content-left'>
      <aside id='search-and-filter-pane'></aside>
      <article id='product-info-pane'></article>
      <aside id='transaction-pane'></aside>
    </div>
    <section id='content-right'>
      <article class='grid-item'>
        <h4 class='row item-transaction'></h4>
        <div class='row item-image'></div>
        <h1 class='row item-product'></h1>
        <h2 class='row item-brand'></h2>
        <h3 class='row item-model'></h3>
      </article>
      <article class='grid-item'>
        <div class='row item-transaction'></div>
        <div class='row item-image'></div>
        <div class='row item-product'></div>
        <div class='row item-brand'></div>
        <div class='row item-model'></div>
      </article>
    </section>
  </main>
</body>

应该用content-left和content-right元素还是section和h3元素而不是h4元素？还是div和content-left分别是content-right和aside元素？
是否可以像section h1元素那样以无序方式使用h4至content-right元素？
我知道您应该避免使用多个article:first-child标签，但在MDN上的某个地方读到它在不同部分中可以接受吗？那么可以在h1元素中重用h1到h4吗？
我在article中使用aside元素正确吗？ content-left content-left元素应该改为aside元素吗？

Answer 1

我将根据对此处所说内容的理解，尝试回答您的问题：

content-left和content-right应该是section元素，甚至是h3和h4元素而不是div元素？还是content-left和content-right分别是aside和section元素？

content-left和content-right都可以是section。根据上面的参考， section元素代表文档的一般部分，以及内容的主题分组。然后继续给出示例。 部分的示例包括章节，选项卡式对话框中的各个选项卡式页面或论文的编号部分。网站的主页可以分为几个部分，以进行介绍，新闻和联系信息。

但是，h3和h4都不能，因为它们都包含一个article元素，而该元素不被视为phrasing content。

现在，如果它们的内容与父项的内容有切线关系，则它们也可以是aside ，在本例中为main#content ... An aside 可以认为与父代是分开的，尽管与此有关。

可以像h1 h4元素那样以无序方式使用content-right到article:first-child元素吗？

令人惊讶的是，根据HTML Living Standard - Headings and Sections，它表示：

等级相等或较高的后续标题开始新的（隐含的）部分，等级较低的标题开始的隐含子部分是上一个部分的一部分。在这两种情况下，元素都代表隐含节的标题。（已加强调）

我知道您应该避免使用多个h1标签，但在MDN上的某个地方读到它在不同部分中可以接受吗？那么可以在文章元素中重用h1到h4吗？

这类似于您之前的问题。我引用的链接实际上重复使用了同一h1元素中section元素内的body。

在某些情况下，这实际上更易于维护，尤其是在编辑过程中section倾向于移动很多的情况下。

我在content-left中使用aside元素正确吗？应该将content-left aside元素改为section元素吗？

从技术上讲，这是正确的。允许flow content的地方使用aside。

但是要决定是使它们成为aside还是section，将取决于其内容相对于其所属的section的实际作用。 aside的目的更加具体。

Answer 2

说实话：我有几件事会做不同的事情……

关于您的问题：

content-left和content-right应该是section元素，还是h3和h4元素而不是div元素？还是应该分别将content-left和content-right放在一边和section元素？

div元素只允许流内容，而h *元素只允许短语内容。这只是为什么它们不应该是h *元素的原因之一。

您提到，content-left包含有关所选产品的重要信息。对我来说，把关键的相关信息放在一边的说法对我来说是没有意义的。

以无序的方式使用h1到h4元素可以吗？就像在content-right article：first-child元素中一样？

不。您可以这样做，但我不会称之为“好”。

我知道您应该避免使用多个h1标签，但是在MDN上的某个地方读到它在不同部分中可以接受吗？

什么？在单个页面中使用多个h1元素可能是很有意义的。

那么可以在文章元素中重用h1到h4吗？

从语义上讲，不能在错误的嵌套级别上重用h *元素。即在最高级别使用h1元素（一个或多个），在h1以下的级别使用h2元素，依此类推...

我在content-left中使用aside元素正确吗？应该将content-left aside元素改为section元素吗？

事务窗格对于该页面似乎至关重要。我看不出有任何理由将其放在一边。

通常来说：h *-，section，aside，nav和article元素分别用于文档。（几乎）每个人都在虚拟“目录”中创建一行。您建议使用h *元素的方式似乎并不表示预期的用法。在我们深入探讨节和文章元素之前：您是否关心HTML树的目录？您希望该目录如何显示？

HTML5元素和HTML结构化/分段

2 个答案: