绝大多数日文页面应使用 lang="ja"，仅当需明确区分日本本土规范（如政府公文、JIS术语）时才用 ja-JP；lang 必须设在 <html> 根标签内，与 <meta charset="UTF-8"> 无关，且不可写为非法标签如 "jp" 或 "jpn"。
lang 属性该用 ja 还是 ja-JP
日文页面必须设 lang，但多数场景直接用 ja 就够了。ja-JP 是带地区子标签的写法，只在需要明确区分日本本土日语（如假名用法、汉字简写、日期格式）与其他日语变体（如巴西日语社区）时才必要。浏览器、屏幕阅读器和搜索引擎对 ja 的支持更稳定，ja-JP 反而可能在某些旧辅助技术中被忽略或误解析。
常见错误是看到「日本」就下意识写 ja-JP，结果发现 VoiceOver 朗读语调没变化，或者 Google 搜索结果页没正确识别语言区域——其实根本不需要。
-
lang="ja"：适用于绝大多数网站，包括面向日本用户的企业站、博客、电商页 -
lang="ja-JP"：仅当页面内容强依赖日本本地规范（比如政府公文、JIS 标准术语、含平成/令和年号的正式文书）才考虑 - 避免写
lang="jp"或lang="jpn"：这不是合法 BCP 47 语言标签，会被解析为无效值
HTML 根元素上设置 lang 的正确位置
必须写在 <html> 开始标签里，不能只加在 <body> 或某个 <div> 上。否则屏幕阅读器启动时无法第一时间获取页面主语言，可能导致初始朗读使用错误语音引擎（比如用中文引擎读日文假名）。
示例：
立即学习“前端免费学习笔记（深入）”；
<html lang="ja"> <head>…</head> <body>…</body> </html>
- 如果页面混有少量中文段落，可用
<section lang="zh-CN">局部覆盖，但根lang仍应保持ja - 不要写成
<html lang="ja " >（末尾空格）：部分解析器会截断为空字符串 - 服务端渲染时注意模板变量是否意外插入了空格或换行，导致
lang值被破坏
meta charset 和 lang 的关系要不要同步改
<meta charset="UTF-8"> 和 lang 没有绑定关系。UTF-8 是字符编码，lang 是语言标识，两者独立生效。日文页面必须用 UTF-8（否则会出现「」），但 lang 即使不设也不会影响文字显示——只会影响语义、可访问性和 SEO。
- 缺
lang不报错，但 WCAG 2.1 要求必须提供（准则 3.1.1） - Chrome 浏览器在翻译弹层里识别日文，主要靠
lang属性，而非字节特征；没设的话可能不触发翻译按钮 - 别为了“匹配”而把
charset改成 Shift_JIS：现代浏览器已基本放弃支持，且会导致 emoji、外来语片假名（如「Wi-Fi」）乱码
Vue/React 等框架中动态设置 lang 的坑
框架组件化后，容易误以为在某个子组件里设 lang 就能生效。实际上，只有挂载到 <html> 根节点上的属性才起作用。在 React 中用 document.documentElement.lang = "ja" 是安全的；Vue 项目若用 SSR，需确保服务端首次渲染时 <html lang="ja"> 已存在，而不是等客户端 JS 执行后再 patch。
- Next.js 页面中，不要只在
getStaticProps里改lang：必须通过Document组件或next/head配合dangerouslySetInnerHTML注入根标签 - Vue 3 的
createApp启动后调用document.documentElement.lang = "ja"是可行的，但首屏 HTML 源码里仍要预留lang="ja"，否则爬虫和 Lighthouse 会警告 - 避免在
useEffect/onMounted里重复设置：可能触发两次，尤其在热更新或调试时
document.documentElement.lang。用户切到日文页，源码里还是 lang="en"，这时候所有依赖语言的逻辑（语音朗读、自动翻译、拼写检查）都会失效——而且很难一眼看出来。 
