css - 标记 HTML5 页脚内容的正确方法是什么？

Question

目前正在使用 HTML5 重建网站模板，并试图与语义最佳实践保持一致，对于我认为与页面无关的内容，标记因 div 而变得完全臃肿。这是我目前正在为包含各种信息面板的相当大的页面页脚 block 使用的标记:

<footer class="container">
    <div class="footer-info-panel left">
        <div class="contact-details">
            <div class="heading">Contact Us</div>
            <div class="content"></div>
        </div>
        <div class="follow-us">
            <div class="heading">Follow Us</div>
            <div class="content"></div>
        </div>
        <div class="bookmark">
            <div class="heading">Bookmark &amp; Recommend Us</div>
            <div class="content"></div>
        </div>
    </div>
    <div class="footer-info-panel right">
        <div class="payment-methods">
            <div class="heading">Payment Methods</div>
            <div class="content"></div>
        </div>
        <div class="customer-services">
            <div class="heading">Customer Services</div>
            <div class="content"></div>
        </div>
        <div class="company-info">
            <div class="heading">Company Information</div>
            <div class="content"></div>
        </div>
    </div>
</footer>

因此，在 SASS 中坚持 OOCSS 技术并使用最少的样式表嵌套，我可以简单地将全局页脚样式定义为 .footer-info-panel .heading { styles here } 等，但是我应该使用其中一种吗h1-h6 标签，似乎 div 有点矫枉过正，但我​​对 html5 规范的解释却不是这样，因为它与页面内容无关？

Answer 1

Straight from the HTML5 spec :

Some site designs have what is sometimes referred to as "fat footers" — footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer.

This fragment shows the bottom of a page on a site with a "fat footer":

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/1">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>