前端开发易错易忽略的 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语言属性值,表示页面内容使用中文。但是,为了更精确地指定中文的变体,通常建议使用更具体的值:

  1. lang="zh" - 通用中文
  2. lang="zh-CN" - 简体中文
  3. lang="zh-TW" - 繁体中文
  4. lang="zh-Hans" - 简体中文(使用语言标签的现代标准写法)
  5. 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 属性的默认值为"未知",所以强烈建议在开发网页时明确设置该属性,以提升用户体验和网页的可访问性。

相关推荐
plmm烟酒僧1 小时前
《微信小程序demo开发》第一部分-编写页面逻辑
javascript·微信小程序·小程序·html·微信开发者工具·小程序开发
摇滚侠1 小时前
html,生成一个五行五列的表格,第三列边框是红色,其余列边框是黑色
前端·html
RFCEO1 小时前
HTML元素+网页布局区块概念汇总表
前端·html·html编程基础课·html元素汇总表·html元素位置展示
_OP_CHEN2 小时前
【前端开发之CSS】(六)CSS 弹性布局(Flex)完全指南:从入门到精通,搞定所有布局需求
前端·css·html·flex布局·弹性布局·界面美化·页面开发
夏幻灵2 小时前
HTML中路径符号.和/详解
前端·html
魔都吴所谓2 小时前
【html】倒计时器实现demo
javascript·css·html
winfredzhang11 小时前
实战复盘:如何用 HTML+JS+AI 打造一款“影迹”智能影视管理系统
javascript·html·json·加载·搜索·保存·电影接口
好大哥呀19 小时前
如何使用JavaScript操作DOM节点的属性?
前端·javascript·html
松涛和鸣21 小时前
DAY65 IMX6ULL: ADC Light Sensor Detection and LCD Display Driver
服务器·arm开发·单片机·嵌入式硬件·html
木辰風1 天前
vue在IE浏览器下父页面向子页面传输对象时数据丢失
前端·javascript·html