我目前正在创建自己的博客，我必须标记评论，但是标记它的最佳方法是什么？

我需要提供的信息是：

• 人名
• 墓碑图标
• 评论日期
• 评论

任何想法都将得到广泛应用。

PS：我只对语义html标记感兴趣。

解决方案

回答

我们可以使用以下CSS将图片浮动到内容左侧的一种方法：

.comment {
  width: 400px;
}

.comment_img {
  float: left;
}

.comment_text,
.comment_meta {
  margin-left: 40px;
}

.comment_meta {
  clear: both;
}

<div class='comment' id='comment_(comment id #)'>
  <div class='comment_img'>
    <img src='https://placehold.it/100' alt='(Commenter Name)' />
  </div>
  <div class='comment_text'>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
  </div>
  <p class='comment_meta'>
    By <a href='#'>Name</a> on <span class='comment_date'>2008-08-21 11:32 AM</span>
  </p>
</div>

回答

我不知道有一种标记可以在不使用div或者类的情况下很好地表示注释结构，但是我们可以使用定义列表。我们可以在定义列表的上下文中使用多个dt和dd标签http://www.w3.org/TR/html401/struct/lists.html#edef-DL

<dl>
  <dt>By [Name] at 2008-01-01<dt>
  <dd><img src='...' alt=''/></dd>
  <dd><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>

  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
   </dd>
</dl>

更新：我对这种方法的担心是，出于样式目的，很难用CSS唯一地标识元素。我们可以使用JavaScript(这里的jQuery很棒)来查找和应用样式。没有跨浏览器(IE)的完全CSS选择器支持，样式将更难。

回答

我也许在想这样的事情：

<ol class="comments">
    <li>
        <a href="">
            <img src="" alt="" />
        </a>
        <cite>Name<br />Date</cite>
        <blockquote>Comment</blockquote>
    </li>
</ol>

这是非常语义化的，无需使用div且仅使用一个类。该列表显示评论的执行顺序，人员网站的链接以及他们的头像的图像，表示该评论的站点的引用标签，并用引号引起来保留他们的讲话。

人们怎么看？

回答

我认为带有cite，blockquote等的版本肯定可以使用，但是如果语义是主要关注点，那么我个人就不会使用cite和blockquote，因为它们具有应该表示的特定内容。

blockquote标签旨在表示从另一个来源获取的报价，而cite标签旨在表示信息来源(例如杂志，报纸等)。

我认为可以肯定地说，只要语义有意义，就可以将语义HTML与类名一起使用。这篇关于Plain Old Semantic HTML的文章引用了使用类名的参考http://www.fooclass.com/plain_old_semantic_html

回答

我明白你的意思了。好吧，阅读完该文章后，为什么不尝试这样的事情呢？

<blockquote 
    cite="http://yoursite/comments/feederscript.php?id=commentid" 
    title="<?php echo Name . " - " . Date ?>" >
    <?php echo Comment ?>
</blockquote>

加上一些时髦的CSS，使其看起来更漂亮。

feederscript.php将是可以从数据库中读取并仅回显要求的commentid的东西。