Problem Statement
What is the <header> element used for?
Explanation
The header element represents introductory content or navigational links. It typically contains headings, logos, navigation menus, search forms, or author information. A header can be used multiple times on a page. You can have a main page header at the top, and also headers within article or section elements. The header is not limited to the top of the page. It groups introductory content for its parent element. Headers should not be placed inside footer, address, or another header element. Using the header tag improves document structure and helps screen readers identify introductory sections. It is semantically more meaningful than using div class equals header.
Code Solution
SolutionRead Only
<!-- Page header -->
<header>
<img src="logo.png" alt="Company Logo">
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<!-- Article header -->
<article>
<header>
<h2>Article Title</h2>
<p>By John Doe | Published: Jan 15, 2024</p>
</header>
<p>Article content...</p>
</article>
<!-- Section header -->
<section>
<header>
<h2>Section Title</h2>
<p>Introduction to this section</p>
</header>
<p>Section content...</p>
</section>