Markup dei commenti HTML

Question

Attualmente sto creando il mio blog e devo contrassegnare i commenti, ma qual è il modo migliore per contrassegnarlo?

Le informazioni che devo presentare sono:

1. Nome delle persone
2. Icona Gravatar
3. Data del commento
4. Il commento

Qualsiasi idea sarebbe molto apprezzata.

PS:Mi interessa solo il markup semantico HTML.

Answer 1

Penso che la tua versione con la citazione, il blockquote, ecc.funzionerebbe sicuramente, ma se la semantica è la tua preoccupazione principale, personalmente non userei citazione e virgolette in quanto hanno cose specifiche che dovrebbero rappresentare.

Il tag blockquote vuole rappresentare una citazione presa da un'altra fonte e il tag cite vuole rappresentare una fonte di informazione (come una rivista, un giornale, ecc.).

Penso che si possa certamente sostenere che è possibile utilizzare l'HTML semantico con i nomi delle classi, a condizione che siano significativi.Questo articolo su Plain Old Semantic HTML fa riferimento all'uso dei nomi delle classi: http://www.fooclass.com/plain_old_semantic_html

Answer 2

Ecco un modo per farlo con il seguente CSS per far fluttuare l'immagine a sinistra del contenuto:

.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

Non so se esiste un markup che rappresenterebbe necessariamente bene la struttura dei commenti senza utilizzare div o classi, ma potresti utilizzare elenchi di definizioni.Puoi utilizzare più tag dt e dd nel contesto di un elenco di definizioni: 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>

Aggiornamento:La preoccupazione che avrei con un approccio come questo è che potrebbe essere difficile identificare in modo univoco gli elementi con i CSS per scopi di styling.Potresti utilizzare JavaScript (jQuery sarebbe fantastico qui) per trovare e applicare gli stili.Senza il supporto completo del selettore CSS su tutti i browser (IE), sarebbe più difficile definire uno stile.

Answer 4

Forse stavo pensando a qualcosa del genere:

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

È molto semantico senza usare div e solo una classe.L'elenco mostra l'ordine in cui sono stati fatti i commenti, un collegamento al sito web della persona e un'immagine per il suo gravatar, il tag di citazione al sito che ha detto il commento e una citazione in blocco per mantenere ciò che ha detto.

Cosa pensa la gente?

Answer 5

Capisco il tuo punto.OK, dopo aver letto l'articolo, perché non provi qualcosa del genere?

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

con alcuni CSS eleganti per renderlo carino.

feederscript.php sarebbe qualcosa che potrebbe leggere dal database ed echeggiare solo il commento richiesto.