HTML5 使用 Bootstrap 的语义元素嵌套

Question

我有一个文章模板，其中我希望标题运行页面的整个宽度（12 列），然后文本本身与相邻的边栏（8 和 4）一起落在下方列）。问题是如果不将侧边栏放在文章部分，我无法将侧边栏嵌套在文章 body 旁边。

我的问题是：将侧边栏元素向上移动以使其位于文章部分内并因此很好地位于主要内容旁边但标题下方的右侧是否是一种不好的做法？

标记看起来像这样：

<article>
  <header>
  PAGE/POST TITLE
  </header>
  PAGE/POST CONTENT
  <div class="sidebar">
  SIDEBAR CONTENT
  </div>
</article>

Answer 1

article element，就像任何其他 HTML 元素一样，应该只包含符合元素定义的内容。

包含导航似乎不合适，除非它是 article 本身的导航（如内容的 table 或类似内容），在这种情况下您应该使用 nav element.

虽然有 aside element，它允许在 article 中标记单独的内容，但该内容仍然必须是

[…] tangentially related to the content around the aside element

HTML5 Semantic Elements Nesting with Boostrap