HTML5 + Section or Div - html

Question

I have a very specific question and I hope thats okay when asking it here.
What of the following is the correct usage:
1)
<div id="more">
<div class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
</div><!-- #more END -->
2)
<section id="more">
<div class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
<div class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</div>
</section><!-- #more END -->
3)
<section id="more">
<section class="box">
<h4>Links</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
<section class="box">
<h4>Partner</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
<section class="box last">
<h4>More</h4>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 2</li>
</ul>
</section>
</section><!-- #more END -->
Note: the code snippet is placed at the bottom of the site and contains links to partner sites, links to other pages and also insite links linking to another category/page.
If you think none of the above examples is correct, could you maybe post what you think is the best solution here?
And in case 3) is best: Than i should also change h4 to h1 and put them into header ?

Answer 1

None of the above.
Section is defined: "For a section in a document. Such as chapters, headers, footers, or any other sections of the document". Many HTML5 elements, such as section, do not offer new functionality, but instead document semantics (as you have tagged:). Section and div may seem a like; section is actually a div, which in itself contains meta information.
There are 3 general rules of thumb for section:
-Don’t use it just as hook for styling or scripting; that’s a div
-Don’t use it if article, aside or nav is more appropriate
-Don’t use it unless there is naturally a heading at the start of the section
So it really depends on your document's structure. In the HTML, "more" contains a section of hyperlinks. You should pick 2) and change the section-element to nav-element.
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

Answer 2

I think that 3 is probably the best of the things versions you've listed, though you might want to give the specification a once over, and see how the described usage matches up with what you're doing. One thing I will add is that, unless it's part of a larger grouping of content, you might want to consider using an <aside> tag for wrapping the links, as it's content set aside from the rest of the page. If it's part of a sidebar or footer, however, I'd think the <section> tag would work fine.
As for the issue of <h4> vs <h1>, I'm not 100% sure, but it probably wouldn't hurt. The W3C suggests using tags hierarchically, so I'd say that, unless you've got the link section inside another section that's using an <h1>, then it should be the right thing to do.