我应该在< article/>的注释中附上哪个元素?
我正在开发一个实现Disqus评论的博客,并且正在努力尽可能多地使用HTML5语义标记.
I'm working on a blog that implements Disqus comments and I'm making an effort to make as much use of HTML5 semantic markups as possible.
这是一个示例<article />
(它本身在<section />
中),非常简单:
Here's an example <article />
(itself within a <section />
), fairly 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>
使用上述结构,我不确定从语义上将文章的注释整合到何处.
With the above structure, I'm unsure semantically where to integrate the article's comments.
-
<footer />
显然是不合适的( 页脚元素不是对内容进行分节;它没有引入新的节.") - Disqus使用异步JavaScript创建一个包含注释小部件的
<iframe />
,因此<p />
似乎也不适合.
- A
<footer />
is clearly not appropriate ("The footer element is not sectioning content; it doesn't introduce a new section.") - Disqus uses async JavaScript to create an
<iframe />
to contain the comment widget, so a<p />
doesn't seem appropriate, either.
我是否对语义标记问题考虑得太多了:最好只是将其粘贴到<div />
中而不用担心吗?
Am I over-thinking the semantic markup thing: is it best to just stick it into a <div />
and not worry about it?
There is an example in the HTML5 spec for a blog post with comments. Which makes sense, in my opinion.
您的示例如下:
<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
"更适合 header
.因此,您的header
可以省略,因为它仅包含标题.因此,您的示例可能如下所示:
Side note: I think your "posted-on
" would better fit into a footer
instead of a header
. So your header
could be omitted because it would only contain the heading. So your example could look like:
<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>