Marcação de comentários HTML

Question

Atualmente estou criando meu próprio blog e preciso marcar os comentários, mas qual a melhor forma de marcá-lo?

As informações que preciso apresentar são:

1. Nome da pessoa
2. Ícone do Gravatar
3. Data do comentário
4. O comentário

Qualquer ideia seria muito apreciada.

PS:Estou interessado apenas na marcação HTML semântica.

Answer 1

Acho que sua versão com citação, citação, etc.definitivamente funcionaria, mas se a semântica é sua principal preocupação, então eu pessoalmente não usaria citar e bloquear, pois eles têm coisas específicas que deveriam representar.

A tag blockquote destina-se a representar uma citação retirada de outra fonte e a tag cite destina-se a representar uma fonte de informação (como uma revista, jornal, etc.).

Acho que certamente pode ser argumentado que você pode usar HTML semântico com nomes de classes, desde que sejam significativos.Este artigo sobre Plain Old Semantic HTML faz uma referência ao uso de nomes de classes - http://www.fooclass.com/plain_old_semantic_html

Answer 2

Aqui está uma maneira de fazer isso com o seguinte CSS para flutuar a imagem à esquerda do conteúdo:

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

Answer 3

Não sei se existe marcação que necessariamente representaria bem a estrutura de comentários sem usar divs ou classes também, mas você poderia usar listas de definição.Você pode usar várias tags dt e dd no contexto de uma lista de definições - 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>

Atualizar:A preocupação que eu teria com uma abordagem como essa é que poderia ser difícil identificar exclusivamente os elementos com CSS para fins de estilo.Você poderia usar JavaScript (jQuery seria ótimo aqui) para encontrar e aplicar estilos.Sem suporte completo ao seletor CSS entre navegadores (IE), seria mais difícil estilizar.

Answer 4

Talvez eu estivesse pensando em algo assim:

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

É muito semântico sem usar div's e apenas uma classe.A lista mostra a ordem em que os comentários foram feitos, um link para o site da pessoa e uma imagem para seu gravatar, a tag de citação do site que disse o comentário e o blockquote para conter o que eles disseram.

O que as pessoas pensam?

Answer 5

Eu entendo o seu ponto.OK, depois de ler esse artigo, por que você não tenta algo assim?

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

com um pouco de CSS elegante para torná-lo bonito.

feederscript.php seria algo que poderia ler o banco de dados e ecoar apenas o commentid solicitado.