html - 何时在网格布局中使用行或语义标签

Question

如果我有两列布局

<div class="row">
  <div class="large-8 push-4 columns">main content</div>
  <div class="large-4 pull-8 columns">side nav</div>
</div>

如果我在 main content div 中有以下内容:

介绍文字

阵亡将士纪念日是美国的联邦假日，纪念在美国武装部队服役期间阵亡的男男女女。[1]这个假期每年 5 月的最后一个星期一庆祝，[2] 以前被称为装饰日，起源于美国内战之后，以纪念在内战中阵亡的联邦和同盟军士兵。到 20 世纪，阵亡将士纪念日已经延长，以纪念所有在服兵役期间阵亡的美国人。它通常标志着暑假季节的开始，而劳动节则标志着它的结束。

假期的历史

用鲜花装饰士兵坟墓的做法是一种古老的习俗。[5] [6] 在美国内战之前和期间，士兵的坟墓在美国进行了装饰。 1906 年有人声称，1861 年 6 月 3 日在弗吉尼亚州沃伦顿装饰了第一个装饰过的内战士兵坟墓，这意味着第一个阵亡将士纪念日是在那里举行的。 [7]虽然不是为了联盟士兵，但有真实的文件表明，佐治亚州萨凡纳的妇女在 1862 年装饰了南方联盟士兵的坟墓。 [8] 1863 年，宾夕法尼亚州葛底斯堡的墓地落成典礼是在阵亡将士墓地举行的纪念仪式。宾夕法尼亚州 Boalsburg 的本地历史学家声称，1864 年 7 月 4 日，那里的女士们装饰了士兵的坟墓。 [9]因此，博尔斯堡将自己宣传为阵亡将士纪念日的发源地。

---

Introduction Text 和History of the holiday 部分应该分别在自己的行和列中，还是应该使用语义标签？请参见以下示例:

<div class="row">
  <div class="large-8 push-4 columns">    
     <div class="row">
       <div class="large-12 columns">Introduction text and next paragraph</div>
     </div>

     <div class="row">
       <div class="large-12 columns">History of the holiday and next paragraph</div>
     </div>
  </div>
</div> 

---

<div class="row">
  <div class="large-8 push-4 columns">    
     <section>
       <div>Introduction text and next paragraph</div>
     </section>

     <section>
       <div>History of the holiday and next paragraph</div>
     </section>
  </div>
</div> 

Answer 1

根据规范，在这种情况下，部分可能更具语义，因为您可能希望将每个部分列为文档大纲的一部分。但是，如果您只是为了样式而包装它们，则 div 是更好的选择。

来自 the spec :

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.