语义化是用标签明确内容本质与关系，而非仅改名；错用会损害可访问性、seo和结构清晰度，须从编码起点严格遵循规范。

语义化不是给

换个名字，而是用标签明确回答“这是什么”和“它和别的内容是什么关系”。错用

、滥用

、把

当万能容器，反而会让结构更混乱、可访问性下降、SEO权重稀释。

main 标签只能出现一次，且不能嵌套在其他语义容器里

很多单页应用（SPA）在动态渲染时，JS 会反复插入

，或者把

包在

或

里——这直接违反 HTML 规范。浏览器和屏幕阅读器会忽略后续的

，只认第一个；嵌套则导致辅助技术跳过核心内容。

• <main></main>必须是顶层元素，不能出现在<header></header>、<footer></footer>、<nav></nav>、<section></section>或<article></article>内部
• 服务端渲染（SSR）或构建时模板中，要确保全局仅一处<main></main>，React 中避免在组件内重复声明
• 如果页面有多个“主内容区”（比如仪表盘中并列的三个数据面板），说明它们不属于同一逻辑上下文，应改用<section></section>或<article></article>，而非强行塞进一个<main></main>

section 必须自带标题，且代表可独立分发的内容单元

把

当视觉分组工具是最大误区。没有<h2></h2>–<h6></h6>的<section></section>，浏览器不认为它是有效语义区块；而把用户评论列表整个包进一个<section></section>，却每条评论本身才是独立单元，这就破坏了信息粒度。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 每个<section></section>必须包含至少一个<h2></h2>–<h6></h6>，标题文本需准确反映该区块主题
• 判断标准：这段内容脱离当前页面，能否被单独引用、RSS 订阅或搜索引擎索引？能 → 用<article></article>；相关但不独立 → 用<section></section>；纯装饰/布局 → 用<div> <li>标题层级必须连续：若父级是<code><h1></h1>，子<section></section>应以<h2></h2>起始，不能跳到<h4></h4>

nav 不等于“所有链接集合”，登录按钮、搜索框、广告链接都不该放进去

<nav></nav>的语义是“主导航”，即帮助用户在站点不同一级区域间跳转的链接集合。把它当成“链接收纳盒”，会导致屏幕阅读器播报冗余信息，也干扰 SEO 对导航权重的识别。

• 合法内容：顶部主导航菜单、侧边栏目树、底部快速入口（如“关于我们｜产品｜博客｜联系”）
• 非法内容：<input type="search">、<a href="https://www.php.cn/link/1b8e84dcae97ad25234484e38615c570">登录</a>、@#@#@#@#@#@#@#@#@#@1
• 面包屑（Breadcrumb）属于导航，但它是次级路径，建议单独用一个<nav aria-label="Breadcrumb"></nav>，避免和主导航混在同一<nav></nav>里

alt 和 label 不是“补全项”，缺了就是功能缺失

<img>没alt，在无图模式、弱网或屏幕阅读器下就彻底丢失信息；<input>没<label for="id"></label>，语音交互和点击热区都会失效——这不是体验打折，是部分用户根本无法完成表单提交。

• alt=""合法，但仅适用于纯装饰图（如背景分割线）；功能性图片必须描述目的，而非外观：“蓝色下载按钮”不如“点击下载 PDF 版用户手册”
• <label></label>必须显式关联for与id，不要依赖隐式包裹（<label><input></label>在某些框架中会被破坏）
• 自动生成的 CMS 或低代码平台常忽略这些，建议在构建流程中加入校验：例如用html-validate规则no-alt-text和label-has-for

最易被忽略的点：语义化不是写完再补的“优化项”，而是编码起点。当你伸手去敲<div class="card">之前，先问一句——它真是个卡片？还是某篇<code><article></article>？或是某个<section></section>里的摘要区块？答案决定了 DOM 骨架是否立得住。