HTML5 语义：相似文章，文章标签内

Question

当您阅读博客文章时，几乎所有博客上都有一个“侧边栏”，其中包含类似的文章、最新的 cmets 等。在我要实现的布局中，我有一个巨大的文章标题（带有照片和预告片），宽度为 100%。之后，我得到了文章正文，带有描述的侧边栏，然后，我得到了（再次 100% 宽度）作者信息和 cmets。

在这种情况下，我无法使用主文章标签中的“侧边栏”进行转义。最小的例子：

<article>

    <!-- ARTICLE HEADER -->
    <header style="width: 100vw; height: 100vh">
        <h1>title</h1>
        <p>trailer</p>
        <time>...</time>
    </header>

    <!-- ARTICLE BODY -->
    <h2>...</h2><p>...</p><ul>...</ul> x few

    <!-- SIDEBAR - PROBLEM -->
    <div id="sidebar">
        <h2>Similar articles</h2><ul>...</ul>
        <h2>Latest comments</h2><ul>...</ul>
    </div>

    <!-- ARTICLE FOOTER -->
    <footer id="author" style="width: 100vw; height: 100vh">
        <h1>Details</h1>
        <section>
            <h1>Author</h1>
            <address>...</address>
        </section>
        <section>
            <h1>Comments</h1>
            <ul>...</ul>
        </section>
    </footer>

</article>

问题在于 div#sidebar 以及它应该在什么样的元素中。

• 这当然不是文章的一部分（所以不能是div）
• 这可能不在旁边（文章内部与文章高度相关，但阅读时可以省略，并且此侧边栏是自动生成的，与文章完全无关）
• 这可能是一个部分，但当然不应该在文章标签内
• 没有机会将这个元素从文章中制作出来，并且制作的是简单的部分，因为定位（绝对或弹性）将很难管理，因为全屏页脚和页眉.

有什么帮助吗？

我有一个使用 jquery 的解决方案，我可以将元素从“流”中剪切出来，然后将其粘贴到其他地方，但也许有一个仅使用 HTML5 的语义解决方案？

Answer 1

为什么不将文章正文放在<article> 中，并将其设置为75% 的宽度，将相关链接放在<aside> 中，宽度为25%，然后将它们都浮动？ <aside> 标记用于有些相关但与内容本身分开的内容。相关链接是def。适合<aside>。

codepen

W3C information on <aside>