HTML5元素和HTML结构/部分

问题描述 投票：0回答：2

我已经使用HTML很多年了，但从来没有深入研究过新的HTML5元素和HTML结构/部分。我已经对MDN和w3s做了一些阅读，但我仍然很困惑。下面是布局的图像，正文部分的文档结构，以及我的一些问题。

enter image description here

<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>
  1. content-left和content-right应该是section元素甚至h3和h4元素而不是div元素？或者content-left和content-right应该分别是aside和section元素？
  2. 是否可以像h1 h4元素一样以无序的方式使用content-right通过article:first-child元素？
  3. 我知道你应该避免使用多个h1标签，但是在MDN的某个地方读到它在不同的部分是可以接受的吗？那么可以在h1元素中重用h4通过article吗？
  4. 我在aside中使用content-left元素是否正确？ content-left aside元素应该是section元素吗？
html html5 document sections
2个回答
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 ...可以认为aside与父母分开，尽管与父母有关。

是否可以像h1 h4元素一样以无序的方式使用content-right通过article:first-child元素？

令人惊讶的是，根据HTML Living Standard - Headings and Sections，它是可以的，它说：

等级或更高等级的后续标题开始新的（隐含的）部分，较低等级的标题开始隐含的子部分是前一部分的一部分。在这两种情况下，元素代表隐含部分的标题。 （重点补充）

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

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

在某些情况下，这实际上更容易维护，特别是如果section在编辑过程中往往会移动很多。

我在内容中使用了旁边的元素 - 左对吗？内容 - 左侧元素应该是部分元素吗？

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

但决定使它们成为aside或section将取决于它们的内容实际上与它们所属的section有关。 aside的目的更具体。

1
投票

说实话：我会做一些不同的事情......

关于你的问题：

  1. content-left和content-right应该是section元素，甚至是h3和h4元素而不是div元素？或者内容 - 左和内容 - 权利应分别放在一边和分段元素吗？

div元素允许流内容，而h *元素仅允许短语内容。这只是他们不应该是h * - 元素的一个原因。

您提到content-left包含有关所选产品的重要信息。在旁边元素中覆盖重要的相关信息对我来说没有意义。

  1. 是否可以以无序的方式使用h1到h4元素，就像内容正确的文章：first-child元素？

不，你可以这样做，但我不会称之为“没关系”。

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

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

  1. 那么在文章元素中重用h1到h4是否可以？

在错误的嵌套级别上重用h * -elements在语义上是不可行的。即在最高级别使用h1-elements（一个或多个），在h1以下的级别使用h2-elements，依此类推......

  1. 我在内容中使用了旁边的元素 - 左对吗？内容 - 左侧元素应该是部分元素吗？

事务窗格似乎对页面至关重要。我看不出任何理由把它放在一个旁边的元素中。

一般来说：h * - ，section，aside，nav和article elements部分文档。 （几乎）每个人都在虚拟的“内容表”中创建一条线。您建议使用h * -elements的方式似乎并不表示预期用途。在我们深入了解section-article元素之前：您是否关心html-tree的内容表？你希望那个内容表看起来像什么？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.