HTML Comentários Markup

votos
8

Atualmente, estou no processo de criar o meu próprio blog e eu tenho que marcar os comentários, mas o que é a melhor maneira de marcá-lo?

A informação que eu preciso para apresentar é:

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

Qualquer idéia de seria muito appriciated.

PS: Eu só estou interessado na marcação html semântica.

Publicado 07/08/2008 em 20:46
fonte usuário
Em outras línguas...                            


5 respostas

votos
4

Eu acho que a sua versão com a citar, blockquote, etc. iria trabalhar, mas se a semântica é a sua principal preocupação, então eu pessoalmente não usaria citar e blockquote como eles têm coisas específicas que eles supostamente representam.

A tag blockquote é utilizado para representar uma citação tirada de outra fonte e citar tag é utilizado para representar uma fonte de informação (como uma revista, jornal, etc.).

Eu acho que um argumento pode certamente fez que você pode usar HTML semântico com nomes de classe, desde que sejam significativas. Este artigo em Plain Old Semântica HTML faz uma referência ao uso de nomes de classe - http://www.fooclass.com/plain_old_semantic_html

Respondeu 07/08/2008 em 21:46
fonte usuário

votos
1

Aqui está uma maneira você poderia fazê-lo com o seguinte CSS para flutuar a figura à 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>

Respondeu 07/08/2008 em 20:56
fonte usuário

votos
0

Eu vejo o seu ponto. OK, depois de ler este artigo, por que não tentar algo como isto?

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

com um pouco de CSS snazzy para torná-la agradável.

feederscript.php seria algo que poderia ler a partir do banco de dados e eco apenas o CommentID chamado para.

Respondeu 07/08/2008 em 23:07
fonte usuário

votos
0

Eu estava talvez pensando em algo como isto:

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

É muito semântica sem o uso de DIV e apenas uma classe. A lista mostra a ordem dos comentários foram feitos, um link para o site de pessoas e imagem para o seu gravatar, a tag ao site que disse que o comentário e blockquote para segurar o que eles disseram citar.

O que as pessoas pensam?

Respondeu 07/08/2008 em 21:16
fonte usuário

votos
0

Eu não sei o que há de marcação que seria necessariamente representam o comentário estrutura bem sem usar divs ou classes, bem como, mas você pode 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>

Update: A preocupação que eu teria com uma abordagem como esta é que pode ser difícil para identificar os elementos com CSS para fins de estilo. Você pode usar JavaScript (jQuery seria ótimo aqui) para encontrar e aplicar estilos. Sem o apoio seletor CSS completo em todos os navegadores (IE), seria mais difícil de estilo.

Respondeu 07/08/2008 em 21:08
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more