<nav> element at MDN Web Docs
Browser support for <nav> element
It is used in almost every project and the structure is usually very similar: the logo on the left, the links in the middle and / or the menu button on the right. We are talking about the good ol' navigation element, sometimes also called header.
There are many ways to create such an element and one way would be for example this one:
<div class="nav">
<div>
<div>Home</div>
<div>About</div>
<div>Blog</div>
</div>
</div>
This is pretty much impossible to figure out when you're using a screen reader and requires extra work to add some functionality to it, as it's just a bunch of meaningless HTML elements. You would also need a few ARIA elements to make it at least somewhat recognisable for screen readers.
Thank goodness there's the <nav> element, which will take care of some pain points mentioned before. Together with the <ol>, <li> and <a> element you'll have a rock solid navigation that's still gonna work even if all your fancy CSS and complicated JavaScript is broken:
<nav>
<ol>
<li>
<a href="/home">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/blog">Blog</a>
</li>
</ol>
</nav>
If you want to go the extra mile, you could wrap it in a <header> element to make it even more distinguishable as the... well, heading element! It's optional though and not required to improve screen reader support but adds some nice semantic meaning to your navigation component.