16

現在、自分のブログを作成中で、コメントをマークアップする必要がありますが、マークアップする最良の方法は何ですか?

提示する必要がある情報は次のとおりです。

  1. 人物名
  2. グラバター アイコン
  3. コメント日
  4. コメント

どんなアイデアも非常に高く評価されます。

PS: セマンティック HTML マークアップだけに興味があります。

4

5 に答える 5

7

cite、blockquote などを使用したバージョンは間違いなく機能すると思いますが、セマンティクスが主な関心事である場合、cite と blockquote には特定のものがあるため、個人的には使用しません。

blockquote タグは別の情報源からの引用を表し、cite タグは情報源 (雑誌、新聞など) を表します。

セマンティック HTML をクラス名とともに使用できるという議論は、意味のあるものであれば確かにできると思います。Plain Old Semantic HTML に関するこの記事では、クラス名の使用について言及しています - http://www.fooclass.com/plain_old_semantic_html

于 2008-08-07T20:46:19.840 に答える
2

次の CSS を使用して、画像をコンテンツの左側にフロートさせる方法の 1 つを次に示します。

.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>

于 2008-08-07T19:56:36.697 に答える
2

私はおそらく次のようなことを考えていました：

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

div と 1 つのクラスのみを使用せずに非常にセマンティックです。リストには、コメントが作成された順序、その人の Web サイトへのリンク、グラバターの画像、コメントを言ったサイトへの引用タグ、およびコメントを保持するブロック引用が表示されます。

于 2008-08-07T20:16:44.423 に答える
1

div やクラスを使用せずにコメント構造を適切に表現するマークアップがあるかどうかはわかりませんが、定義リストを使用することはできます。定義リストのコンテキストで複数の dt および dd タグを使用できます - 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>

更新: このようなアプローチで懸念されるのは、スタイリング目的で CSS を使用して要素を一意に識別するのが難しい可能性があることです。スタイルを見つけて適用するには、JavaScript (ここでは jQuery が最適です) を使用できます。すべてのブラウザー (IE) で CSS セレクターを完全にサポートしないと、スタイルを設定するのが難しくなります。

于 2008-08-07T20:08:13.787 に答える
1

あなたの言ってる事がわかります。よし、その記事を読んだ後、次のようなことを試してみませんか?

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

見栄えを良くするためにおしゃれな CSS を使用します。

feederscript.php は、データベースから読み取って、要求されたコメント ID のみをエコーできるものです。

于 2008-08-07T22:07:16.400 に答える