Question

I am finding that the more semantic I make my HTML using the new HTML 5 tags the easier it is to style and work with the document. I am new to HTML 5 and only a HTML novice but I want to make my HTML 5 as semantically correct as possible. Currently I have my HTML 5 footer divided like so.

    <footer>
        <section>
            <h2>Contact</h2>
            <ul>
                <li><a href="snip">Email</a></li>
                <li><a href="snip">Tweet</a></li>
            </ul>
        </section>
        <section>
            <h2>Explore</h2>
            <ul>
                <li><a href="snip">Stack Overflow</a></li>
                <li><a href="snip">LinkedIn</a></li>
                <li><a href="snip">Flickr</a></li>
                <li><a href="snip">Google+</a></li>
            </ul>
        </section>
        <section>
            <h2>About</h2>
            <p>
               snip
            </p>
        </section>
    </footer>

The particular tags I am querying are section and use of the h2 tag. I would think section is more semantically correct that aside or article as each section of the footer is, well, a section. The h2 is also a concern to me. I would like to use H1 as it is the first heading in the section but I am afraid the google spider will shun me and keep me from making web friends if I use h1 over h2.

Thoughts from people who have worked with semantics are very much appreciated.

Answer 1

You may want to add the address-tag around your contact information:

<footer>
    <section>
        <h1>Contact</h1>
        <address>
            <ul>
                <li><a href="snip">Email</a></li>
                <li><a href="snip">Tweet</a></li>
            </ul>
        </address>
    </section>
    <section>
        <h1>Explore</h1>
        <ul>
            <li><a href="snip">Stack Overflow</a></li>
            <li><a href="snip">LinkedIn</a></li>
            <li><a href="snip">Flickr</a></li>
            <li><a href="snip">Google+</a></li>
        </ul>
    </section>
    <section>
        <h1>About</h1>
        <p>
           snip
        </p>
    </section>
</footer>

this would be semantically correct but watch out for older browsers which are having problems with the implementation of <address>. In Firefox 3.6.12 were no block-elements allowed to be placed inside <address> like discussed here.

EDIT:
Also change the <h2> to <h1>:

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.