HTML5 <section> 在 <article> 和 <header> 中的使用

Question

我正在尝试制作语义化的HTML5代码，但不确定是否正确。视觉上，我有一篇文章/帖子分成3列： 图片（200像素）| H1+摘要+更多链接（350像素）| 附加部分，包含2个标题H2（150像素）

在CSS中，我会使用float:left - figure，.post-summary，.post-aside。

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

哪一个是正确的？

- SerNeo

Answer 1

Depends on what you want..

div — 我们都了解和热爱的“通用流容器”。它是一个块级元素，没有其他语义意义。

section — 一个“通用文档或应用程序部分”。一个 section 通常有一个标题（标题）和可能还有一个页脚。它是一段相关内容，例如长文章的子部分，页面的主要部分（例如主页上的新闻部分）或 Web 应用程序选项卡界面中的页面。

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>

- hogni89

---

谢谢，我认为<h1>应该作为<article>的DOM中的第一级，以成为文章中最重要的标题。 - SerNeo

这只是一个模拟。没有看到任何关于标题标签相关性的问题。 - hogni89

:) 因为我想问，但是忘记了。抱歉。 - SerNeo

在HTML中有一句话，那就是顺序绝不能被跳过。<h1></h1> <h2></h2> <h3></h3>。但在HTML5中，第一个标题元素被设置为文章标题，而不管标题级别如何。 - hogni89

我会使用标题标签而不是段落标签来设置关于作者的页眉部分。 - Cmorales

Answer 2

这不对...两个都不对，答案也不对...不要使用 DIV！改用 SECTION 代替！

- Matias

---

为什么不使用div？HTML中允许使用每个组件。开发人员需要确定使用哪个组件，您可以创建一个列表而不使用列表属性 - 但如果可以，请使用列表属性。这也适用于div、section和article。 - hogni89