HTML <header> Tag
A Short Introduction to the HTML <header> Tag
The <header> is a structural element used in HTML5 to provide introductory information about a webpage or navigational information. It often contains items that describe the purpose of the page, such as logos, headings, menus, and/or other elements. This is different from older versions that included the <head> tag, which was invisible on the webpage and used to define and create a visually and semantically meaningful structure to the contents.
The current presentation introduces the basic functionality of the <header> tag, its structural features, and the recommended use considering modern web design.
1. What Is the <header> Tag?
The <header> defines a container for introductory content or navigational links on a webpage. It is positioned at the topmost part of a page or section to provide context or information about the content of the document or section it belongs to.
Basic Example of <header> Tag:
<html>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<p>This is the main content of the webpage.</p>
</main>
</body>
</html>
Understood Thus:
<h1>is used to describe the main heading that represents a web page and should find a place within the<header>.<nav>+<header>provides an indication of lines that provide navigation links.<header>semanticizes the contents of a document by helping the search engine/user grasp its purpose.
2. <header> Properties and Best Practices
The <header> functionality is varied in that it can possess characteristics relative to its use on the webpage. Some features and recommendations read:
Common Usage Scenarios:
Page-Level Header
Represents the main header of an entire webpage, mainly at the top of the whole web page.
<header>
<h1>My Website</h1>
<p>I'm glad to discover amazing content here.</p>
</header>
Section-Level Header
Defines the header of a specific section within a webpage.
<section>
<header>
<h2>About Us</h2>
<p>Learn more about our journey and values.</p>
</header>
<p>This is the content of the About Us section.</p>
</section>
Conclusion
The <header> tag introduces an effective way to structure introductory or navigational content on a webpage. It allows developers to create a semantic, user-friendly design while enhancing the readability and searchability of the content. Whether at the page or section level, the <header> helps provide context, making it an indispensable part of modern web design.