事件列表的语义HTML

Question

我的网站上有一个活动页面，它只列出了一堆即将发生的事件。该按钮只会链接到外部网站。设计/内容将如下所示：

我将如何制作这种语义？

目前，我正在做这样的事情：

<ul class="events__list">
  <li class="event">
    <h3 class="event__name">Event Title</h3>
    <time class="event__date">April 21-23, 2017</time>
    <p class="event__venue">Venue Location Name</p>
    <p class="event__address">123 Fourth St
      <br>City, STATE 01234
    </p>
    <a href="#" class="btn event__btn">Visit Website</a>
  </li>
  <li>
    ...
  </li>
  ...
</ul>

如果我要用<address>替换<li> s，那么使用<article>是否有意义。所以像这样：

<div class="events__list">
  <article class="event">
    <h3 class="event__name">Event Title</h3>
    <time class="event__date">April 21-23, 2017</time>
    <address class="event__address">
      Venue Location Name<br>
      123 Fourth St<br>
      City, STATE 01234
    </address>
    <a href="#" class="btn event__btn">Visit Website</a>
  </article>
  <article>
    ...
  </article>
  ...
</div>

我正在尝试更熟悉编写适当的语义标记。你会怎么做？

Answer 1

是否使用address，使用每个事件article的is appropriate元素。虽然您可以另外使用ul，但通常不需要它。

如果地址是此活动的相关联系人，则使用address元素是合适的。如果它只是事件的位置，但是例如联系人的地址不同，address元素应该用于后者。

如果外部链接转到特定于事件的页面，则可以使用bookmark链接类型。但如果只是链接到例如，请不要使用它。活动地点的主页。