Question

如何使用与整体层次结构存在模糊关系的介绍元素来构建内容的最佳方式？我认为最好用例子说明（例1）：

<main>
  <h1>Menu</h1>
  <h2>Concept</h2>
  <!-- A description of the concept -->
  <h2>Prices</h2>
  <!-- A price list -->
  <h2>Meat</h2>
  <h2>Vegetarian</h2>
  <h2>Desserts</h2>
</main>

这里概念和价格作为介绍性元素很自然，但从层次结构来看，我觉得它们与 Meat 属于同一级别，素食和甜点。

也许最好将介绍元素放在旁边元素中？像这样（例2）：

<main>
  <h1>Menu</h1>
  <aside>
    <h2>Concept</h2>
    <!-- A description of the concept -->
    <h2>Prices</h2>
    <!-- A price list -->
  </aside>
  <h2>Meat</h2>
  <h2>Vegetarian</h2>
  <h2>Desserts</h2>
</main>

我不确定这是否正确使用了旁边元素。怎么样把它放在一个标题中，也许还要整理一下（例3）：

<main>
  <header>
    <h1>Menu</h1>
    <h2>Concept</h2>
    <!-- A description of the concept -->
    <h2>Prices</h2>
    <!-- A price list -->
  </header>
  <section>
    <h1>Meat</h1>
  </section>
  <section>
    <h1>Vegetarian</h1>
  </section>
  <section>
    <h1>Desserts</h1>
  </section>
</main>

有没有人对此有任何想法？也许我的例子都不对，在这种情况下，我想知道构建这类内容的最佳做法是什么。

Answer 1

这是一个非常普遍的问题。我的主观意见是得到这种结构。避免在一个页面上使用多个H1。 section标签用于标记连接信息的区域。 article用于某个列表中的一个项目，它具有完整的含义（可以单独使用）。部分和文章应始终具有标题

<main>
  <header>
    <h1>Menu</h1>
  </header>
  <section>
    <h2>Concept</h2>
    <!-- A description of the concept -->
  </section>
  <section>
    <h2>Prices</h2>
    <!-- A price list -->
  </section>
  <section>
    <h2>Meal types</h2>
    <article>
      <h3>Meat</h3>
    </article>
    <article>
      <h3>Vegetarian</h3>
    </article>
    <article>
      <h3>Desserts</h3>
    </article>
  </section>
</main>

如何构建包含介绍元素的菜单？

1 个答案: