必须在标签上用lang属性声明主语言，配合语义标签和子元素lang标记实现精准语言识别与结构保护，否则翻译易出错、布局失效、辅助技术误读。
直接用 lang 属性 + 语义标签组合，就能让翻译工具、屏幕阅读器和浏览器准确识别语言边界与内容结构——这是自动翻译能“不翻错、不崩结构”的前提，不是可选项。
lang 属性必须写在
浏览器和翻译服务（如 translate.js）默认只读取 这个声明来判断整页主语言。如果只靠 <meta http-equiv="Content-Language" content="zh-CN"> 或响应头 Content-Language: zh-CN，多数现代翻译引擎会忽略，导致中英文混排时把英文段落当中文处理，或 RTL 布局失效。
常见错误现象：
- 页面底部语言切换按钮点了没反应——因为
translate.js初始化时没读到有效lang - 阿拉伯语段落文字从右往左排，但标题层级被误判为 LTR，
<h2></h2>被朗读成<h1></h1>
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有页面模板的
开标签必须带lang，值按 IETF BCP 47 标准写，如zh-Hans、en-US、ar-SA - 动态切换语言时，必须同步执行
document.documentElement.lang = "en-US"，不能只改 body 或某个 div 的 lang - 禁用任何“全局覆盖
lang”的 JS 插件，它会破坏子语言标记的嵌套逻辑
子语言内容必须用 lang 显式包裹，dir 不是语言替代方案
dir="rtl" 只控制文本流方向，不携带语言信息；而翻译引擎和辅助技术依赖 lang 判断拼写检查规则、断行策略、语音合成音调。单独加 dir 等于告诉浏览器“请倒着排版”，但没说“这是阿拉伯语”。
使用场景：
- 中文页面里嵌一段英文引用：
<blockquote lang="en">The quick brown fox...</blockquote> - 阿拉伯语页面中插入英文 URL：
<p lang="ar">زُرْ الموقع <bdi lang="en">example.com</bdi></p>
容易踩的坑：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用 CSS
direction: rtl替代lang+dir组合——样式层生效，但翻译服务看不到语言信号 - 把整段多语言内容塞进一个
<section></section>却不设lang，导致内部英文术语被当作中文外来词处理 - 在
<nav></nav>中混用多语言链接却不给每个<a></a>加hreflang和lang，SEO 抓取时丢失语言指向
语义标签本身不翻译，但决定翻译范围和上下文权重
<article></article>、<aside></aside>、<figcaption></figcaption> 这些标签不触发翻译，但它们定义的内容边界会影响 AI 翻译模型对“一段独立语义单元”的判断。HY-MT1.5-1.8B 等支持 HTML 标签保留的模型，正是靠这些语义块做上下文感知翻译。
为什么这样做：
-
<aside lang="ja"><p>注：これは補足説明です。</p></aside>会被识别为独立日文语境，避免被主语言（如中文）上下文污染翻译结果 <code>或<pre class="brush:php;toolbar:false;"></pre>内的代码片段默认不参与翻译，但若显式加lang="zh"，部分翻译服务（如 translate.js 的 postMessage 模块）会跳过它
性能影响：
- 过度嵌套语义标签（如
<section><article><section></section></article></section>）不会提升翻译质量，反而增加 DOM 解析开销 - 翻译服务通常只解析到
<main></main>或<article></article>级别，<div> 包裹再多也没用，除非加了 <code>lang声明式翻译属性（如
listranslate）要配合语义结构使用，不能绕过 lang 边界像
listranslate="textContent~welcome_msg"这类自定义属性，本质是给 JS 提供翻译指令锚点。但如果该元素没声明lang，或其父容器lang错误，翻译后的内容可能被错误归入主语言上下文，造成术语库匹配失败或方向错乱。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 带
listranslate的元素，必须位于有明确lang的语义容器内，例如：<article lang="en"><p listranslate="textContent~greeting">Hello</p></article> - 避免在
下直接写<p listranslate="textContent~welcome_msg" lang="en"></p>——这会造成语言声明冲突，部分翻译服务会丢弃该节点 - 如果用
translate.js，它默认依赖lang做初始语言检测，自定义属性只是补充，不是替代
最常被忽略的一点：语义标签的嵌套深度和
lang声明位置必须严格对应内容实际语言归属。一个<section lang="fr"></section>里嵌了个没lang的<aside></aside>，里面的英文引文就既不属于法语上下文，也不被识别为独立英语块——这时候翻译结果大概率是错的，而且很难 debug。 - 带
