19

私は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は非同期JavaScriptを使用し<iframe />て、コメントウィジェットを含むを作成するため、a<p />も適切ではないようです。

私はセマンティックマークアップのことを考えすぎていますか？それをaに貼り付けて、<div />心配しないのが最善ですか？

4

2 に答える 2

24

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>

補足: あなたの " " は aではなくa にposted-on収まると思います。見出しのみが含まれるため、省略できます。したがって、例は次のようになります。footerheaderheader

  <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>
于 2012-09-29T00:34:18.893 に答える
9

の兄弟として、包含内の<section>（ではなく）独自に貼り付けることができます。ただし、Disqusを使用している場合は、どの要素を使用してもかまいません。しかし、それは記事の内容に含まれるとは思いません。多分代わりに？<div><section><article><aside>

セマンティクスに関しては、厳格なルールはないことを覚えておいてください。ドキュメントが意味のある方法で構造化および概説されている限り、それが重要です。

于 2012-09-28T16:15:26.330 に答える