在 div 中放置部分

Question

我在两个专栏中编写指南。它遇到了将部分放在 div 中是否是一个好的做法。

<div class="col-md-6">
  <section> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </section><!-- Content 1 -->                             
  <section> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </section><!-- Content 2 -->  
</div>

提前致谢。

Answer 1

我认为更好的方法是使用 section 代替 div，然后使用 article 代替 section

<section class="col-md-6">
  <article> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </article><!-- Content 1 -->                             
  <article> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </article><!-- Content 2 -->  
</section>

Answer 2

<div> 标签是通常用于样式设置的通用标签，如您示例中的 Bootstrap。你可以做这样的事情来获得更多语义上的正确 HTML5:

<article class="col-md-6">
  <section> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </section><!-- Content 1 -->                             
  <section> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </section><!-- Content 2 -->  
</article>

或者在标记中保留 div，只需将初始代码放在 article 标记中，其中 div 将用于样式目的：

<article>
 <div class="col-md-6">
  <section> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </section><!-- Content 1 -->                             
  <section> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </section><!-- Content 2 -->  
 </div>
</article>

在 div 中放置部分

Placing sections in divs

html

twitter-bootstrap-3

semantic-markup