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