The <header> and <nav> semantic HTML5 elements focus on using <nav> for navigation and understanding their correct application with code examples.
Header tag in HTML5
The header element is used to denote the header of a section or the entire document. It contains initial content or navigational supports. A <header> element can contain various content, including a masthead, a logo, or one or more heading elements (from <h1> to <h6>). It can also include navigation elements for that section.
Keep in mind that a document can have multiple <header> elements; for example, each <article> or <section> can have its own <header>. However, a <header> element cannot be a successor of an <address> or <footer> element, and it cannot be nested within another <header> element.
Example of header tag:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<p>Your source for amazing content.</p>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>In this example, the <header> contains a main heading (<h1>), a paragraph of introductory text (<p>), and a navigation section (<nav>).