Which is semantically better - <aside> or <footer> for site's 'extended footer'?

Question

Which would be semantically better markup for a site 'extended footer' <aside> or <footer>?

By 'extended footer', I'm referring to something like the extended footer on this site (containing the Contact Details and Opening Hours as opposed to the 'real' footer at the very bottom containing the copyright notice). The content of the 'extended footer' would be general, site-wide and not specifically related to the content of the pages of the site.

According to the spec quoted in HTML5Doctor:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

I would be inclined to implement something like

<footer>
    <div id="extended-footer"> <!-- Sitemap, latest posts, contact details, etc. --> </div>
    <div id="bottom-footer"> <!-- Copyright notice etc. --> </div>
</footer>

However, I note that the HTML5Doctor site itself uses something like the snipped below:

<aside id="extended-footer"> ... </aside>
<footer> <!-- similar to id-footer --> <footer>

I do note though that the HTMLDoctor 'extended footer' seems to have some connection with the actual article / content (ie via the "Related Posts" section) so probably could be implemented as a <footer> within <main>.

Answer 1

HTML5 CR defines the footer element as representing, well, a footer. It does not give a real definition beyond that, though it characterizes a footer with some examples. Between the lines, however, I think we can see two “footer” concepts intertwingled: A footer as additional information that belongs to the page content proper but set off due to its nature; and a footer as a boilerplate that appears on all or most pages of a site, possibly with some page-specific modifications.

Either way, social media buttons, for example, seem to belong to an aside element, since they are really just “tangentially related” to the content (of the site or of the page). Yet, they are typically repeated on all pages, thus logically part of a footer in the “boilerplate” sense.

The solution appears to be simple: use an aside element nested inside a footer element, e.g.

<footer>
  © 2013 ACME • <a href=map.html>Sitemap</a>
  <aside><a href="https://www.facebook.com/acme">
  <img src=fb.png alt=Facebook></a></aside>
</footer>

The choice of markup in cases like this has very little practical impact, at least for now. Browsers, search engines, and other relevant software don’t handle footer, aside, and friends in any particular way. Some day they might, and then it may be of some importance to have “tangentially related” content in aside elements and “boilerplate” content in (header and) footer elements (e.g., so that people using screen readers can easily skip the site boilerplate after hearing it once).

P.S. “Semantically better” has no well-defined meaning, i.e. it is semantically vague, if not empty. Most often in HTML contexts, “semantical” really means “structural”, i.e. as relating to the structure of a page rather than meanings of things. In practice, the question seems to be: how should we interpret the structural, sometimes rather scholastic descriptions in HTML5 drafts (and/or WHATWG HTML)?