The <header> HTML element is used to define the introductory section of a document or a section within it, such as an article, a page, or a section of a webpage. This element typically contains navigational links, headings, logos, or other introductory content. The <header> is a semantic element that helps organize content, providing a clear structure and context for the section it introduces.
Usage and Characteristics
The <header> element can be used at the beginning of the <body> of a webpage or within other elements like <article>, <section>, <aside>, or <nav>. It is designed to contain content that is relevant to the entire document or section, such as a site-wide navigation bar or a section title. Here is an example of how the <header> tag can be used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Example</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<p>This is the main content of the webpage.</p>
</main>
</body>
</html>Valid Attributes for <header>
The <header> element does not have specific attributes beyond the global attributes, which include:
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for the element, used for CSS styling. |
| id | Defines a unique identifier for the element, useful for linking and JavaScript. |
| style | Contains inline CSS styles for the element. |
| title | Provides additional information about the element, often displayed as a tooltip. |
Benefits and Considerations
Semantic Clarity: The
<header>element provides clear semantic meaning, indicating that the enclosed content is introductory or related to the section or document as a whole.Accessibility: Using
<header>helps improve accessibility by clearly defining the start of a content section, aiding navigation for users relying on assistive technologies.Versatility: The
<header>can include a wide range of content, from simple headings to complex navigation structures, making it adaptable to different design needs.
In summary, the <header> element is a key component for structuring the introductory parts of a webpage or section, offering a place for essential navigational and introductory information. Its semantic nature enhances both the readability and accessibility of web content.