嵌套<article> s?</article>在语义上是否正确

时间:2013-02-02 04:05:01

标签: html html5 semantics article

我一直在阅读新的HTML5元素及其适当的用法,目前有一些这样的标记:

    <article>
        <h1>Crazy Awesome Programming Projects</h1>
        <article>
            <h2>Mathematics</h2>

            <section>
                <h3>Binary to Decimal converter</h3>
                <p> info here </p>
            </section>

            <section>
                <h3>Scientific Calculator</h3>
                <p> info here </p>
            </section>

        </article>

        <article>
            <h2>String Manipulation</h2>

            <section>
                <h3>RSS Feed Generator</h3>
                <p> info here </p>
            </section>

            <section>
                <h3>Palindrome Detector</h3>
                <p> info here </p>
            </section>
        </article>
    </article>

以这种方式嵌套<article>标签在语义上是否正确? 提前致谢

2 个答案:

答案 0 :(得分:8)

是的,根据HTML5 spec。这是关于嵌套article元素的说法:

  

当嵌套文章元素时,内部文章元素表示原则上与外部文章的内容相关的文章。例如,网站上接受用户提交的评论的博客条目可以将评论表示为嵌套在博客条目的文章元素中的文章元素。

答案 1 :(得分:7)

有些情况下嵌套article元素是正确的;最突出的案例是对博客文章的评论。

但我不认为你的例子就是这种情况(虽然没有看到完整内容但很难做出决定。)

我完全相反:

<section> <!-- probably not article -->
    <h1>Crazy Awesome Programming Projects</h1>

    <section> <!-- not article -->
        <h2>Mathematics</h2>

        <article> <!-- not section -->
            <h3>Binary to Decimal converter</h3>
            <p> info here </p>
        </article>

        <article> <!-- not section -->
            <h3>Scientific Calculator</h3>
            <p> info here </p>
        </article>

    </section>

    <section> <!-- not article -->
        <h2>String Manipulation</h2>

        <article> <!-- not section -->
            <h3>RSS Feed Generator</h3>
            <p> info here </p>
        </article>

        <article> <!-- not section -->
            <h3>Palindrome Detector</h3>
            <p> info here </p>
        </article>
    </section>
</section>

“二进制到十进制转换器”,“科学计算器”,“RSS源生成器”和“回文检测器”是这里的文章。它们是“独立的组合物”和“原则上,可独立分发或可重复使用,例如在联合中”。

“数学”和“字符串操作”是类别。

在结构上,它类似于网上商店。 “Palindrome Detector”将是可购买的产品,而“String Manipulation”将是产品类别。我想你不会认为产品类别是“独立的”。

对于容器(“Crazy Awesome Programming Projects”),我只会在有更多内容给出上下文的情况下使用article。否则它只是一个顶级类别,包含子类别,其中包含“真实”内容。

要问article是否合适的好问题:

  • 可以内容有自己的发布日期吗?
  • 可以内容的作者与页面不同吗?
  • 可以将内容作为Feed中的单独条目吗?
  • 如果内容在没有任何其他内容/背景的情况下打印出来仍然有意义吗?

如果(某些)这些问题的回答为“是”,article可能是正确的。