html - 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>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”。