语义化表示页面页眉区域，应包裹顶部公告栏和用户快捷菜单两个同级区块，用和分别标记，避免仅为样式滥用或无意义嵌套。
<header></header> 标签在 HTML5 中语义化表示页面或区块的**页眉区域**，适合包裹电商网站顶部的全局性内容，比如顶部公告栏和用户快捷菜单。关键在于：它不是“只能放 logo”，而是承载整个页面最上方的导航与信息入口。
结构上用 header 包裹两个逻辑区块
顶部公告（如促销倒计时、系统通知）和快捷菜单（如登录/注册、我的订单、客服、收藏）属于同一层级的全局服务入口，语义上同属“页面头部导引区”，应统一放在一个 <header></header> 内，再用更具体的语义标签区分：
- 用
<div class="announcement"> 或 <code><section aria-label="网站公告"></section>包裹公告内容 - 用
<nav aria-label="用户快捷导航"></nav>包裹快捷菜单（因含多个跳转链接，符合<nav></nav>的语义） - ❌ 不要只为“加个背景色”就套一层
<header></header>—— 它必须承载实际的页眉功能 - ❌ 不要在同一个页面中无意义地嵌套多个
<header></header>（如每个商品卡片里都放一个），主页面通常只需一个顶层<header></header> - ✅ 若页面有独立文章区块（如帮助中心文章页），其内部可另设
<header></header>，但那是文章级页眉，与站点顶部的<header></header>并存是合理的 - 对
.announcement设置浅色背景 + 小号字体 + 水平居中，高度固定（如 32px） - 对
nav设置 flex 布局，右对齐用户菜单，与公告形成视觉节奏 - 确保焦点键盘导航顺序自然：从左到右、从上到下，与 DOM 顺序一致
避免常见语义错误
不要把 <header></header> 当成纯样式容器滥用：
一个简洁实用的 HTML 示例
以下代码兼顾语义、可访问性和基础结构清晰度：
? 双11预售开启！全场满299减50，仅限48小时
配合 CSS 实现视觉分层（简要提示）
HTML 语义到位后，CSS 可轻松实现“公告条+菜单栏”的上下或左右布局：
