Balisage des commentaires HTML

Question

Je suis actuellement en train de créer mon propre blog et je dois baliser les commentaires, mais quelle est la meilleure façon de le baliser ?

Les informations que je dois présenter sont :

1. Nom de la personne
2. Icône Gravatar
3. Date du commentaire
4. Le commentaire

Toute idée serait très appréciée.

PS :Je ne m'intéresse qu'au balisage HTML sémantique.

Answer 1

Je pense que votre version avec la citation, le blockquote, etc.fonctionnerait certainement, mais si la sémantique est votre principale préoccupation, personnellement, je n'utiliserais pas cite et blockquote car ils ont des choses spécifiques qu'ils sont censés représenter.

La balise blockquote est censée représenter une citation tirée d'une autre source et la balise cite est censée représenter une source d'information (comme un magazine, un journal, etc.).

Je pense qu'on peut certainement faire valoir que vous pouvez utiliser du HTML sémantique avec des noms de classe, à condition qu'ils soient significatifs.Cet article sur Plain Old Semantic HTML fait référence à l'utilisation de noms de classe - http://www.fooclass.com/plain_old_semantic_html

Answer 2

Voici une façon de procéder avec le CSS suivant pour faire flotter l'image à gauche du contenu :

.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

Je ne sais pas s'il existe un balisage qui représenterait nécessairement bien la structure des commentaires sans utiliser également de divs ou de classes, mais vous pouvez utiliser des listes de définitions.Vous pouvez utiliser plusieurs balises dt et dd dans le contexte d'une liste de définitions - 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>

Mise à jour:Le problème que j'aurais avec une approche comme celle-ci est qu'il pourrait être difficile d'identifier de manière unique les éléments avec CSS à des fins de style.Vous pouvez utiliser JavaScript (jQuery serait génial ici) pour rechercher et appliquer des styles.Sans la prise en charge complète du sélecteur CSS dans les navigateurs (IE), il serait plus difficile à styliser.

Answer 4

Je pensais peut-être à quelque chose comme ça :

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

C'est très sémantique sans utiliser de div et une seule classe.La liste montre l'ordre dans lequel les commentaires ont été faits, un lien vers le site Web de la personne et une image de son gravatar, la balise cite du site qui a prononcé le commentaire et une citation de bloc pour contenir ce qu'elle a dit.

Qu’en pensent les gens ?

Answer 5

Je vois ce que tu veux dire.OK, après avoir lu cet article, pourquoi n'essayez-vous pas quelque chose comme ça ?

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

avec du CSS élégant pour le rendre joli.

feederscript.php serait quelque chose qui pourrait lire à partir de la base de données et faire écho uniquement au commentaire demandé.