HTML5 semantic structure for a navbar [closed]

Question

How should I code my navbar, with semantics in mind?

I've been advised to nest everything in header and then nest links in nav, but I don't feel like this is the right way to do it.

<header>
<h3>Developer's Blog</h3>
    <nav>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Press</a>
    </nav>
</header>

or

<nav>
<h3>Developer's Blog</h3>
    <div>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Press</a>
    </div>
</nav>

Which one is correct?

Answer 1

The nav element is, of course, the correct choice for the navigation.

Any heading element (h1-h6) inside of it is for the navigation itself, not for the page. So something like "Navigation". But if it’s the only navigation, you’d typically don’t need a heading for it.

You might want to use a ul inside of nav, with a li for each navigation link. By using block-level elements like this, user agents without CSS support (e.g., text browsers) display one link per line; currently your links would be displayed all in the same line. And by using a list, screen reader users have more options to navigate the navigation.

If the nav should be part of your body-header can’t be answered generally. Both ways are possible; that’s one of the more subjective areas of markup choice.

So HTML5 markup for the typical/common site-wide nav would be:

<nav>
  <ul>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
    <li><a href="/press">Press</a></li>
  </ul>
</nav>