现代 HTML 与 HTML5：文档解析、语义结构和 Web API 边界

“HTML5”仍常用来泛指现代网页能力，但 HTML 并不是按 HTML4、HTML5、HTML6 顺序冻结发布的单一版本清单。WHATWG 持续维护 HTML Living Standard；Canvas、WebSocket、地理位置、Worker、Service Worker 等能力还由各自 Web API 规范定义。遇到兼容问题应查具体元素/API 的浏览器支持，而不是只问“浏览器支不支持 HTML5”。

文档开头决定解析基础

<!doctype html> 应放在文档最前面，它的核心作用是让 HTML 文档进入 no-quirks（标准）模式，不是选择一个可下载的 HTML5 运行库。可以在 DevTools 看 document.compatMode：CSS1Compat 表示标准模式，BackCompat 表示 quirks。省略或误写 doctype 可能让旧布局规则悄悄参与计算。

字符编码应在响应头声明 UTF-8，并在文档早期用 <meta charset="utf-8"> 与之保持一致；meta 声明应位于文档前 1024 字节内。lang 标注页面主要语言，便于读屏发音、拼写工具和翻译工具判断。声明字符集不会自动修复已经按错误编码保存的源文件。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>页面标题</title>
  </head>
  <body>
    <header><a href="/">站点名称</a></header>
    <nav aria-label="主导航"><a href="/blog/">文章</a></nav>
    <main id="main"><article><h1>页面主题</h1><section><h2>正文小节</h2></section></article></main>
    <footer>版权与联系信息</footer>
  </body>
</html>

text/html 使用 HTML tokenizer/tree builder 解析，不是 XML。浏览器会按标准修复某些不完整或错误嵌套的标记；开发者工具展示的是解析后的 DOM，不一定与源文件结构相同。不要依赖错误恢复来决定页面结构；用 HTML 检查器、组件测试和浏览器 DOM 检查定位真实问题。若服务器发送 application/xhtml+xml，则进入 XML 解析规则，错误处理和 HTML 不同。

语义结构与标题层级

header、nav、main、article、section、aside 和 footer 为内容分区提供语义。main 代表页面主要内容；article 可独立分发；section 是有主题的普通分区，通常应有标题；aside 是与周边内容相关但可分开的内容。一个页面可以有站点 header/footer，也可以在 article 里有自己的 header/footer。语义元素不是 CSS 布局快捷键，样式仍用 CSS。

标题 h1–h6 表达实际内容层级，不因嵌套在 section 或 article 自动降级。历史上流传的“HTML5 自动大纲算法会帮每个 section 重新计算 h1 级别”从未成为读屏等辅助技术可靠采用的标题层级机制；相关特殊默认字号规则也已在 2025 年从标准中移除。新页面通常为主内容保留一个清晰的 h1，后续按结构使用 h2、h3，不跳级来伪造字号；用 CSS 调字号。

特性不是浏览器版本标签

表单控件、音视频、Canvas 等是 HTML 元素能力；Geolocation、WebSocket、Service Worker、IndexedDB、Web Workers 则是不同 API。它们的兼容性、权限、生命周期和安全要求各不相同。地理位置等敏感能力通常要求安全上下文和用户许可；Service Worker 注册也有安全上下文约束。不能把拥有 <!doctype html> 当作这些 API 全部可用的保证。

按能力检测并提供降级，而非只按 User-Agent 猜浏览器版本。对表单类型先保留可编辑的文本输入与服务端校验；对媒体准备替代源/文字稿；对离线功能准备网络失败和旧缓存恢复路径。浏览器支持表也只说明 API 是否存在，不代表相同的性能、视觉或权限体验。

1. 查看响应 Content-Type、charset、document.doctype、document.compatMode 与 document.documentElement.lang。
2. 检查 header/nav/main/footer 和标题是否反映内容，而不是只检查 class 名。
3. 用无障碍树或读屏核对 landmark、heading 顺序及表单名称；不要依赖未实现的大纲算法。
4. 对每个 Web API 单独查规范、兼容矩阵、安全上下文、权限和失败回退。
5. 在目标浏览器和真实手机上检查解析结果、焦点、缩放和响应式布局。

参考：WHATWG HTML Living Standard、MDN 标准模式与 quirks、MDN 标题元素、MDN main、MDN section、MDN lang、MDN Geolocation API、MDN Secure Contexts。