8

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

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
north
  • 605
  • 7
  • 22

4 Answers4

12

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.

Daniel Brockman
  • 18,826
  • 3
  • 29
  • 40
  • Thanks Daniel. In Introducing HTML5 the part of the spec you are referring to is mentioned as well. But the authors say that they think it's OK to use a nav for the links in the footer, at least in certain cases. But I could also go for just placing all of my links directly in the footer, without wrapping them in any additional elements. – north Oct 04 '11 at 12:21
4

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.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
  • And thanks to you as well, Ian. Yes, I have a nav inside the header which inlcudes links to the login page and major sections of the site. As mentioned, the lists in the footer include links to faq, howto etc. So they are not as important, at least if you know the site, but aren't secondary either. But I start thinking that just putting all of the lists inside the footer without a nav or aside around them would be OK. – north Oct 04 '11 at 12:29
  • Yes, it does sound like the `nav` in this case isn't needed (and neither is an `aside`). – Ian Devlin Oct 04 '11 at 12:35
2

The HTML5 spec actually specifically calls out the use-case of links to various site pages in the footer, as says you don’t need to use <nav> for those:

<aside> seems fine for the external links in the footer (as per http://dev.w3.org/html5/spec-author-view/the-nav-element.html#the-nav-element), although I don’t know how much meaning it really adds. I don’t think you need to take those links out of the footer.

It’s not worth over-thinking your HTML tag choices. Who’s actually going to be confused about your markup as it stands?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • Thanks for your answer, Paul. I'm not concerned about confusing anybody with my markup, I'm just trying to make an "educated decision" :) – north Oct 04 '11 at 12:13
0

If you don't need to group the links to external pages for some reason (i.e. styling), I think your approach is OK.

Simone
  • 20,302
  • 14
  • 79
  • 103
  • Hey Simone, I haven't chosen an approach yet :) So you mean just leaving them inside the footer without a wrapping element? – north Oct 04 '11 at 11:18
  • Yes, if you don't have a real reason for grouping links. OTOH I think that `
    ` or `
     – Simone Oct 04 '11 at 12:20
  • Hi Simone, would you mind adding the reasons why you think so? – SenhorLucas Jun 19 '18 at 08:48
  • Sure - I think for OP's use case there's no reason at all to add an extra DOM layer. Crawlers are probably smart enough to figure out the external links by themselves, so no need for separate semantics unless you have a good reason - e.g. styling. – Simone Jun 19 '18 at 09:32