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 として、asideまたはsection要素を使用できます。

于 2013-03-27T11:06:44.083 に答える