header tag and nav tag

 SEMANTIC HTML

Header and Nav

Let’s take a look at some semantic elements that assist in the structure of a web page. A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.

The example below shows <header> in action:

<header>
  <h1>
     Everything you need to know about pizza!
  </h1>
</header>

This can be compared to the code below which uses a <div> tag instead of a <header> tag:

<div id="header">
  <h1>
    Everything you need to know about pizza!
  </h1>
</div>

By using a <header> tag, our code becomes easier to read. It is much easier to identify what is inside of the <h1>‘s parent tags, as opposed to a <div> tag which would provide no details as to what was inside of the tag.

A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.

Let’s take a look at the example below:

<header> 
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>      
    </ul>
  </nav>
</header>

By using <nav> as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code.

Now that we’ve learned about the <header> and <nav> elements let’s add them into our code!

Q)1.Should non-semantic elements be replaced by non-semantic elements whenever it is possible?

In other words, should non-semantic elements be avoided when there are semantic elements that can be used instead, or does it depends on the case, on the web developer preferences or on anything else?

Yes, that’s correct. Non-semantic HTML elements should be used when there are no semantic elements that can do the job.
Convention specifies it’s preferable to use semantic HTML elements within your code to improve readability, accessibility and SEO.