1

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

<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 规范的解释会说否则，因为它不是相关的页面内容？

4

2 回答 2

1

直接来自 HTML5 规范：

一些网站设计有时被称为“胖页脚”——页脚包含大量材料，包括图像、其他文章的链接、用于发送反馈的页面链接、特别优惠……在某些方面，一个完整的“头版”在页脚中。

这个片段显示了一个带有“胖页脚”的网站页面的底部：

...
 <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>
于 2013-03-27T11:31:53.177 回答
0

作为 Jared，您可以使用asideorsection元素。

于 2013-03-27T11:06:44.083 回答