Question

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

<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？在一旁划分？ 为什么？的对于屏幕阅读器或搜索引擎来说哪个更容易？的 为什么？

Answer 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个孩子

Answer 2

<aside>标记定义了除放置内容之外的一些内容。

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

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

2 个答案: