Question

我试图用最具语义意识的方式整理HTML事件日历。

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

我遇到的问题是，当一个事件跨越多个日期时，似乎并不是一种明显的语义指示方式。

作为一个例子，假装我有一个包含6月份所有日期的列表;如果我有野外旅行＆＃34;在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个不同的事件，而不是3天内的1个事件。

我是什么都不担心，或者是否有一种表达关系的语义方式或者＆＃34;分组＆＃34;横跨3个<ARTICLE>元素？

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

Answer 1

有各种各样的关系。在你的情况下，它似乎是一个副本。 HTML5没有提供标记某些东西是其他东西副本的方法。

您正在创建三个微观数据项，这些项目与事物相同（即同一事件）。你should not do that。对于每个页面，应该只有一个关于特定事件的项目。

因此，如果您想要显示每天的完整事件数据，您只需删除所有＆＃34;副本的微数据＆＃34;：

<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>

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

1 个答案: