Question

剧情：在构建优惠券网站时，我发现他们的内容并非页面所独有，但应在<main><article> ..here..</article></main>内使用。

问题：仅仅因为w3schools声明：

元素内的内容应该是唯一的文献。它不应包含任何重复的内容文档。

但我有内容将在文章内。像每次一样A coupon can be used by entering its code but a deal can only be activated by going to landing page. 这将在我将发布的每个“优惠券”帖子中重复出现。所以我现在尝试使用的是。

<main><article><main>Unique content</main>
<aside>A coupon can be used by entering its code but a deal can only be activated by going to landing page</aside></article></main>

但是又一次：

 Note: There must not be more than one <main> element in a document.
 The <main> element must NOT be a descendent of an <article>, <aside>,
 <footer>, <header>, or <nav> element.

那么在<main>和/或<article>中格式化UN-UNIQUE内容的最佳方法是什么。

Answer 1

main标记用于对article和aside元素进行分组。

<main>
    <article>
        The unique document content.
    </article>
    <aside>
        Related content for that document.
    </aside>
</main>

Answer 2

tl; dr - 运用你的常识：）

实际 w3网站上的

This article可以很好地了解应该去哪里。整体结构如下：

<body>

  <header>
    <!-- header content goes in here -->
  </header>

  <nav>
    <!-- navigation menu goes in here -->
  </nav>

  <section id="sidebar1">
    <!-- sidebar content goes in here -->
  </section>

  <main>
    <!-- main page content goes in here -->
  </main>

  <aside>
    <!-- aside content goes in here -->
  </aside>

  <footer>
    <!-- footer content goes in here -->
  </footer>

</body>

选项1 - <section> s

他们继续说<section> s，显然可以包含多个<articles>，但也可以将<section> s 放在中一个<article>，例如用于定义介绍或摘要：

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

因此，一种选择是在文章中添加<section id="content">和<section id="terms">。

选项2 - <footer> s

对于此类内容使用<footer>似乎有效。你说它仅适用于作者，日期，类别，但w3状态在spec for <footer>：

页脚通常包含有关其部分的信息，例如撰写者，相关文档的链接，版权数据等。

您的文字是优惠券的条款和条件，可以视为与版权数据在语义上相似。我认为这是一个判断电话。

选项3 - <div> s等...

作为一个游戏，在第一个链接中他们也say about <div>s：

如果没有其他更合适的元素可用于分组内容区域，则应使用[div] ...

因此，如果它确实并不清楚要使用什么，那么另一种可能性是：

<article>
  Blah blah
  <div class="terms"></div>
</article>

<强>摘要

老实说，在所有这些之后，似乎没有明确的答案，网站不太可能变得超级严格，他们在一段时间内语义解析文档，因为他们知道有很多人会在那里完全错了。如果您只是在每篇文章的末尾添加<p>相同的术语，那么它可能不会产生任何真正的差异，因为主要文本是唯一的。

我个人认为，只要你运用常识并选择一些不完全违背建议的东西，你就不会出错。

Answer 3

我会选择这样的东西：

<main>
    <div class='article'>
        <article>Unique content</article>
        <footer>This coupon can be used only once..</footer>
    </div>
    <div class='article'>
        <article>Unique content</article>
        <footer>This coupon can be used only once..</footer>
    </div>
</main>

无论如何，我认为拥有多个<main>代码比使用<article>代码中的非唯一内容更糟糕。

您还可以考虑使用Schema.org来正确地将您的内容与其他属性进行映射（itemprop ...）

Answer 4

根据WHATWG（HTML Living Document Standard背后的非正式小组），在main中使用article元素没有问题。 HTML Living Document说：

对文档中的主要元素数量没有限制。实际上，在许多情况下，拥有多个主要元素是有意义的。例如，具有多个文章元素的页面可能需要指示每个这样的元素的主要内容。

因此，你可以写

<body>
 <header>My Page Header</header> 
 <main>
  <article><h1>My First Article</h1>
   <main>My first article's content...</main>
   <aside>A sidebar</aside>
  </article>
  <article><h1>My Second Article</h1>
   <main>My second article's content...</main>
   <aside>Another sidebar</aside>
  </article>
 </main>
</body>

然而，W3C HTML 5.3 Draft disallows this并声明“文档中不得有多个可见的主要元素。”

这是一个关于HTML中心元素的分歧的有趣案例。惊人！ W3C作者与WHATWG背后的网络/浏览器开发人员之间似乎再次存在分歧。在这种情况下，我会选择WHATWG。

HTML5中<article>内的<article> </article> </main>

4 个答案: