Links inside HTML5 footer element (nav and aside?)

Question

I'm currently moving a page from HTML4 to HTML5, and I have kind of an issue. There's a bunch of lists with links inside the footer. Most of them link to information (faq etc.) about the site itself. So I think it's OK to put those inside a nav element (see "Introducing HTML5" and the HTHML5 Doctor). But two lists contain links to external pages like Facebook. Now I could wrap those inside an aside, but this is a bit of an edge case:

"It is legitimate to wrap the links to other pages on the site with an aside inside the footer — but ask yourself whether the aside to instead be a sibling of the footer [...] After all, the links to other pages are presumably tangentially related to the whole page rather than just the content of the footer." (Introducing HTML5)

I could also just leave them inside the footer without wrapping them. Since all the lists of links in the footer are a "visual unit", I wouldn't wanna take the external links out of the footer altogether at the moment, even though that might be better in regards to semantics.

I was searching for HTML5 sites with a similar footer but couldn't find any.

What do you guys think is the best approach?

Thanks

Answer 1

I would suggest simply using a <footer> with links in it.

If you want to wrap the links in a <nav>, that’s acceptable, but I would advise against it. The <nav> element is intended to mark up “major” navigation blocks, and the fact that you’re putting the links in a footer suggests that they are not a major navigation block. (In a sense, <footer> and <nav> are almost contradictory.) The spec even talks specifically about this scenario:

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

As for <aside>, I would say it’s overkill if you’re only going to put a few links in it, especially since it sounds like, though external, they belong together with the other links. If it helps with styling, and the external links feel like kind of a self-contained unit, then sure—otherwise, don’t bother. I would say the <footer> element itself already carries enough aside-ish semantics.

Answer 2

Do you already have the links within the footer that you intend to wrap in a nav, already in a nav, for example in the header? (as sites often duplicate the header links in the footer).

If so, then I'd suggest not wrapping the links in the footer within a nav at all, as they're for main navigation only, and if you're duplicating the links, then only one set (e.g. the ones in the header) should be in a nav.

If this isn't the case, and none of the footer links are duplicates and are important, then it's fine to wrap some in a nav and others not, but retaining them in the footer.

I wrote an article a while back, HTML5 - To nav or not to nav, a while back which might help.