HTML5 code semantic for a footer

Question

what is the best option for the HTML code of my website's footer?

This:

  <footer class="clearfix">
    <footer class="footer-top-bar">footer top bar</footer>
    <footer class="footer-left">footer left</footer>
    <footer class="footer-middle">footer middle</footer>
    <footer class="footer-right">footer right</footer>
  </footer>

or this:

  <footer class="clearfix">
    <div class="footer-top-bar"></div>
    <div class="footer-left"></div>
    <div class="footer-middle"></div>
    <div class="footer-right"></div>
  </footer>

Thanks,

Answer 1

According to W3, the following rules are applied for the footer tag:

• The element footer must not appear as a descendant of the header element.

• The element footer must not appear as a descendant of the footer element.

• The element footer must not appear as a descendant of the address element.

So, to answer your question, option one is not valid HTML markup. Use Option 2 over Option 1.

Source: http://www.w3.org/TR/2012/WD-html-markup-20120315/footer.html