这篇文章距离上次修改已过109天，其中的内容可能已经有所变动。

下面的截图里有一段文字，不妨阅读一下，看看里面有什么不对劲的地方。

如果你知道（或可以根据图中的要素推断出）这段文字的成因，那么应该也能够明白，为什么笔者会认为，正确设置 HTML 里的『页面语言』属性是件很重要的事情了。

摘选自本站之前的博文

点击此处，展开目录

1. 前言

很久之前，笔者讨论过图片压缩的问题，意思是说，网页上最好不要包含太多未经压缩的图片，一方面读者可能根本不会留心上面有多高清，加了等于白加；另一方面，未经压缩的图片也会大量占用带宽和流量配额，对站长侧和读者侧都不会带来太好的体验。

今天想讨论的是关于HTML里面的页面语言属性，也就是如下部分：

<html lang="语言代码">
    <!-- 其余省略 -->
</html>

根据定义，此属性用来指示页面语言（及其变体），取值范围在BCP47中有所定义，比如说，要指定此页面为中文简体，就填入zh-Hans，要特别指定是大陆地区的简体，就填入zh-Hans-CN。部分较老的HTML页面可能还使用<meta>标签来指定页面语言，不过这不影响我们今天的分析。

就是这个简单的属性，引出了我们今天的话题：假如浏览器原地TP，会发生什么事？

2. 预期用途

人去看文本，想辨别出来是什么语言，还不算太难，比如说看到：

吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮

就知道，是中文简体；然后再看到：

How are you? Fine, and you?

就知道是英文（或至少知道，不是中文）。

但对于机器而言，想要准确判断一段纯文本的主要语言，却并不是一件太容易的事情。不是说技术上做不到，而是要么耗费一定的算力，要么牺牲了一定的准确性，或者只能给出大致范围（全是ASCII字符，说明没有CJK或其他多字节字符），很难做到十分完美。

不过幸好，HTML并非纯文本，内部含有大量元数据，比如各种属性（attribute）。因此很多情况下，解析和使用HTML文档的机器会走另一条路子，也就是尝试检查页面中是否有已经设置好的语言属性，如果有，就把这个属性的值认为是网页提供者专门设定的，于是就会认为，这就是页面所使用的主要语言。

现在来考虑这么一个问题：如果某页面声明使用的语言是en（英文），但其主要甚至全部内容却是其他语言，比如中文，可能会对读者产生什么样的影响？

3. 团团转的翻译器

你可能已经猜出来了，引言中的图片就是这么做的后果。

这个页面的源代码如下：

<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <!-- 省略无关标签 -->
    </head>
    <body>
        <p>
            一些中文文本
        </p>
    </body>
</html>

本来是很简单的页面，但因为lang属性被设置为了en-US，又因为笔者看外文网页比较多，因此Chrome默认打开了几个主要外语的自动翻译功能。最后导致的结果就是，翻译器尝试在英文模式下，把中文翻译为中文。不知道翻译模型内部发生了什么事情，总之最后的结果就是，产生了这样的狗屁不通文字，轻则影响阅读，重则可能会无意中曲解原文的意思：

在文学匮乏的读史里面一般只有几个作家会这么写....

此外，在部分情况下，如果读者中有视障人士，需要依赖屏幕朗读器的，不正确设置这个标签还可能产生这个视频所演示的后果，也就是TTS系统无法调用正确的转换模型。显然，对我们来说只是听起来很滑稽而已，但对于需要的人来说，这就是一种麻烦。

比较有趣的是，主流的搜索引擎（比如Google）似乎有不依赖这个属性的情况，比如Google声称使用link hreflang来判断多语言网站的针对不同地区的专属页面。可能是因为不太影响SEO的原因，才导致部分站长并未察觉到设置异常。

4. 情况有多普遍？

我很难说。但在笔者的RSS阅读器里，有添加了博客聚合站，在里面所列出来的个人博客网站里，大概平均每隔十几二十个，就有一个站点，没有正确设置这个属性，触发了浏览器自动翻译的。

比如昨天有更新的某个站点

考虑到很多博客站点都是使用较为国际化的开源博客程序/主题，再加上开发此类程序的英语地区开发者占比不小，可能就是这个原因，才出现没有正确设置的情况。当然，想要改过来也不是难事，检查一下博客所使用的主题，看看有没有公共引入的header文件，对应修改即可。

5. 写在最后

只是一件小事罢了，但确实可以提升部分阅读体验。

（完）

请正确设置 HTML 的『页面语言』属性