`<header>` - page header or block header
The <header> is one of the semantic tags introduced in HTML5, used to define the header section of a document or a block. It typically contains titles, navigation, logos, or other content related to the page header. Compared to the traditional <div>, <header> more clearly expresses structural intent while improving accessibility and SEO.
Basic Usage of <header>
The <header> can appear at multiple levels: it can serve as the header for the entire page or as the header for an independent block (such as <article> or <section>). Here’s a typical example:
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<header>
<h1>Website Main Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Article Title</h2>
<p>Author: John Doe | Publish Date: 2023-10-01</p>
</header>
<p>This is the article content...</p>
</article>
</main>
</body>
</html>
Nesting and Hierarchy
The nesting rules for <header> are very flexible:
- Global Header: Placed as the first element directly under
<body>, usually containing the site identifier and main navigation. - Block Header: Nested within containers like
<article>or<section>, describing the title and metadata of that block.
<section>
<header>
<h2>User Comments</h2>
<button aria-label="Collapse comment section">▼</button>
</header>
<div class="comments">
<!-- Comment content -->
</div>
</section>
Integration with CSS
You can easily style <header> with CSS. Here’s an example of a responsive navigation bar:
<style>
header {
background: linear-gradient(135deg, #6e8efb, #a777e3);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
color: white;
margin: 0;
font-size: 1.5rem;
}
header nav ul {
display: flex;
gap: 1rem;
list-style: none;
}
@media (max-width: 600px) {
header {
flex-direction: column;
}
}
</style>
Accessibility Enhancements
By default, <header> has the ARIA semantic role="banner" (when used as a global header), which screen readers recognize as an important landmark. Further optimizations can be made:
<header aria-labelledby="site-title">
<h1 id="site-title">Company Name</h1>
<nav aria-label="Main navigation">
<!-- Navigation links -->
</nav>
</header>
Practical Use Cases
Scenario 1: E-commerce Site Header
<header>
<div class="top-bar">
<span>Welcome!</span>
<a href="#cart">Cart (3)</a>
</div>
<div class="main-header">
<img src="logo.png" alt="Brand Logo" width="120">
<search>
<input type="search" placeholder="Search products...">
<button>Search</button>
</search>
</div>
</header>
Scenario 2: Blog Post Header
<article>
<header>
<h1>Complete Guide to CSS Grid Layout</h1>
<div class="meta">
<span class="author">Author: Jane Doe</span>
<time datetime="2023-09-15">September 15, 2023</time>
<span class="tags">
<a href="/tag/css">CSS</a>,
<a href="/tag/layout">Layout</a>
</span>
</div>
<img src="cover.jpg" alt="Article cover image" class="cover">
</header>
<!-- Article content -->
</article>
Notes
- Avoid Overuse: Not all top content requires a
<header>, such as purely decorative elements. - Uniqueness: A page typically has only one global
<header>, but multiple block-level<header>elements are allowed. - Legacy Compatibility: For IE9 and below, a JavaScript shim is needed to support HTML5 tags:
<!--[if lt IE 9]>
<script>
document.createElement('header');
</script>
<![endif]-->
Collaboration with Other Tags
<header> often works with the following tags:
<nav>: For wrapping navigation menus<h1>-<h6>: Heading hierarchy<figure>: For containing logos or banner images<search>: Search box area
<header>
<figure>
<img src="logo.svg" alt="Company Logo">
<figcaption>Creative Design Studio</figcaption>
</figure>
<search role="search">
<!-- Search component -->
</search>
</header>
Dynamic Content Handling
JavaScript can dynamically modify <header> content. Here’s an example of changing styles on scroll:
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
header.style.background = window.scrollY > 50 ? 'white' : 'transparent';
});
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
下一篇：<footer>-页脚或区块尾
