Ad

HTML5 Event Listing Semantics

- 1 answer

Would it be correct to list each event as an <article> on an event listing page (given that each event is a listing from the detail page of said event. Should it be considered the same thing as blog (semantically). Also should there be any consideration of the event date/time when it comes to markup. Any referenced reading are welcome, I couldn't find any particulars!

<main>
 <article>Event 1 on date given</article>
 <article>Event 2 on date given</article>
 <article>Event 3 on date given</article>
</main>

or should each event be contained in a single article and wrapped with a typical div structure.

<article>
 <div> Event 1 on date given</div>
 <div> Event 2 on date given</div>
 <div> Event 3 on date given</div>
</article>
Ad

Answer

  1. It’s appropriate to use the article element for events
    if using a sectioning content element is warranted.

  2. A sectioning content element is warranted
    if it makes sense to list each event in the document outline.

  3. It makes sense to list each event in the document outline
    if you provide enough content (where enough, of course, depends on the context).

So, for example,

if you just list the event name and the date, an ul element seems to be more appropriate:

<ul>
  <li><a target="_blank" rel="nofollow noreferrer" href="/events/1">Event 1</a> (<time>2016-12-27</time>)</li>
  <li><a target="_blank" rel="nofollow noreferrer" href="/events/2">Event 2</a> (<time>2016-12-27</time>)</li>
  <li><a target="_blank" rel="nofollow noreferrer" href="/events/3">Event 3</a> (<time>2016-12-28</time>)</li>
</ul>

but if you provide more details, like a description, the organizer, etc., an article element for each event can make sense:

<article>
  <header>
    <h2><a target="_blank" rel="nofollow noreferrer" href="/events/1" rel="bookmark">Event 1</a></h2>
    <time>2016-12-27</time>
  </header>
  <p>…</p>
  <img src="" alt="" />
  <p>…</p>
  <footer><p>Organized by …</p></footer>
</article>

<article>
  <!-- event 2 -->
</article>

<article>
  <!-- event 3 -->
</article>
Ad
source: stackoverflow.com
Ad