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!
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.
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.
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.
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.
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>
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.
You can combine <nav>
with <footer>
.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With