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

Question

当您阅读博客 post 时，几乎所有博客上都会有一个 "sidebar" 包含类似文章、最新评论等。在我要实现的布局中，我'我有一篇 100% 宽度的巨大文章 header（带有照片和预告片）。在那之后，我得到了文章 body，带有描述的侧边栏，然后，我得到了（再次 100% 宽度）作者信息和评论。

在那种情况下，我无法使用主文章标签中的 "sidebar" 进行转义。最小示例：

<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）
这个是可能不是边栏（文章里面的边栏与文章高度相关，但阅读时可以省略，这个边栏是自动生成的，与文章无关全部）
这可能是一个部分，但当然不应该在文章标签内
没有机会，把这个元素从article中制作出来，make是简单的section，因为定位（absolute, or flex）会很难管理，因为全屏页脚和 header.

有什么帮助吗？

我有一个使用 jquery 的解决方案，我可以从 "flow" 中删除该元素并将其粘贴到其他地方，但也许有一个使用 [=45= 的语义解决方案] 只有？

Answer 1

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

codepen

W3C information on <aside>

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

HTML5 semantics: Similar articles, inside article tag

html

related-content

semantics