HTML5 바닥 글 컨텐츠를 마크 업하는 올바른 방법은 무엇입니까?

Question

현재 HTML5에서 사이트 서식 파일을 다시 작성하고 의미있는 베스트 프랙티스를 유지하기 위해 div가 아닌 페이지 관련 콘텐츠로 간주되는 마크 업이 완전히 부 풀리게되었습니다. 그래서 단순히 .footer-으로 글로벌 바닥 글 스타일을 정의 할 수 있습니다 최소한의 스타일 시트를 중첩 SASS에 OOCSS 기술을 준수

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

: 저는 여기에 현재 다양한 정보 패널을 포함하는 대신 대형 페이지 바닥 글 블록 함께 일하고 있어요 마크 업입니다 info-panel .heading {styles here here} 등, h1-h6 태그 중 하나를 사용해야하는데, div 과도한 것 같지만 html5 스펙에 대한 나의 해석은 관련 페이지 컨텐츠가 아니므로 다르게 말할 것입니까?

Answer 1

제러드 (Jared)와 마찬가지로 aside 또는 section 요소를 사용할 수 있습니다.

Answer 2

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>