HTML-разметка комментариев

В настоящее время я занимаюсь созданием своего собственного блога, и мне нужно пометить комментарии, но как лучше всего это отметить?

Информация, которую я должен представить:

  1. Персоны Имя
  2. Граватар Иконка
  3. Дата комментария
  4. Комментарий

Любая идея будет очень ценной.

PS: меня интересует только семантическая разметка HTML.

7.08.2008 19:46:47
5 ОТВЕТОВ
РЕШЕНИЕ

Я думаю, что ваша версия с cite, blockquote и т. Д. Определенно будет работать, но если ваша основная задача - семантика, я лично не буду использовать cite и blockquote, поскольку в них есть конкретные вещи, которые они должны представлять.

Тег blockquote предназначен для представления цитаты, взятой из другого источника, а тег cite предназначен для представления источника информации (например, журнала, газеты и т. Д.).

Я думаю, что можно привести аргумент, что вы можете использовать семантический HTML с именами классов, если они имеют смысл. В этой статье о простом старом семантическом HTML делается ссылка на использование имен классов - http://www.fooclass.com/plain_old_semantic_html

6
7.08.2008 20:46:19

Вот один из способов, которым вы можете сделать это с помощью следующего CSS, чтобы поместить изображение слева от содержимого:

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

1
30.11.2016 10:50:19

Я не знаю, что есть разметка, которая обязательно хорошо представляла бы структуру комментариев, не используя 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 был бы великолепен здесь) для поиска и применения стилей. Без полной поддержки CSS-селекторов в браузерах (IE) стиль будет сложнее.

0
7.08.2008 20:11:23

Возможно, я думал о чем-то вроде этого:

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

Это очень семантически без использования div и только одного класса. Список показывает порядок, в котором были сделаны комментарии, ссылку на веб-сайт людей и изображение для их граватара, тег цитирования сайта, который произнес комментарий и блок-цитату, чтобы содержать то, что они сказали.

Что думают люди?

1
7.08.2008 20:16:44
Насколько я понимаю, атрибуты класса - это то, что ведет к семантике. Я полагаю, что большинство микроформатов реализованы как классы и атрибуты в XHTML, и вы не станете намного более семантическими, если не захотите использовать RDF и тому подобное.
Thomas Owens 7.08.2008 20:02:14

Я понимаю вашу точку зрения. Хорошо, после прочтения этой статьи, почему бы вам не попробовать что-то подобное?

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

с немного шикарным CSS, чтобы он выглядел красиво.

feederscript.php будет что-то, что может читать из базы данных и отображать только то, что требуется.

0
7.08.2008 22:07:16