Question

目前正在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 overkill但我对html5规范的解释会说不然，因为它不是相关的页面内容？

Answer 1

Straight from the HTML5 spec：

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

此片段显示网站上有“胖子”的页面底部   页脚“：

...
 <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>

Answer 2

作为Jared，您可以使用aside或section元素。

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

2 个答案: