HTML模板如何使用语义标签_HTML模板标准代码编写规范
作者：袖梨
2026-06-12
语义标签使用需严格遵循规范：<header>仅表示本节头部而非页眉，<main>必须唯一且为<body>直接子元素，<section>须带标题并表逻辑区块，否则应改用<div>。
直接用 <header>、<nav>、<main>、<section>、<footer> 这五个标签，其他语义标签（如 <aside>、<article>）在多数业务模板中不强制要求，强行套用反而破坏结构清晰度。
为什么不能把 <header> 当“页面顶部样式容器”用
它只表示「本节内容的头部」，不是视觉意义上的“页眉”。常见错误是把整个顶部导航栏+Logo+搜索框全包进一个 <header>，结果导致大纲层级错乱——尤其当这个 <header> 套在 <section> 里时，屏幕阅读器会误判为该节的标题区，而非全局导航。
- 页面级
<header>应与<main>并列，且内部只放<h1>或品牌标识 + 主导航（即<nav>） - 每个
<section>可以有自己的<header>，但必须配一个<h2>或更低级标题 -
<header>里不要塞表单控件或按钮组；那些属于交互区域，应归入<form>或独立<div role="region">
<main> 必须且只能有一个，且不能嵌套在其他语义标签内
这是辅助技术定位核心内容的唯一锚点。浏览器和读屏软件靠它跳过导航/侧边栏直达正文，SEO 也依赖它识别主干内容。一旦嵌套在 <section> 或 <article> 里，就等于告诉机器：“这段内容不是页面主体”，后果是可访问性降级、搜索引擎可能忽略正文权重。
- 检查 DOM：确保
<main>是<body>的直接子元素，且未被<header>、<nav>、<footer>包裹 - 不要用 CSS 隐藏
<main>后再另起一个“伪 main”；隐藏不影响语义解析，只会让结构树断裂 - SPA 类应用中，路由切换时需动态更新
<main>内容，而非销毁重建——否则焦点管理失效
<section> 不是“视觉分组”，必须自带主题和标题
它代表文档大纲中的一个逻辑区块，浏览器会据此生成层级节点。没有 <h2>–<h6> 的 <section> 等同于无效标签，不如用 <div>。
立即学习“前端免费学习笔记（深入）”；
- 轮播图、商品列表、卡片网格这类纯视觉模块，即使有 class="section"，也不该用
<section> - “兼容性说明”“示例代码”“性能对比”三块内容若各自有
<h2>，才适合分别用<section>包裹 -
<section>内部不要再嵌套<section>表达并列项；那是<article>或多个<section>并列的场景
最容易被忽略的是 <main> 和 <section> 对 <h1> 解析的影响：<main> 自带 sectioning root，意味着其内部的 <h1> 被视为该区块最高级标题，而非整页的 <h1>；而 <section> 内的 <h1> 会被降级为 <h2> 处理。这种隐式行为不报错，但会让大纲生成器输出不可预期的结果。
