HTML5 <section>的内部<article>和标头

Question

我正在尝试制作语义HTML5代码，但不确定是否正确。视觉上，我有一篇文章/帖子分为3个栏：

图像（200像素）| H1 +摘要+更多链接（350px）| 具有2个标题H2的附加部分 （150像素）

在CSS我会浮动：左 - 人物，.POST-总结，.POST休耕。

这是Ver.1：

<article>
        <figure>
        <a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
        <figcaption>Title for Case Study</figcaption>
        </figure>

        <div class="post-summary">          
            <section>
                <h1>MAIN Article Title</h1>
                <p>Lorem ipsum...</p>
                <a href="#">read more</a>
            </section>              
        </div>

        <div class="post-aside">
            <section>
                <h2>The Charges:</h2>
                <p>Lorem ipsum...</p>
            </section>

            <section>
                <h2>The Verdict:</h2>
                <p>Lorem ipsum...</p>
            </section>
        </div>
</article>

版本 2

<article>
        <figure>
        <a href="#"><img src="images/temp/entry_01.jpg" alt=""></a>
        <figcaption>Title for Case Study</figcaption>
        </figure>

        <section class="post-summary">
            <h1>MAIN Article Title</h1>
            <p>Lorem ipsum...</p>
            <a href="#">read more</a>
        </section>                          

        <section class="post-aside">
            <h2>The Charges:</h2>
            <p>Lorem ipsum text ...</p>

            <h2>The Verdict:</h2>
            <p>Lorem ipsum text...</p>
        </section>

</article>  

哪一个是对的？

Answer 1

取决于您想要的。

div-我们都知道并喜欢的“通用流程容器”。这是一个块级元素，没有其他语义。

部分-“通用文档或应用程序部分”。节通常具有标题（标题），也可能具有页脚。它是一大堆相关内容，例如长篇文章的小节，页面的主要部分（例如，首页上的新闻部分）或Webapp的选项卡式界面中的页面。

http://boblet.tumblr.com/post/130610820/html5-structure1 链接到文章

我会用这种方式（您的v2）：

<div> <!-- Main article div -->
    <article> <!-- First article -->
        <section><!-- Header, about the author... --></section> 
        <section><!-- related info .. --></section> 
        <section><!-- conclusion --></section> 
    </article>

    <article>
        <section></section>
        <section></section>
        <section></section>
    </article>
</div>