后台模块标题必须用唯一作主标题,子功能严格按–嵌套,服务端渲染确保html源码中标题为可检索纯文本,禁用js动态填充及视觉误导的标题标签。

后台管理系统中的模块标题,不是随便写个 <h2></h2> 就完事。它既要满足语义结构要求,又要支撑权限控制、导航识别和SEO可读性——尤其当系统支持多角色、多租户或导出PDF报表时,标题层级错乱会直接影响数据归因和辅助技术使用。
模块主标题必须用且仅用一个 <h1></h1>
每个后台页面(如「用户管理」「订单审核」「商品上架」)的主功能区顶部,应有唯一 <h1></h1>,内容直接反映当前模块核心职责。例如:
-
<h1>用户管理</h1>—— 不写“后台首页”或“系统面板”,避免泛化 - 禁止在侧边栏、面包屑或页眉中重复使用
<h1></h1>,那属于导航信息,不是内容主体标题 - 若页面含多个功能区块(如「用户列表 + 新建表单」),
<h1></h1>应统摄全局,子区域用<h2></h2>划分
子功能区严格按逻辑嵌套 <h2></h2>–<h4></h4>
模块内部操作流需形成可跳转、可朗读的结构链。比如「用户管理」页内:
-
<h2>用户列表</h2>→ 对应表格+筛选区 -
<h2>新增用户</h2>→ 对应表单区块 - 在「新增用户」下,
<h3>基本信息</h3>、<h3>权限配置</h3>,再往下是<h4>角色选择</h4> - 跳级(如
<h2></h2>后直接<h4></h4>)或倒置(<h3></h3>出现在<h2></h2>外)会破坏屏幕阅读器导航逻辑
动态模块标题要服务端注入,不可仅靠 JS 拼接
权限隔离或路由驱动的模块(如「{tenantName} 财务报表」「{role} 审批中心」),标题文本必须在 HTML 响应体中真实存在:
- 模板中写:
<h1>{{ tenantName }} 财务报表</h1>,而非<h1 id="module-title"></h1>+ JS 填充 - 查看网页源代码(Ctrl+U),
<h1></h1>内容应为可检索的纯文本,不含占位符或模板语法 - SSR 框架(如 Nuxt、Next)用
useHead()或generateMetadata同步更新<title></title>和<h1></h1>,保持二者语义一致
避免视觉优先导致的语义污染
不要为了样式统一而滥用标题标签:
- 卡片标题、按钮文字、Tab 标签页文字,用
<div class="card-title"> 或 <code><span></span>,不用<h3></h3> - 搜索框旁的「请输入关键词」提示,属于交互文案,不是内容层级,禁用任何
h标签 - 所有
h标签都应能被document.querySelectorAll('h1, h2, h3, h4')正确提取并生成大纲,这是自动化测试和无障碍审计的基础











