必须使用语义化标签：、、/、、等不可替代，否则损害可访问性与seo；lang属性、标题层级、结构合理性同样属强制要求。
直接说结论：不用语义化标签，等于把屏幕阅读器用户挡在门外，也等于主动放弃搜索引擎对内容结构的正向识别。这不是“加分项”，是基础合规要求。
为什么 <div> 不能代替 <code><nav></nav> 和 <main></main>
浏览器和辅助技术靠标签名推断角色：<nav></nav> 自带 role="navigation"，<main></main> 对应 role="main"；而 <div> 默认是 <code>role="generic"，读屏软件只报“分区”，不说明功能。
- 用户按 Tab 或 N（NVDA）跳导航时，
<nav></nav>可被直接定位；<div class="nav"> 需手动遍历，效率下降 70% 以上 <li> <code><main></main>是页面唯一主内容区，若用<div id="main-content">，需额外加 <code>role="main" aria-label="主内容"才等效——多写、易漏、难维护 - SEO 爬虫会优先提取
<main></main>内文本作为页面核心语义，<div> 无此权重 <h3> <code><ul></ul>包裹商品列表不是“可选”，是强制要求电商商品列表本质是“无序集合”，
<ul></ul>的 ARIA 隐式语义让读屏用户能用 1 键跳到第一个商品、2 键跳第二个，<div class="grid"> 完全无法触发这类导航。 <ul> <li>每个 <code><li>必须有唯一id（如id="product-8923"），否则键盘焦点无法锚定，也无法被外部链接直接定位 -
<li>内必须含至少一个标题级元素（<h3></h3>最常用），仅放图片+价格+按钮会导致读屏跳过关键信息 - 禁止把整个列表塞进一个
<section></section>再套<div> ——这会让辅助技术误判为“单篇长文”，丧失列表语义 <h3> <code>lang属性和<header>/<footer></footer></header>不只是“看起来规范”不是摆设：它决定屏幕阅读器用普通话还是粤语发音，影响数字、日期、标点的朗读节奏；<header></header>和<footer></footer>则分别绑定role="banner"和role="contentinfo"，是 WCAG 2.1 AA 级别的硬性要求。- 多语言站点若漏设
lang，中文混英文时读屏常把“iPhone”读成“爱佛欧恩”，造成理解障碍 -
<header></header>应包含站点标识、主导航或搜索框；若只放欢迎语或广告横幅，语义错位，反而降低可访问性 -
<footer></footer>不是“底部所有东西都往里塞”，版权信息、隐私政策、联系方式才属于contentinfo；客服电话、在线聊天入口建议用<aside></aside>或独立<section></section>
最常被忽略的一点：语义化不是“换掉几个标签就完事”。
<section></section>必须有可见标题（<h2></h2>或更高），<article></article>必须能独立分发——比如商品详情页用<article></article>合理，但首页轮播图下的“最新活动”模块用<article></article>就属于滥用。结构对了，语义才成立。 - 多语言站点若漏设
