Marcado de comentarios HTML

Question

Actualmente estoy en el proceso de crear mi propio blog y tengo que marcar los comentarios, pero ¿cuál es la mejor manera de marcarlo?

La información que necesito presentar es:

1. Nombre de persona
2. Icono Gravatar
3. Comentario Fecha
4. El comentario

Cualquier idea sería muy apreciada.

PD:Sólo me interesa el marcado HTML semántico.

Answer 1

Creo que tu versión con la cita, cita en bloque, etc.Definitivamente funcionaría, pero si la semántica es su principal preocupación, yo personalmente no usaría citar y bloquear comillas, ya que tienen cosas específicas que se supone que deben representar.

La etiqueta blockquote está destinada a representar una cita tomada de otra fuente y la etiqueta cite está destinada a representar una fuente de información (como una revista, un periódico, etc.).

Creo que ciertamente se puede argumentar que se puede usar HTML semántico con nombres de clases, siempre que sean significativos.Este artículo sobre HTML semántico antiguo y simple hace referencia al uso de nombres de clases: http://www.fooclass.com/plain_old_semantic_html

Answer 2

Esta es una forma de hacerlo con el siguiente CSS para hacer flotar la imagen a la izquierda del contenido:

.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

No sé si existe un marcado que necesariamente represente bien la estructura de comentarios sin usar divs o clases también, pero podrías usar listas de definiciones.Puede utilizar varias etiquetas dt y dd en el contexto de una lista de definiciones: 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>

Actualizar:La preocupación que tendría con un enfoque como este es que podría ser difícil identificar de forma única los elementos con CSS para fines de estilo.Podrías usar JavaScript (jQuery sería genial aquí) para buscar y aplicar estilos.Sin compatibilidad total con el selector CSS en todos los navegadores (IE), sería más difícil diseñarlo.

Answer 4

Quizás estaba pensando en algo como esto:

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

Es muy semántico sin usar div y solo una clase.La lista muestra el orden en que se hicieron los comentarios, un enlace al sitio web de la persona y una imagen para su gravatar, la etiqueta de cita del sitio que dijo el comentario y la cita en bloque para contener lo que dijeron.

¿Qué piensa la gente?

Answer 5

Entiendo tu argumento.Bien, después de leer ese artículo, ¿por qué no intentas algo como esto?

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

con un poco de CSS elegante para que se vea bien.

feederscript.php sería algo que podría leer desde la base de datos y hacer eco solo del ID de comentario solicitado.