HTML5 <section> 的内部 <article> 和 header答案

【问题标题】：HTML5 <section>'s inside <article> and headerHTML5 <section> 的内部 <article> 和 header
【发布时间】：2012-05-10 09:24:25
【问题描述】：

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

图片 (200px) | H1+ 总结 + 更多链接 (350px) | 带有 2 个标题 H2 的附加部分 (150px)

在 CSS 中，我将 float:left - figure、.post-summary、.post-aside。

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

哪个是对的？

【问题讨论】：

标签： html structure semantics article

【解决方案1】：

取决于你想要什么..

div — 我们都知道和喜爱的“通用流容器”。它是没有额外语义的块级元素。

section — “通用文档或应用程序部分”。一节通常有一个标题（标题），也可能有一个页脚。这是一大块相关内容，如一篇长文的一个小节，页面（例如主页上的新闻部分），或 webapp 的标签式界面。

http://boblet.tumblr.com/post/130610820/html5-structure1 Link to article

我会这样使用它（你的 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>

【讨论】：

谢谢，我认为<h1> 应该是<article> 的DOM 中的第一级，才能成为本文最重要的Header
这只是一个模型。没有看到任何关于标题标签相关性的问题。
:) 公元前我想问，但忘了。对不起
在 HTML 中有一种说法是永远不应该跳过订单。

。但是在 HTML5 中，第一个 header 元素被设置为文章标题。无论标题级别如何。
在 HTML4 中我知道，但在 html5 中不知道。感谢您的帮助

【解决方案2】：

这是不对的......他们两个，答案也是......不要使用 DIV ！改为使用部分！

【讨论】：

为什么不用div？ HTML 的每个组件都是允许的。由开发人员决定，什么组件是正确使用的。您可以在不使用 list 属性的情况下创建列表 - 但如果可以的话，您应该使用该列表。 div、section 和文章也是如此。