HTML-Kommentar-Markup

Question

Ich bin gerade dabei, meinen eigenen Blog zu erstellen und muss die Kommentare markieren, aber wie kann ich das am besten markieren?

Die Informationen, die ich vorlegen muss, sind:

1. Name einer Person
2. Gravatar-Symbol
3. Kommentardatum
4. Der Kommentar

Jede Idee wäre sehr dankbar.

PS:Ich interessiere mich nur für semantisches HTML-Markup.

Answer 1

Ich denke, dass Ihre Version mit Zitat, Blockquote usw.würde auf jeden Fall funktionieren, aber wenn Semantik Ihr Hauptanliegen ist, würde ich persönlich cite und blockquote nicht verwenden, da sie bestimmte Dinge darstellen, die sie darstellen sollen.

Das Blockquote-Tag soll ein Zitat aus einer anderen Quelle darstellen und das Cite-Tag soll eine Informationsquelle (wie eine Zeitschrift, Zeitung usw.) darstellen.

Ich denke, es lässt sich durchaus argumentieren, dass man semantisches HTML mit Klassennamen verwenden kann, sofern diese aussagekräftig sind.In diesem Artikel über Plain Old Semantic HTML wird auf die Verwendung von Klassennamen verwiesen – http://www.fooclass.com/plain_old_semantic_html

Answer 2

Hier ist eine Möglichkeit, mit dem folgenden CSS das Bild links vom Inhalt schweben zu lassen:

.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

Ich weiß nicht, dass es Markup gibt, das die Kommentarstruktur unbedingt gut darstellen würde, ohne auch Divs oder Klassen zu verwenden, aber Sie könnten Definitionslisten verwenden.Sie können mehrere dt- und dd-Tags im Kontext einer Definitionsliste verwenden – 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>

Aktualisieren:Die Sorge, die ich bei einem Ansatz wie diesem hätte, besteht darin, dass es schwierig sein könnte, die Elemente zu Stilzwecken mit CSS eindeutig zu identifizieren.Sie könnten JavaScript (jQuery wäre hier großartig) verwenden, um Stile zu finden und anzuwenden.Ohne vollständige Unterstützung von CSS-Selektoren in allen Browsern (IE) wäre die Formatierung schwieriger.

Answer 4

Ich habe vielleicht an so etwas gedacht:

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

Es ist sehr semantisch, ohne Divs und nur eine Klasse zu verwenden.Die Liste zeigt die Reihenfolge, in der die Kommentare abgegeben wurden, einen Link zur Website der Person und ein Bild für ihren Gravatar, das Cite-Tag für die Website, die den Kommentar abgegeben hat, und ein Blockzitat, um das zu halten, was sie gesagt hat.

Was denken die Leute?

Answer 5

Ich verstehe dein Argument.OK, nachdem Sie diesen Artikel gelesen haben, warum versuchen Sie nicht so etwas?

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

mit etwas schickem CSS, damit es schön aussieht.

feederscript.php wäre etwas, das aus der Datenbank lesen und nur die angeforderte Kommentar-ID wiedergeben könnte.