The <header> HTML element is used to define the header section of a web page or a section within a document. It typically contains introductory content, branding, navigation menus, and other elements that appear at the top of the page or section.
Here’s an example of how to use the <header> element:
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#home">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>
In this example, the <header> element contains a heading (<h1>) representing the website’s title or logo, and a navigation menu (<nav>) with a list of links (<ul> and <li>). The content within the <header> element is typically placed at the top of the document or section, serving as an introductory or navigational section.
The <header> element helps structure the content of the webpage and provides a consistent layout across multiple pages within a website. It can also include other elements such as images, social media icons, or additional information relevant to the header section.
By using semantic elements like <header>, you improve the accessibility of the webpage, as screen readers and other assistive technologies can identify and navigate the header content separately from the main content.
It’s worth noting that the <header> element does not imply any specific styling by default. You can apply CSS styles to customize its appearance, such as setting a background color, adjusting the text size or color, or positioning the content within the header section.
In summary, the <header> element is used to define the header section of a web page or a section within a document. It typically contains introductory content, branding, navigation menus, or other relevant elements. It provides a semantic way to structure and present the header content and contributes to the accessibility and overall organization of the webpage.