Bootstrap 和 HTML5 标签结构语义答案

【问题标题】：Bootstrap and HTML5 tag structure semanticsBootstrap 和 HTML5 标签结构语义
【发布时间】：2012-11-01 15:13:07
【问题描述】：

我正在使用 bootstrap 和 html5 样板代码一起编写一个网站，并且我正在尝试以尽可能语义最有效的方式来构建它。

所以我的页面非常简单，它由一个页眉、一个包含两列的部分和一个页脚组成。

我想知道以下哪种方式是在语义上构建事物的最佳方式，例如页面的节和页脚部分。

<div class="row">
   <section>
      ....
   </section>
<div class="row">
   <footer>
     ....
   </footer>
</div>



<section>
   <div class="row">
     ...
   </div>
</section>
<footer>
   <div class="row">
     ....
   </div>
</footer>


<section class="row">
  ...
</section>
<footer class="row">
  ...
</footer>

【问题讨论】：

这真的取决于你的内容是什么。
Jules 的回答是正确的，当您谈论两列时，您不希望您的部分有两个“行”。您也需要<header></header>，您可以根据列中的内容添加<aside></aside>。

标签： html twitter-bootstrap semantic-markup

【解决方案1】：

最后一个：

<section class="row">
  ...
</section>
<footer class="row">
  ...
</footer>

row 类是展示性的。

【讨论】：

我可能还应该补充一点，Bootstrap（虽然非常出色）会迫使您编写大量的演示性 HTML/CSS——尤其是在涉及表单时。请记住，语义标记是一种理想——即努力争取的东西，而不是硬性规定。

【解决方案2】：

对主要内容使用<article> 标签。如果两列都包含文章内容，则可以使用<section>s 分隔列。

<article>
  <section id="part-1">
    <header class="section-header">...</header>
    ...
  </section>
  <section id="part-2">
    <header class="section-header">...</header>
    ...
  </section>
</article>
<footer id="main-footer">
  ...
</footer>

然后根据需要添加尽可能多的<div>s 作为 CSS 的钩子。

不要使用引用特定视觉呈现的类名，例如“行”。而是使用引用内容的类（和 ID），例如“part-1”和“main-footer”。

【讨论】：