0

I received designs for one project and client wants footer placed in sidebar which is main navigation. Is it correct to have structure like this? I mean from design part it looks good, but from code it looks weird.

<nav class="Navbar">
    <div class="Navbar-content">
        <!-- some stuff -->
    </div>
    <footer class="Footer">
        <!-- footers content -->
    </footer>
</nav

In w3 there is no exact rule which would forbid nesting footer in navbar. https://www.w3.org/html/wiki/Elements/footer

Also the w3 validator doesn't recognize it as any kind of error, so I guess it's okay?

unor
  • 92,415
  • 26
  • 211
  • 360
phill
  • 3
  • 4
  • you will have footer in the bottom of the page as well, o why do you need `footer` tag specifically ? – sTx Oct 03 '17 at 08:57
  • Yes, the footer will still be placed at bottom thats no probem. Why do I need footer tag? Because it's correct html5 semantic and good for SEO, if I am not mistaken EDIT: there will be only footer in sidebar – phill Oct 03 '17 at 11:06
  • Well, it's good for SEO but it's not goot for SEO to have `footer` inside `nav`, more, it's not good to have 2 footer tags(it should be only one footer for a page) – sTx Oct 03 '17 at 11:10
  • if you are doing this for style reuse just use `Footer` class and not `footer` tag for adding styles; make it: `
     – sTx Oct 03 '17 at 11:12
  • I read (here: https://www.w3schools.com/TAgs/tag_footer.asp ) that you can have several footer tags – phill Oct 03 '17 at 11:19
  • however u answred the question with saying that its not good to have footer inside nav, can you prove with some documentation please? its not that I dont trust you, I just couldnt find it and want to know more, thank you a lot – phill Oct 03 '17 at 11:20
  • I guess there is no rule to not do this but it's unnatural(from my perspective). You can always use `nav` inside `footer` because `nav` basically represent **a set of navigation links;** but as `w3schools` stress **The – sTx Oct 03 '17 at 11:30
  • Oh yeah, so basicaly your presumptions have same origin as my question, it just feels weird right? I guess I will go with it for now but would really welcome some more specified documentation – phill Oct 03 '17 at 11:52
  • More or less, if you read carefully [Definition and usage](https://www.w3schools.com/TAgs/tag_footer.asp) you will understand that there is no use for footer in a `nav` – sTx Oct 03 '17 at 11:56
  • Also from a SEO perspective, this html5 tags should help a crawler not confuse it – sTx Oct 03 '17 at 11:58

1 Answers1

0

You can have a footer element in a nav element. But it would represent the footer for that navigation, not the footer for the whole page.

For a footer that applies to the whole page, you have to place the footer element so that its nearest section parent is the body element. This means it can’t be a descendant of section/article/nav/aside nor of a sectioning root element other than body (blockquote, figure etc.). See an example.

If you want to show the navigation and the footer in a sidebar, you can use a div element for the sidebar:

<body>

  <h1>…</h1>

  <div class="sidebar">
    <nav><!-- site-wide navigation --></nav>
    <footer><!-- site-wide footer --></footer>
  </div>

</body>
unor
  • 92,415
  • 26
  • 211
  • 360