对于小部件的侧边栏，哪个更具语义？答案

【问题标题】：Which is more semantic for a sidebar of widgets?对于小部件的侧边栏，哪个更具语义？
【发布时间】：2014-05-01 22:59:04
【问题描述】：

在下面的示例 html5页面结构中，关于widget的侧边栏，以下哪个更语义化（出现在侧边栏中的元素是出现在多个页面上的元素，不一定, 直接, 也不特别与本页内容有关):

<body>
    <header id="site-header">
        ...
    </header>

    <section id="page-body">
        <main>
            <header></header>
            <article></article>
            <footer></footer>
        </main>
        <aside class="sidebar" id="sidebar-a">
            <section id="search-widget">
                ...search field, etc...
            </section>
            <section id="recent-articles-widget">
                ...articles list...
            </section>
        </aside>

        <aside class="sidebar" id="sidebar-b">
            <section id="cloud-tag-widget">
                ...search field, etc...
            </section>
            <section id="recent-articles-widget">
                ...articles list...
            </section>
        </aside>
    </section>
    <footer id="site-footer"> ... </footer>
</body>

或者...

<body>
    <header id="site-header">
        ...
    </header>

    <section id="page-body">
        <main>
            <header></header>
            <article></article>
            <footer></footer>
        </main>
        <section class="sidebar" id="sidebar-a">
            <aside id="search-widget">
                ...search field, etc...
            </aside>
            <aside id="recent-articles-widget">
                ...articles list...
            </aside>
        </section>
        <section class="sidebar" id="sidebar-b">
            <aside id="cloud-tag-widget">
                ...tag list...
            </aside>
            <aside id="popular-articles-widget">
                ...articles list...
            </aside>
        </section>
    </section>
    <footer id="site-footer"> ... </footer>
</body>

AKA - 在一个部分中放置多个边栏，或者在一个边栏中包含多个部分以创建小部件的侧边栏，是否更符合语义或更合适？它们应该是 div 中的简单 div 吗？还是一个部分内的div？旁边的div？ 为什么？ 屏幕阅读器或搜索引擎哪个更容易？ 为什么？

【问题讨论】：

这个问题似乎是题外话，因为它是关于 SEO 并且太宽泛

标签： html seo semantic-markup

【解决方案1】：

aside 与它“周围的内容相关”。

目前，似乎还没有定义“周围”的确切含义。 Assuming 它（至少）是父分段内容元素的内容，那么这对您的示例意味着：

<body> <section> <aside></aside> </section> </body>
aside与section的内容相关。
<body> <aside> <section></section> </aside> </body>
aside 与 body 的内容（即整个文档）相关。

因此，在您的情况下，您可能希望将 aside 作为 body 的后代（并且没有其他分段内容元素）。

接下来要决定的是：一个aside 有几个子部分，而几个aside。我会为每个“侧边栏块”使用separate aside，除非您可以对这些块进行逻辑分组（*）。

* 即，如果可以使用一个自然标题（如果您实际使用它并不重要）对多个侧边栏块进行分组，请使用一个 aside 和 section 子作为这些。

【讨论】：

【解决方案2】：

<aside> 标签定义了除了它所在的内容之外的一些内容。

旁边的内容应该与周围的内容相关。

【讨论】：

这并不能真正回答我的问题。我知道旁边的标签是什么。以及 HTML5 规范中的 section、header、footer、nav 和所有其他标签。我要问的是：在侧边栏上下文中使用它的最合适或最有效的方式是什么？