必须紧贴开头，否则浏览器用默认编码解析前置内容导致乱码；只能有一个且不可嵌套于等语义元素内；lang值须与页面实际语言严格一致，否则读屏软件切错语音引擎。
lang 值必须与页面实际语言严格一致，否则读屏软件会切错语音引擎，Google 也可能降权整页；charset 必须紧贴 开头，晚于任何其他标签（包括注释）就可能被忽略；<main></main> 在 DOM 中只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 内部——这些不是“建议”，是浏览器解析和辅助技术识别的硬性前提。
为什么 <meta charset="UTF-8"> 放错位置会导致乱码
浏览器从第一字节开始解析 HTML，<meta charset> 的作用是告诉解析器：“接下来的字节流请按 UTF-8 解码”。但它只对它之后的内容生效。如果前面有注释、<title></title> 或空格，浏览器会先用默认编码（如系统 locale 或 ISO-8859-1）解码那部分，导致标题或早期文本乱码——而你看到的源码明明是 UTF-8 编码。
常见错误场景：
-
<!-- 注释 --><meta charset="UTF-8">：注释本身不触发解码，但其后的<title></title>会被错误解码 -
<meta charset="UTF-8">写在<title></title>后面：标题已按错误编码渲染，再改 charset 也无济于事 - 用 VS Code 保存为 UTF-8-BOM 格式：BOM 字节（
\uFEFF）位于文件最前，但某些旧版 Safari 会把它当普通字符显示为方块
正确做法：把 <meta charset="UTF-8"> 放在 的第一行，前面除 外不能有任何内容（包括空行和空格）。
<main></main> 只能有一个，且不能被语义容器包裹
<main></main> 表示文档中与当前页面最相关、独一无二的主体内容。W3C 明确规定它在页面中必须唯一，且不能是 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 的子元素——否则读屏软件会把它当作嵌套上下文的一部分，而非全局主干。
典型误写及后果：
-
<article><main>...</main></article>：DOM 中<main></main>仍存在，但 NVDA 会跳过它，直接进入<article></article>的 heading -
<section><main>...</main></section>：Chrome DevTools Elements 面板里<main></main>显示为灰色斜体，说明浏览器已将其“提升”到级别，原始嵌套失效 - 多个
<main></main>：W3C Validator 报错Element main not allowed as child of element main（即使没嵌套），且 VoiceOver 只朗读第一个
修复原则：删掉所有包裹 <main></main> 的语义容器；确保全站只有一个 <main></main>；若需分区块，用 <section></section> 或 <article></article> 包在 <main></main> 内部。
不仅用于搜索引擎识别语言，还直接影响 JavaScript 运行时行为。例如：new Intl.DateTimeFormat().format() 默认使用 document.documentElement.lang 推导地区格式；CSS 的 :lang(zh) 伪类匹配也依赖它；更重要的是，lang 属性值在页面加载后无法通过 JS 动态修改生效——document.documentElement.lang = "en" 不会触发日期格式切换，只改变属性值本身。
容易踩的坑：
- 多语言站点用 JS 切换语言时，只改了
的lang，但未同步更新<meta name="hreflang">和<link rel="alternate">，导致 Google 认为 hreflang 错配 - 写成
lang="zh"而非lang="zh-CN"：iOS VoiceOver 会用简体中文语音，但部分安卓读屏软件可能 fallback 到英文发音 - 服务端渲染时硬编码
lang="en"，但用户实际访问的是中文页：页面文字是中文，lang却是en，读屏软件强行用英文朗读中文字符，结果全是乱音
验证方式：打开 DevTools Console，执行 document.documentElement.lang，确认输出与页面真实语言一致；再执行 getComputedStyle(document.body).getPropertyValue('direction')，检查是否自动设为 ltr 或 rtl。
真正卡住人的，往往不是“不知道该写什么”，而是写了之后浏览器悄悄改了结构，而你还在源码里找原因。DOM 面板里的灰色节点、document.body.innerHTML 输出和源码的差异、W3C Validator 的报错行号——这些才是结构问题的第一手证据，比任何教程都准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
