首页 > 解决方案 > 为网页侧边栏使用 side 标签?

问题描述

假设我有一个包含以下内容的网页:新闻文章和产品页面。对于新闻类别,我想使用侧边栏布局,其中文章在左侧,侧边栏在右侧,两者都占据了主要内容的整个高度。

规范提到,aside 标签应该与周围的内容间接相关。换句话说,它应该是相关的,但不是文章内容的必要部分?好的,那么如果我使用产品页面的侧边栏并将产品过滤器添加到侧边栏怎么办?不会有直接关系吧?

为了简单起见,我几乎想要一个 div 标签,这似乎是大多数人使用的。互联网上也充斥着关于备用标签的大量不同意见,因此根据规格,应该在何时何地使用它似乎不是很清楚。

PS:屏幕阅读器、搜索引擎(或其他任何东西)是否会从使用此标签中受益?

这是我考虑过的两个选项:

<main>
    <article></article>
    <aside>
        <section>Article categories</section>
        <section>Latest articles</section>
        <section>Popular articles</section>
        <section>Related links</section>
    </aside>
</main>

or...

<main>
    <article></article>
    <div class="sidebar">
        <section>Article categories</section>
        <section>Latest articles</section>
        <section>Popular articles</section>
        <section>Related links</section>
    </div>
</main>

标签: htmlmarkupsemantic-markup

解决方案


推荐阅读