CODEWITHSUNDEEP
htmlfooternav
Steve Taylor
Steve Taylor

Reputation: 1951

HTML5 nav element inside footer

I've read in several places that there's no need to use <nav> inside <footer> when all you're linking to is copyright, terms and conditions, etc.

However, a site I'm working on has these links in the footer: News, Careers, Privacy. Obviously Privacy fits the above description for not using <nav>. But News and Careers - although they're obviously not being given as much weight as items in the main nav at the top - are significant areas of content, which aren't linked to from elsewhere. Would these justify the use of <nav>?

My guess is yes, but I'm a HTML5 newbie, so I thought I'd ask for a second opinion!

Upvotes: 26

Views: 17956

Answers (4)

jadenmcc
jadenmcc

Reputation: 1

From MDN web docs:

Usage notes: It's not necessary for all links to be contained in a <nav> element. <nav> is intended only for major block of navigation links; typically the <footer> element often has a list of links that don't need to be in a <nav> element.

If you take that at face value, although not unacceptable to do otherwise, it would seem MDN is trying to steer folks away from putting a <nav> in the <footer>.

Upvotes: 0

GG.
GG.

Reputation: 21884

Investigation

According to this French article:

<nav> :

The <nav> element is a section of navigation links. It can be used for navigation, but also for other parts of the document to list the internal navigation links.

<footer> :

The footer element represents the footer, or the conclusion of a section. It places information about the author, legal notices, or a pagination navigation (in combination with <nav>), a reminder logo, contact information, publication dates.

Conclusion

You can combine <nav> with <footer>.

Upvotes: 6

Zoltan Toth
Zoltan Toth

Reputation: 47687

As the W3C specification states

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.

Note the very last sentence - even if it's not recommended you can use the <nav> element even for the TOS, Privacy etc.

In your case, when you have other significant navigation elements(Careers, News), I think it's totally valid and semantically correct to use the <nav> element in your <footer>

Upvotes: 29

hair raisin
hair raisin

Reputation: 2628

It's all about semantics. The way I look at it is this: how can I convey as much (and as accurate) meaning as possible using just the HTML. If someone were reading just the source code of my site (using a screen reader, for instance), how would I want it to be organized? I'm certainly no expert, but it sounds to me like your scenario would be a perfectly valid use of <nav> inside <footer>

Upvotes: 1

Related Questions