前端开发易错易忽略的 HTML 的 lang 属性
前言
本文主要记录：
前端开发中，
一个本人错了好几年，
看似无关紧要的小错误：
HTML 的 lang 属性设置。
正文
HTML 的 lang 属性
在HTML中，lang属性用于指定文档的语言。
这对于搜索引擎优化（SEO）、屏幕阅读器和其他辅助技术非常重要。
lang属性通常只设置在<html>标签上，也可以设置在特定的元素上以覆盖全局语言设置。
以下是几种常见的语言代码示例：
中文简体: zh-CN
中文繁体: zh-TW
英语: en
法语: fr
德语: de
日语: ja
如果你的页面主要是用中文简体编写的，你应该使用zh-CN；如果是英文，则使用en。
错误原因
刚开始学习 HTML 的时候，
压根就没注意到 HTML 的 lang 属性。
后面使用编辑器自动生成的HTML模板文件中，
要么也没有给 HTML 标签写 lang 属性，
要么就默认 lang="en"，
现在翻一下使用的Vue框架，
里面为数不多的HTML文件中，
lang属性也是缺失的。
后面又测试了3个浏览器，
发现这的确是一个易错易忽略的前端开发问题，
所以来记录一下。
至于怎么发现这个问题的，
还得是Deepseek，
Deepseek生成的源码中，
html标签中携带了 lang="zh-CN"，
看到的时候我还纳闷了，
平时不都是 lang="en" 吗，
好在没有偷懒，
没有因为没有bug就不去了解，
才发现问题。
测试
Microsoft Edge 浏览器
百度首页
测试结果：html 标签 lang 属性未设置。
夸克浏览器
浏览器首页
lang="en"
测试结果：html 标签 lang 属性设置错误。
谷歌浏览器
浏览器首页
lang="zh"
测试结果：html 标签 lang 属性设置正确。
通义灵码的解释
lang="zh" 属性值是正确的，但可以更加具体。
让我解释一下：
lang="zh" 是一个有效的HTML语言属性值，表示页面内容使用中文。但是，为了更精确地指定中文的变体，通常建议使用更具体的值：
lang="zh"- 通用中文lang="zh-CN"- 简体中文lang="zh-TW"- 繁体中文lang="zh-Hans"- 简体中文（使用语言标签的现代标准写法）lang="zh-Hant"- 繁体中文（使用语言标签的现代标准写法）
在大多数情况下，如果您的网站主要面向中国大陆用户，使用 lang="zh-CN" 会更加准确和专业。
深入理解HTML 的 lang 属性
HTML 的 lang 属性没有固定的默认值（其默认状态为“未知”）。这意味着：
- 全局影响：如果未在
<html>根元素上指定lang属性，整个文档的语言将被视为未知。 - 局部影响：对于单个元素（如
<p>或<span>），若未设置lang属性，则其语言由父元素继承。如果父元素也未指定，则该元素的语言同样为未知。
对网页的影响
lang 属性虽小，却对网页的用户体验和功能有重要影响：
- 搜索引擎优化（SEO）：搜索引擎依赖
lang属性识别页面语言。若未设置或设置错误，可能影响页面在搜索结果中的排名。 - 辅助技术：屏幕阅读器根据
lang属性选择正确的发音引擎。缺失或错误的lang值会导致视障用户获取信息困难。 - 浏览器功能：浏览器可能因
lang属性缺失而无法正确判断页面语言，从而影响翻译提示等功能。
最佳实践
- 明确声明语言：始终在
<html>标签上设置lang属性，例如<html lang="zh-CN">。 - 局部语言覆盖：当页面包含多语言内容时，在相应元素上设置
lang属性以覆盖全局设置，例如<p lang="en">The web is for everyone.</p>。
综上所述，因为 lang 属性的默认值为“未知”，所以强烈建议在开发网页时明确设置该属性，以提升用户体验和网页的可访问性。