HTML Comentarios Marcado

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 para presentar es:

1. Personas Nombre
2. Gravatar Icono
3. Comentarios Fecha
4. El comentario

sería muy appriciated de Cualquier idea.

PD: Solo estoy interesado en el marcado semántico html.

Answer 1

Creo que su versión con el cité, blockquote, etc. definitivamente funcionaría, pero si la semántica es su principal preocupación, yo personalmente no usaría citar y blockquote, ya que tienen cosas específicas que se supone que representan.

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

Creo que definitivamente se puede argumentar que se puede usar HTML semántico con nombres de clase, siempre que sean significativos. Este artículo sobre el lenguaje semántico antiguo sin formato hace referencia al uso de nombres de clase: http://www.fooclass.com/plain_old_semantic_html

Answer 2

Aquí hay una forma en que podría hacerlo con el siguiente CSS flotar la imagen a la izquierda de los contenidos:

.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é que hay marcado que habría necesariamente representa bien la estructura de comentarios sin usar divs o clases, pero podría 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> 

Actualización: La preocupación que tendría con un enfoque de este tipo es que podría ser difícil de identificar de forma única los elementos con CSS para diseñar. Podría usar JavaScript (jQuery sería genial aquí) para buscar y aplicar estilos. Sin el soporte de selector de CSS completo en los navegadores (IE), sería más difícil de diseñar.

Answer 4

Estaba tal vez 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ántica sin usar divs y una sola clase. La lista muestra el orden en que se hicieron los comentarios, un enlace al sitio web de las personas, y la imagen de su gravatar, la cita de la cita al sitio que dijo el comentario y el blockquote para contener lo que dijeron.

¿Qué piensa la gente?

Answer 5

Veo su punto. OK, 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 algunas CSS atractivas para que se vea bien.

feederscript.php sería algo que podría leer de la base de datos y repetir solo el comentario solicitado.