イベントリストのセマンティック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
    </p> 
    <a href="#" class="btn event__btn">Visit Website</a> 
    </li> 
    <li> 
    ... 
    </li> 
    ... 
</ul> 

は、これは私が <article>秒で <li> Sを交換した場合 <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
    </address> 
    <a href="#" class="btn event__btn">Visit Website</a> 
    </article> 
    <article> 
    ... 
    </article> 
    ... 
</div> 

私は適切な意味マークアップを書くことにもっと慣れようとしています。これについてどうやって行きますか？

Answer 1

が使用されるかどうかは、各イベントのarticle要素を使用してください。is appropriateさらにulを使用することもできますが、通常は不要です。

アドレスがこのイベントの関連連絡先である場合は、address要素を使用するのが適切です。それがイベントの場所だけであっても、たとえば連絡先のアドレスが異なる場合は、後者にはaddress要素を使用する必要があります。

外部リンクがイベント固有のページに移動する場合は、bookmarkリンクタイプを使用できます。しかし、それが単なる例である場合には使用しないでください。イベントの場所のホームページ。