html - 有没有办法表明 HTML 元素以某种方式相互关联？

Question

我正在尝试以最符合语义的方式将 HTML 事件日历放在一起。

经过一番考虑，我决定使用无序列表 (<UL> ... </UL>) 可能是最好的选择，因为我可以轻松地将它们显示为列表或网格。

我遇到的问题是，当单个事件跨越多个日期时，似乎没有明显的方法来语义指示。

例如，假设我有一个包含 6 月所有日期的列表；如果我在 2014 年 6 月 6 日和 2014 年 6 月 8 日之间有一个“野营旅行”事件，我可能会创建以下 HTML:

<ul>
    <!-- List elements for June 1 through June 5 would come here -->
    <li>
        <h3>
            <time datetime="2014-06-06" class="calendar_date">06</time>
        </h3>
        <article itemscope itemtype="http://schema.org/Event">
            <header>
                <h1 itemprop="name">Camping at Wapiti Lake</h1>
                <time itemprop="startDate" datetime="2014-06-06">June 6, 2014</time>
                 - <time itemprop="endDate" datetime="2014-06-08">June 8, 2014</time> 
            </header>
        </article>
    </li>
    <li>
        <h3>
            <time datetime="2014-06-07" class="calendar_date">07</time>
        </h3>
        <article itemscope itemtype="http://schema.org/Event">
            <header>
                <h1 itemprop="name">Camping at Wapiti Lake</h1>
                <time itemprop="startDate" datetime="2014-06-06">June 6, 2014</time>
                 - <time itemprop="endDate" datetime="2014-06-08">June 8, 2014</time> 
            </header>
        </article>
    </li>
    <li>
        <h3>
            <time datetime="2014-06-08" class="calendar_date">08</time>
        </h3>
        <article itemscope itemtype="http://schema.org/Event">
            <header>
                <h1 itemprop="name">Camping at Wapiti Lake</h1>
                <time itemprop="startDate" datetime="2014-06-06">June 6, 2014</time>
                 - <time itemprop="endDate" datetime="2014-06-08">June 8, 2014</time> 
            </header>
        </article>
    </li>
    <!-- The remaining List elements for June 9 through June 30 would come here -->
</ul>

我担心的是搜索引擎和日历解析器会将此视为 3 个不同的事件，而不是 1 个跨越 3 天的事件。

我是什么都不担心，还是有一种语义方式来表示 3 <ARTICLE> 之间的关系或“分组”元素？

我这样做是否完全错误，还有更好的方法吗？

Answer 1

关系有很多种。在你的情况下，它似乎是一个副本。 HTML5 不提供一种方法来标记某物是另一物的副本。

您正在创建三个微数据项，它们是关于相同的事物(即，相同的事件)。你should not do that .对于每一页，应该只有一个关于特定事件的项目。

因此，如果您想显示每天的完整事件数据，您可以简单地删除所有“副本”的微数据:

<ul>
  <li>
    <h3></h3>
    <article itemscope itemtype="http://schema.org/Event"></article>
  </li>
  <li>
    <h3></h3>
    <article><!-- no Microdata here --></article>
  </li>
  <li>
    <h3></h3>
    <article><!-- no Microdata here --></article>
  </li>
</ul>

旁注:在 li 中使用标题时，您应该始终 use section elements explicitly (和 spec encourages to do that in other cases anyway )。否则，li 开始标记在前面标题的范围内。

<ul>
  <li>
    <section>
      <h1></h1> <!-- you could also keep using 'h3' [if it matches your hierarchy] -->
      <article itemscope itemtype="http://schema.org/Event"></article>
    </section>
  </li>
  <li>
    <section>
      <h1></h1>
      <article></article>
    </section>
  </li>
  <li>
    <section>
      <h1></h1>
      <article></article>
    </section>
  </li>
</ul>