HTML5语义：类似文章，内部文章标签

当你阅读博客文章时，在几乎所有的博客上，都有一个“侧边栏”，上面有类似的文章、最新的评论等。在我要实现的布局中，我有一个100%宽度的巨大文章标题（带照片和预告片）。在那之后，我有了文章的主体，以及描述的侧栏，然后，我有了（同样是100%宽度）作者信息和评论

在这种情况下，我不能用“侧边栏”从主文章标签中退出。最简单的例子：

<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>

标题
拖车

...
…..
..
x少数
类似的文章
最新评论
…
细节
作者
...
评论
…

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

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

有什么帮助吗

---

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

为什么不将文章正文放入

为什么不把文章正文放在
中，给它75%的宽度，给
中的相关链接25%的宽度，并将它们都浮动？
标记用于与内容本身有一定关联但独立的内容。相关链接是def。适合
。我正在搜索的页眉和页脚就是文章的页眉和页脚。它们必须在文章标签内，以使爬虫理解它。在您的示例中，页眉和页脚位于内部，它们被视为页面的页脚和页眉，而不是文章。不过，有关thx的信息请搁置一旁。我要试一试。请回答，并链接，确认：“除了与内容相关的内容外，还有与内容本身分离的内容”。我会接受它，并给它+1:）。非常感谢。旁白——“当在文章元素内使用时，内容应与该文章具体相关（例如，术语表）。当在文章元素外使用时，内容应与网站相关”——因此，旁白在这里是否合适并不明显……：（我认为那篇文章有点过时了，
最近的一篇文章提供了一个很好的例子，在博客的相关文章中使用它。在整个
中有页眉和页脚，你可以将键入的内容放在
标记中，而不是
标记中，然后将其向左浮动。非常感谢W3C链接。我不知道一个关于最新的变化，我希望这将是有益的其他人在未来。最好的祝愿！