Bootstrap和HTML5标签结构语义

Question

我正在使用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>

Answer 1

最后一个：

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

row类是表现性的。

Answer 2

使用<article>标记作为主要内容。如果两个列都包含文章内容，则可以使用<section>来分隔列。

<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>作为CSS的挂钩。

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