Microformats comments examples

aaronparecki.com.html

<li data-url="http://waterpigs.co.uk/notes/4WXEyS/" id="external_http_waterpigs_co_uk_notes_4WXEyS_" class="h-cite">
  <div class="inner">
    <div class="minicard h-card vcard author p-author">
      <div style="position: relative; width: 48px; height: 48px; float: left; margin-right: 6px;">
        <img width="48" alt="Barnaby Walters" src="http://waterpigs.co.uk/photo.jpg" class="photo logo u-photo">
      </div>
      <a class="u-url" href="http://waterpigs.co.uk">waterpigs.co.uk</a>
      <a href="http://waterpigs.co.uk" class="p-name fn value name">Barnaby Walters</a>
    </div>
    <div class="quote-text">
      <a href="http://waterpigs.co.uk/notes/4WXEyS/">http://waterpigs.co.uk/notes/4WXEyS/</a>
    </div>
    <a class="u-url" href="http://waterpigs.co.uk/notes/4WXEyS/">
      <time datetime="2014-06-10T14:58:26+00:00" class="date dt-published">June 10, 2014 2:58pm GMT+0000</time>
    </a>
  </div>
</li>

adactio.com.html

<article id="comment2908" class="p-comment h-entry">
  <h3><a href="https://twitter.com/jeffinitelyjeff/status/489588933139767296" class="p-name u-url">Jeff Ruberg</a></h3>
  
  <div class="e-content">
    <p><a href="https://twitter.com/adactio">@adactio</a> is that non-finger artwork a custom one-off thing for your feeds?</p>
  </div>
  
  <footer>
    <p class="meta">
      <a rel="bookmark" href="#comment2908">#</a>
      Posted by
      <cite class="h-card p-author">
        <a href="https://twitter.com/jeffinitelyjeff/status/489588933139767296" class="u-url p-name">Jeff Ruberg</a>
      </cite>
      on
      <abbr title="2014-07-17T01:54:32" class="dt-published">Thursday, July 17th, 2014 at 1:54am</abbr>
    </p>
  </footer>
</article>

sandeep.io.html

<div id="mention_130" class="response">
  <a href="http://kylewm.com" class="h-card">
    <img width="22" src="https://pbs.twimg.com/profile_images/452466589946740736/uQwxMiri.jpeg" title="Kyle Mahan" alt="Kyle Mahan">
  </a>
  <a href="http://kylewm.com">Kyle Mahan</a> commented on this on <a href="https://brid-gy.appspot.com/comment/twitter/sandeepshetty/459115725160857600/459117698048196609">23 Apr 2014</a>
  <div class="content">
    @sandeepshetty dang, sorry about that! not sure why... I need to add much better...
  </div>
</div>

sixtwothree.org.html

<article class="response p-comment h-entry">
  <div class="response-content e-content">
    <p>I'd be interested to know if that would be different had you been using analytics.js -- a lot more data is stored server-side, so you don't have to send as much cookie data with each request. Also, you're dead to me.</p>
  </div>

  <footer class="response-footer">
    <p>
      <a class="author h-card" href="https://facebook.com/1525978">
        <img class="avatar u-photo" src="https://graph.facebook.com/1525978/picture?type=large"> 
        <span class="name p-name">Paul Koch</span>
      </a>
      responded on
      <a class="permalink u-url" href="https://facebook.com/695127342/posts/10152190543487343?comment_id=10152190681082343">
        <time class="pubdate dt-published" datetime="2014-08-05T00:19:04+00:00">August 5<sup>th</sup>, 2014 at 12:19 am UTC</time>
      </a>.
    </p>
  </footer>
</article>

waterpigs.co.uk.html

<article class="h-entry p-comment clearfix reply-relation">
  <img class="compact-mention-icon" src="/img/icons/reply-icon.svg" alt="">
  <a class="p-author h-card" href="http://www.smarimccarthy.is">
    <img class="u-photo photo" src="https://pbs.twimg.com/profile_images/3485553746/a852bda24135ae24894d058fbc3ddaeb.jpeg" alt="">
    Smári McCarthy
  </a>

  <span class="published-datetime">
    <a class="u-url url" href="https://twitter.com/smarimc/status/476379735568965632">
      <time class="dt-published" datetime="2014-06-10T15:05:54+00:00">2014-06-10 15:05</time>
    </a>
  </span>

  <div class="e-content p-summary p-name reply-content">
    <a href="https://twitter.com/BarnabyWalters">@BarnabyWalters</a>
    <a href="https://twitter.com/aaronpk">@aaronpk</a> yes, the iBeacon thing is quite shit.
    <p class="u-mention">
      <a href="http://waterpigs.co.uk/notes/4WXEyS/"></a>
      <a href="http://waterpigs.co.uk/notes/4WXEyS/"></a>
    </p>
  </div>
</article>

In IRC, kylewm pointed me in the direction of this page on the IndieWebCamp wiki which pretty much answers all of my questions.