事件列表的语义 HTML

Question

我的网站上有一个活动页面，其中仅列出了一系列即将举行的活动。该按钮只会 link 到外部网站。 design/content 看起来像这样：

我将如何实现这种语义化？

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

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

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

<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 element for each event . While you could use a ul，通常不需要。

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

如果外部 link 转到特定于事件的页面，您可以使用 bookmark link 类型。但是如果它只是一个 link 就不要使用它，例如活动地点的主页。

事件列表的语义 HTML

Semantic HTML for list of events

html

semantic-markup