В каком элементе я должен заключать комментарии <article/">?

Я работаю над блогом, который реализует комментарии Disqus, и я прилагаю все усилия, чтобы максимально использовать семантические разметки HTML5, насколько это возможно.

Здесь пример <article /> (сам по себе внутри <section />) довольно прост:

  <article class="post">
    <header>
      <h2>Title</h2>
      <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
    </header>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- blog comments -->
  </article>

С приведенной выше структурой я не уверен семантически, где можно интегрировать комментарии к статье.

  • A <footer /> явно не подходит ( "Элемент нижнего колонтитула не является секционирующим содержимым, а не содержит новый раздел." )
  • Disqus использует async JavaScript для создания <iframe />, чтобы содержать виджет комментариев, поэтому a <p /> тоже не подходит.

Я слишком задумываюсь о семантической разметке: лучше ли просто вставлять ее в <div /> и не беспокоиться об этом?

ОТВЕТЫ

Ответ 1

Вы можете вставить его в свой собственный <section> (а не <div>) в свой текст, содержащий <section>, как родной брат вашего <article>. Но если вы используете Disqus, я думаю, какой бы элемент вы ни использовали, это не имеет значения. Однако я не думаю, что это относится к содержимому статьи. Может быть, вместо <aside>?

Просто имейте в виду, что когда дело доходит до семантики, нет никаких жестких и быстрых правил. Пока ваш документ структурирован и очерчен значимым образом, это важно.

Ответ 2

В описании HTML5 есть для сообщения в блоге с комментариями. Что имеет смысл, на мой взгляд.

Ваш пример может выглядеть так:

  <article class="post">
    <header>
      <h1>Title</h1>
      <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
    </header>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>

    <section>
      <h1>Comments</h1>

      <article><!-- comment 1--></article>
      <article><!-- comment 2--></article>
      <article><!-- comment 3--></article>

    <section>

  </article>

Боковое примечание: я думаю, что ваш "posted-on" лучше вписывался в footer вместо header. Таким образом, ваш header может быть опущен, поскольку он будет содержать только заголовок. Таким образом, ваш пример может выглядеть так:

  <article class="post">

    <h1>Title</h1>

    <footer class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</footer>

    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>

    <section>
      <h1>Comments</h1>

      <article><!-- comment 1--></article>
      <article><!-- comment 2--></article>
      <article><!-- comment 3--></article>

    <section>

  </article>