Is there a way to indicate HTML elements are somehow related to each other?

Question

I'm attempting to put together an HTML event calendar in the most semantically-minded way possible.

After some consideration, I decided that using Unordered Lists (<UL> ... </UL>) would likely be best since I can easily display them as either a list or a grid.

The problem I'm having is that when a single event spans multiple dates, there doesn't seem to be an obvious way to semantically indicate that.

As an example, pretend I have a list with all of the dates in June; If I have a "camping trip" event which happens between June 6, 2014 and June 8, 2014, I would likely create the following 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>

My worry here is that Search Engines and calendar parsers would see this as 3 different events, rather than 1 event spanning over the course of 3 days.

Am I worried about nothing, or is there a semantic way to indicate a relationship or "grouping" across the 3 <ARTICLE> elements?

Am I doing this completely wrong and there's a better way?

Answer 1

There are various kinds of relations. In your case, it seems to be a copy. HTML5 doesn’t offer a way to markup that something is a copy of something else.

You are creating three Microdata items which are about the same thing (i.e., the same event). You should not do that. For each page, there should only be one item about a specific event.

So if you want to display the full event data for each day, you could simply remove the Microdata for all "copies":

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

Side note: When using headings in li, you should always use section elements explicitly (and the spec encourages to do that in other cases anyway). Otherwise, the li start tags are in scope of the previous headings.

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