header 是页眉语义容器，需用 nav 区分导航、section/figure 区分个人信息；nav 必须用于导航以保障无障碍和 seo，个人信息禁放 nav 内，推荐 figure+figcaption 表达头像与昵称。
header 标签在 HTML5 中语义化表示“页眉”区域，但**不能直接划分“顶部导航”和“个人信息”两个独立功能区**——它本身是一个容器，需配合其他语义化标签（如 nav、section 或 aside）来明确区分内容职责。
用 header 包裹整体页眉，再用 nav 和 div（或 figure + figcaption）分离功能
推荐结构：一个 header 作为博客页眉的顶层语义容器，内部用 nav 专管主导航链接，用语义清晰的元素（如 section、div 带 role="region" 或 figure）承载头像、昵称、简介等个人信息。
- 导航部分必须用 nav —— 这是 W3C 明确规定的导航语义标签，对无障碍（如屏幕阅读器）和 SEO 更友好
- 个人信息不宜硬塞进 nav，否则逻辑混乱；可用 section 并加 aria-label="作者信息" 提升可访问性
- 若含头像，figure + figcaption 是更贴切的选择（例如头像为图形，昵称为图注）
实际代码示例（简洁规范）
以下是一个符合语义、兼顾可访问性的典型写法：
<header><nav aria-label="主菜单"><ul>
<li><a href="/">首页</a></li>
<li><a href="/archive">归档</a></li>
<li><a href="/about">关于</a></li>
</ul></nav><section aria-label="博主信息"><figure>
@@##@@
<figcaption>张三｜前端笔记</figcaption></figure></section></header>
常见误区提醒
- 不要嵌套多个 header 在同一页面顶部——除非是文章内嵌的独立区块（如一篇博文内部的标题区），主页面顶部只需一个 header
- 避免用 header 替代 nav 实现导航，这会丢失导航意图，影响辅助技术识别
- 个人信息若含联系方式或社交链接，建议用 address 元素（仅限联系信息）或带 aria-label 的 ul 列表，而非裸 div
补充：响应式与样式提示
视觉上左右并排（导航左、信息右）属于 CSS 布局范畴。可用 display: flex 或 grid 控制 header 内部子元素流向，无需改变语义结构。例如：
header { display: flex; justify-content: space-between; align-items: center; }
这样既保持语义纯净，又灵活支持多端展示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
