Question

让我们说，我总是想要在项目中使用main元素来表示不同的页面类型。其中一种页面类型只是一个产品页面，带有标题和一些部分。哪个变体在语义上是正确的：

A

<body>
    <header>
        ...
    </header>
    <main>
        <header>
            <h1>...</h1>
            <img />
        </header>
        <section>
            <h1>...</h1>
            <p>...</p>
        </section>
        <section>
            <h1>...</h1>
            <p>...</p>
        </section>
    </main>
    <footer>
        ...
    </footer>
</body>

乙

<body>
    <header>
        ...
    </header>
    <main>
        <article>
            <header>
                <h1>...</h1>
                <img />
            </header>
            <section>
                <h1>...</h1>
                <p>...</p>
            </section>
            <section>
                <h1>...</h1>
                <p>...</p>
            </section>
        </article>
    </main>
    <footer>
        ...
    </footer>
</body>

我会说A不正确。根据工作草案：

header元素表示其最近的祖先切片内容或切片根元素的介绍性内容。

main元素不是对内容进行分区，对文档大纲没有影响。

因此body > main > header中的A代表body的介绍内容，它是分区根元素。

对于那些可能会问的人，为什么在没有B的情况下不使用main。这有技术原因要么我总是使用main。还有其他页面类型，主要内容中包含多篇文章。

Answer 1

示例 A 不正确。我可以想到没有示例 A 有意义的内容。

你给出了正确的解释为什么会这样：

header属于“最近的祖先切片内容或切片根元素”。

在示例 A 中，两个header元素都属于body（=最近的切片根元素），但只有第一个header属于它，而第二个header应该属于产品。

由于main不是分段内容元素，因此您需要在此处使用一个。 article似乎是正确的选择（因为它的所有内容都是关于产品的），所以示例 B 看起来很好。

HTML5中的主要内容

1 个答案: