nav wrapped in header vs not?-CodePudding

I want to create a navbar, and want to know what would be the difference between the following lines of code...

<nav>
 <ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
 </ul>
</nav>

and...

<header>
 <nav>
  <ul>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
  </ul>
 </nav>
</header>

Would there be any benefits to wrapping my entire navbar inside of the header, or should I just leave it as it is in the first line? I'm confused about this, I see people doing it, but I don't know why. If I want to style my navbar, can't I just style the nav tag? Why does it need to wrapped inside of another block element, when nav already is doing that?

CodePudding user response：

This is related to semantic HTML and page ranking.

It would be completely fine to only use nav but using nav inside of an header is better as its compliant with semantic HTML. Semantic HTML is necessary because they help a lot in screen readers and semantic HTML also helps in boosting page rank on google.

Here is a good article to read more about this - https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/

CodePudding user response：

<header> is semantic HTML tag. Using semantic HTML tags improves accessibility of the web page, which is important for being use-friendly for screen-readers and indexing bots.

In the context of <header> tag inside <body> tag, it represents banner landmark of the web page. This is usually placed at the top of the page and in most cases you'll have logo and navigation inside.