Html 对于小部件的侧边栏，哪个更具语义？_Html_Seo_Semantic Markup

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

html seo

Html 对于小部件的侧边栏，哪个更具语义？,html,seo,semantic-markup,Html,Seo,Semantic Markup,在以下示例html5页面结构中，以下哪一项对于小部件的侧栏更具语义（侧栏中出现的元素是出现在多个页面上的元素，不一定直接，也不特别与此页面内容相关）： ... …搜索字段等。。。 …文章列表。。。 …搜索字段等。。。 …文章列表。。。 ... 或者 ... …搜索字段等。。。 …文章列表。。。 …标签列表。。。 …文章列表。。。 ... AKA-在一个部分中放置多个旁白，或者在一个旁白中包含多个部分来创建一个小部件侧栏，是更具语义还是更合适？它们应该是div中的简单div吗？或分区内

在以下示例html5页面结构中，以下哪一项对于小部件的侧栏更具语义（侧栏中出现的元素是出现在多个页面上的元素，不一定直接，也不特别与此页面内容相关）：


...
…搜索字段等。。。
…文章列表。。。
…搜索字段等。。。
…文章列表。。。
...

或者


...
…搜索字段等。。。
…文章列表。。。
…标签列表。。。
…文章列表。。。
...

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

标签定义了放置在其中的内容之外的一些内容

旁白内容应与周围内容相关。

与周围内容“切向相关”

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

用于每个“边栏块”，除非您可以对这些块进行逻辑分组（*）
*也就是说，如果有一个自然标题可以用来对几个侧边栏块进行分组（不管你是否真的使用了它），那么在旁边使用一个和部分child来进行分组。这并不能真正回答我的问题。我知道旁边的标签是什么。以及HTML5规范中的部分、页眉、页脚、nav和所有其他标记。我想问的是：在侧边栏上下文中使用它的最合适或有效的方式是什么？这个问题似乎离题了，因为它是关于SEO的，而且太广泛了
<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>