Question

为什么HTML5网站会采用以下结构？我特别感兴趣的是使用外部<section>元素。

我意识到这会验证为HTML5，但我不明白为什么某个部分会包含一篇文章。我认为一个部分被认为是文章的“章节”。为什么不使用<div id="main"> ... </div>？是否有使用外部元素的语义优势（可能是SEO）？

注意：我通过删除各种容器/内部包装器DIV元素简化了源代码。

<div id="wrapper">
    <section id="main">
        <article id="home">
            <section class="block">
                <h1>Heading</h1>
                <p>Content...</p>
                <p>Content...</p>
            </section>
            <section class="block">
                <p>Content...</p>
                <p>Content...</p>
            </section>
        </article>
    </section>
</div>

我无法提供相关网站的链接，因为它包含一些观众可能会觉得冒犯的内容。

Answer 1

From the spec：

section元素表示通用文档或应用程序 section ... section元素不是通用容器元素。什么时候为了造型目的或为了方便起见，需要一个元素脚本编写时，鼓励作者使用div元素。

和

部分的例子是章节，a中的各种标签页选项卡式对话框，或论文的编号部分。一个网站的主页可以分为几个部分，用于介绍，新闻项目和联系信息。

所以在我看来，你所演示的内容并不是section元素的有效语义用法，div会更好（或者根本没有，考虑到已经有了包装器{ {1}}）。但是，两个子div元素可能更多地用作规范。

我不相信任何HTML5元素（section，article等）目前对搜索引擎优化有任何实际影响，尽管它们可能会在未来发生。我可能错了。我不是SEO专家。

Answer 2

没有看到它在行动，有点难以准确地说，但在这里：外部部分元素很可能建立网站所需的文档大纲。如果那不是理想的结果，那么我同意@james allardice，那里的div会更好（特别是因为外部没有标题）。如果这是期望的结果，那么使用外部部分在站点文档大纲中建立一个通用部分，其子元素嵌套在内部，以便它可以生成适当的文档图。然后，用户代理可以使用文档映射来生成目录，然后可以由at使用。

您可以在此处测试文档大纲：http://gsnedders.html5.org/outliner/

Answer 3

这似乎很有语义。网站的主页可以分为几个部分，用于介绍，新闻，联系信息。

目前我认为对于使用SEO的HTML5语义没有任何重量，但在未来 - 它可能是关键。

为什么在HTML5标记中使用外部`section`元素？

3 个答案: