html5 - metatags - meta tags generator

¿En qué elemento debo incluir los comentarios de un<artículo/>?

Question

Estoy trabajando en un blog que implementa los comentarios de Disqus y estoy haciendo un esfuerzo para hacer el mayor uso posible de los marcadores semánticos HTML5.

Aquí hay un ejemplo <article /> (en sí mismo dentro de una <section /> ), bastante simple:

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

Con la estructura anterior, no estoy seguro de cómo integrar semánticamente los comentarios del artículo.

• Un <footer /> claramente no es apropiado ("El elemento footer no está seccionando el contenido; no introduce una nueva sección").
• Disqus usa JavaScript asíncrono para crear un <iframe /> para contener el widget de comentarios, por lo que tampoco parece apropiado <p /> .

¿Estoy pensando demasiado en el tema del marcado semántico: es mejor pegarlo en un <div /> y no preocuparme por eso?

Answer 1

Hay un ejemplo en la especificación HTML5 para una publicación de blog con comentarios. Lo que tiene sentido, en mi opinión.

Tu ejemplo podría verse como:

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

Nota al margen: creo que tu " posted-on " encajaría mejor en un footer de footer lugar de un header . Por lo tanto, su header podría omitirse porque solo contendría el encabezado. Entonces tu ejemplo podría verse como:

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

Answer 2

Podría pegarlo en su propia <section> (en lugar de una <div> ) dentro de su <section> , como un hermano de su <article> . Pero si estás usando Disqus, supongo que el elemento que uses no importa. Aunque no creo que pertenezca al contenido del artículo. Tal vez un <aside> lugar?

Solo tenga en cuenta que cuando se trata de semántica, no hay reglas duras y rápidas. Mientras su documento esté estructurado y delineado de manera significativa, eso es lo que importa.