、、 不可省略，因缺失会导致怪异模式、结构失效、屏幕阅读器跳过内容、js 获取根节点失败、lang 属性缺位致发音错乱、viewport 失效、ssr 框架异常、seo 与可访问性受损。
不加 、、 这三个基础标签，浏览器大概率会进入怪异模式，屏幕阅读器直接跳过大部分内容——这不是兼容性问题，是结构失效。
为什么
它不只是个包裹容器，而是告诉浏览器“这是 HTML 文档”的唯一信标。省略后，IE 和旧版 Safari 会降级到 Quirks Mode；Chrome 虽能自动补全，但 document.documentElement 可能为 null，导致 JS 获取根节点失败。
-
中的lang属性是屏幕阅读器切换发音语言的依据，缺省时读音可能错乱 - 没有
，viewportmeta 标签在部分安卓 WebView 中失效 - 某些 SSR 框架（如 Next.js 13+ App Router）要求显式声明
才能注入data-attribute或服务端样式
不是所有 <meta> 都可有可无：<title></title> 缺失会导致页面在标签页显示为空白，影响用户识别；<meta charset="UTF-8"> 缺失则中文、emoji 直接变 ；而 <meta name="viewport"> 缺失会让移动端页面缩放失控。
-
<title></title>是辅助技术朗读页面的第一句话，也是 SEO 的核心字段，不可用空格或占位符代替 -
<meta name="description">不影响可访问性，但缺失会使搜索结果摘要为空，间接降低视障用户通过搜索引擎定位页面的概率 -
<link rel="canonical">在多语言/参数化 URL 场景下，防止屏幕阅读器重复加载相似内容
为什么
HTML 规范明确限定：所有可渲染内容必须位于 内。放在 里的 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img
src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a>
<p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<div> 或内联脚本，浏览器会自动移到 <code> 开头，但这个“修复”不保证顺序和语义——<nav></nav> 被塞进 后，屏幕阅读器可能把它当作无关装饰跳过。
- JS 动态插入的 DOM 若没挂载到
下（比如 appendTo(document.head)），部分 AT 无法监听其变化 - CSS 选择器如
body > header在结构错位时完全失效 - 打印样式表（
@media print）默认只作用于子树，外部元素不参与打印流程
<main></main> 和 <section></section> 的边界在哪？
<main></main> 是页面唯一主内容区，一个文档只能有一个；<section></section> 是逻辑分组，可以嵌套，但不能替代 <main></main>。混淆这两者，会导致屏幕阅读器快捷键（如 JAWS 的 Insert+B）跳过真正需要聚焦的内容。
- 如果把整个仪表盘包装成一个
<section></section>，再在里面塞多个<article></article>，AT 会认为这是“一组相关但非核心的内容”，优先级低于<main></main> -
<main></main>必须直接包含有意义的内容（如<h1></h1>、<p></p>），不能只包一个空<div> <li>服务端渲染中，<code><main></main>的起始位置决定了首屏内容加载锚点，影响 LCP（最大内容绘制）指标
最常被忽略的其实是 的 lang 属性和 的实际边界——它们不报错，但一旦缺失，可访问性测试工具（如 axe、WAVE）不会高亮警告，问题却真实存在。
