必须用zh-CN而非zh，因浏览器和辅助技术依赖BCP 47精确值选择发音库、断字规则与字体回退；只写zh会导致NVDA/VoiceOver无法区分简繁体，可能乱读或静音。
为什么 lang 属性不能只写 zh 而必须是 zh-CN
浏览器和辅助技术依赖 lang 值做语音合成、断字、字体回退等处理。只写 zh 会让屏幕阅读器无法确定用简体还是繁体发音库，部分 NVDA 或 VoiceOver 版本会直接跳过语言切换逻辑，导致朗读错误或静音。
企业级项目中必须使用 BCP 47 标准格式：zh-CN（简体中文）、zh-TW（繁体中文）、en-US 等。不推荐 zh-Hans 这类变体，因部分旧版 Android WebView 解析不稳定。
-
<html lang="zh-CN">是强制项，CI 构建阶段应校验 - 多语言页面需动态替换
lang值，不可仅靠 JS 修改——首次 HTML 渲染时就必须正确 - 子区域如
<section lang="en-GB">可局部覆盖，但需确保嵌套合理，避免冲突
<main> 标签只能出现一次，且不能嵌套在 <article> 或 <section> 内
W3C 明确规定：<main> 表示文档中与当前页面最相关、唯一的主要内容。重复或嵌套会破坏 ARIA 的 main role 语义，导致屏幕阅读器多次进入“主内容区”，或完全忽略它。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
- 在 Vue/React 单页应用中，每个路由组件都包裹
<main>—— 实际应只在根布局层放一个 - 把整个博客列表页的
<main>里再塞一个<article>，然后在文章详情页又套一层<main>—— 详情页才是唯一合法位置 - 用
<main>替代<section>做普通区块划分 —— 这属于语义滥用，应改用<section>或<div role="region"
<nav> 不是所有链接容器，只用于“主导航”或“重复性导航”
<nav> 的语义重点在于“导航目的性”和“可复用性”。页脚里的“隐私政策｜用户协议｜联系我们”不是 <nav>，而是普通链接组；侧边栏的“猜你喜欢｜同类文章”也不是，除非它出现在多个页面且结构一致。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
判断依据很实际：
- 是否在全站多个页面中以相同结构出现？（如顶部主导航、左侧二级菜单）
- 是否被屏幕阅读器用户高频用于快速跳转？（支持
Ctrl+Alt+1等快捷键） - 是否承载了网站核心路径入口？（首页、产品、定价、文档）
其他情况统一用 <div> + role="navigation"（需配 aria-label），或直接用 <ul> + 语义化文本。
<article> 和 <section> 的边界在哪
关键看内容是否“可独立分发、可复用、有自己生命周期”。一篇博客、一条新闻、一个用户评论，都自带标题、作者、时间、正文，能被 RSS 抓取、被搜索引擎单独索引 —— 这才配用 <article>。
<section> 更轻量，只是“主题性分组”，不要求独立性。比如“技术方案”“性能对比”“兼容性说明”这些小节，合起来才构成一篇完整文档，就该用 <section>。
- 错误：把 FAQ 列表每个问题都包一层
<article>—— 它们共属一个主题，应统一放在一个<section>里，用<details>展开 - 正确：某篇发布在 /blog/2026/08/html-semantic-rules 的文章，全文用
<article>包裹，内部再用<section>分章节 - 注意：
<article>可以嵌套 —— 比如一篇报道里引用另一篇报道，外层是主<article>，内层是引用的<article>
真正难的不是记住标签名，而是每次写 <div> 前停半秒：这个容器有没有独立语义？它的内容会不会被爬虫单独抓、被盲人单独跳、被未来 API 单独提取？没有答案，就先别删掉那个 class 名。
