HTML комментарии Markup

Я думаю, что ваша версия с цитатой, блок-цитатой и т. д. определенно будет работать, но если семантика-ваша главная забота, то я лично не буду использовать cite и blockquote, поскольку у них есть конкретные вещи, которые они должны представлять.

Тег blockquote предназначен для представления цитаты, взятой из другого источника, а тег cite предназначен для представления источника информации (например, журнала, газеты и т. д.).

Я думаю, что аргумент, безусловно, может быть сделан, что вы можете использовать semantic HTML с именами классов, если они имеют смысл. Эта статья на простой старой семантической HTML делает ссылку на использование имен классов- http://www.fooclass.com/plain_old_semantic_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>

Я не знаю, что есть markup, который обязательно будет представлять структуру комментариев без использования divs или классов, но вы можете использовать списки определений. Вы можете использовать несколько тегов 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>

Update: проблема, с которой я столкнулся бы с таким подходом, заключается в том, что может быть сложно однозначно идентифицировать элементы с CSS для целей стилизации. Вы можете использовать JavaScript (jQuery было бы здорово здесь), чтобы найти и применить стили. Без полной поддержки селектора CSS в браузерах (IE)было бы сложнее стилизовать.

Возможно, я думал о чем-то вроде этого:

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

Это очень семантический без использования div и только один класс. Список показывает порядок, в котором были сделаны комментарии, ссылку на веб-сайт persons и изображение для их gravatar, тег cite для сайта, который сказал комментарий и blockquote, чтобы сохранить то, что они сказали.

А что думают люди?

Я понимаю вашу точку зрения. OK, после прочтения этой статьи, Почему бы вам не попробовать что-то вроде этого?

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

с некоторыми шикарными CSS, чтобы это выглядело красиво.

feederscript.php было бы что-то, что можно было бы прочитать из базы данных и Эхо только commentid требуется.