Domanda
Attualmente sto creando il mio blog e devo contrassegnare i commenti, ma qual è il modo migliore per contrassegnarlo?
Le informazioni che devo presentare sono:
- Nome delle persone
- Icona Gravatar
- Data del commento
- Il commento
Qualsiasi idea sarebbe molto apprezzata.
PS:Mi interessa solo il markup semantico HTML.
Soluzione
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
Altri suggerimenti
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>
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.
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?
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.