Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 nav element inside footer

Tags:

html

footer

nav

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!

like image 671
Steve Taylor Avatar asked Jul 24 '12 19:07

Steve Taylor


People also ask

Can NAV be in the footer?

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.

Should footer links be in a NAV?

It's unnecessary to use <nav> in <footer> , add the links in a <ul> and that's enough. We can use multiple <nav> elements in a page, for example: primary and secondary navigation. Add role=navigation to ensure a better support.

Should a NAV be inside a header?

Many web designers consider the navigation bar to be part of the header rather than a individual component, but that's not a requirement; in fact some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

Which HTML5 tag is used for footer?

The <footer> tag in HTML is used to define a footer of HTML document. This section contains the footer information (author information, copyright information, carriers, etc). The footer tag is used within the body tag. The <footer> tag is new in the HTML5.


3 Answers

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>

like image 166
Zoltan Toth Avatar answered Oct 11 '22 12:10

Zoltan Toth


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>.

like image 6
GG. Avatar answered Oct 11 '22 11:10

GG.


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>

like image 1
hair raisin Avatar answered Oct 11 '22 11:10

hair raisin