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

【问题标题】：Is there a way to indicate HTML elements are somehow related to each other?有没有办法表明 HTML 元素以某种方式相互关联？
【发布时间】：2014-05-03 18:28:59
【问题描述】：

我正在尝试以最符合语义的方式来组合一个 HTML 事件日历。

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

我遇到的问题是，当单个事件跨越多个日期时，似乎没有一种明显的方式可以在语义上表明这一点。

例如，假设我有一个包含六月所有日期的列表；如果我有一个在 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> 元素之间的关系或“分组”？

我这样做完全错了吗？有更好的方法吗？

【问题讨论】：

您是否尝试过使用丰富的 sn-ps 验证器来查看它返回的内容？此外，根据语义的显示方式来决定语义是完全错误的处理语义的方法。对不起，只有我的两分钱。我知道这可以通过 hcalendar 微格式实现。我更喜欢使用表格，但所有内容都可以视为列表 imo

标签： html date calendar semantic-markup date-range

【解决方案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>

【讨论】：