W3C 与 WHATWG
Web 标准是互联网得以正常运转的基石。HTML 作为 Web 最核心的语言，其标准由两个重要的组织共同维护：W3C（万维网联盟）和 WHATWG（Web 超文本应用技术工作组）。本节将介绍这两个组织的历史渊源、分工协作关系，以及它们如何共同推动 HTML 标准的演进。
前置知识
阅读本节前，建议先了解：响应式设计模式
基础概念
W3C（World Wide Web Consortium，万维网联盟）是由 Web 之父 Tim Berners-Lee 于 1994 年创立的国际标准化组织，负责制定 Web 技术标准。WHATWG（Web Hypertext Application Technology Working Group，Web 超文本应用技术工作组）是 2004 年由浏览器厂商组成的独立工作组，专注于维护 HTML 和 DOM 的活标准。两者共同推动了现代 Web 技术的发展。
W3C 简介
组织概况
W3C 是一个国际性的行业标准组织，致力于制定开放的 Web 标准以确保 Web 的长期增长。
text
W3C 基本信息：
全称：World Wide Web Consortium（万维网联盟）
创立：1994 年，由 Tim Berners-Lee（Web 之父）创立
总部：美国麻省理工学院（MIT）
性质：非营利性的国际标准化组织
成员：超过 400 家会员组织（包括 Google、Apple、Microsoft 等）
网站：https://www.w3.org/W3C 负责的标准
W3C 涵盖了 Web 技术的方方面面，远不止 HTML：
| 标准领域 | 具体标准 | 示例 |
|---|---|---|
| HTML | HTML5 规范（历史上） | <video>、<canvas> 等 |
| CSS | CSS 各级别规范 | CSS3、CSS Grid、Flexbox |
| 无障碍（A11y） | WAI-ARIA、WCAG | 屏幕阅读器支持 |
| 国际化（i18n） | 各种国际化规范 | 多语言处理 |
| 图形 | SVG、WebGL | 矢量图形、3D 图形 |
| 安全 | CSP、CORS、SRI | 内容安全策略 |
| 语义 Web | RDF、OWL、SPARQL | 知识图谱基础 |
| Web API | 各种接口规范 | Geolocation、Web Storage |
W3C 标准制定流程
W3C 的标准制定遵循严格的流程：
text
W3C 标准化流程（简化版）：
1. 工作草案（Working Draft, WD）
→ 早期阶段的文档，允许广泛修改
2. 候选推荐标准（Candidate Recommendation, CR）
→ 基本稳定，开始收集实现反馈
3. 提案推荐标准（Proposed Recommendation, PR）
→ 已通过广泛审查，等待正式批准
4. W3C 推荐标准（W3C Recommendation, REC）
→ 正式标准，代表 W3C 的认可
5. 已废弃/被取代
→ 旧标准被新标准替代规范状态缩写
在 MDN 等文档中，你可能看到 HTML 元素旁标注了 "REC"（推荐标准）、"CR"（候选推荐）等状态标识，这表示该特性在 W3C 流程中的标准化程度。
WHATWG 简介
组织起源
WHATWG 的诞生源于对 HTML 发展方向的不满：
text
WHATWG 的历史背景：
2004 年
→ W3C 放弃 HTML 的进一步发展，转而推进 XHTML 2.0
→ XHTML 2.0 采用 XML 语法，要求严格的标签闭合
→ 但 XHTML 2.0 与现有 HTML 不向后兼容
→ 浏览器厂商（Apple、Mozilla、Opera）对此不满
2004 年 6 月
→ Apple、Mozilla、Opera 联合成立 WHATWG
→ 开始独立维护和发展 HTML
→ 提出 Web Applications 1.0 规范草案
→ 引入了 <video>、<canvas>、<audio> 等新元素
2008 年
→ W3C 承认 WHATWG 的方向更务实
→ W3C 重新加入 HTML 开发，与 WHATWG 合作
2019 年
→ W3C 与 WHATWG 达成协议
→ HTML 标准由 WHATWG 独立维护
→ WHATWG 的 "HTML Living Standard" 成为唯一的 HTML 规范
→ W3C 不再单独发布 HTML 版本号WHATWG 的核心规范
WHATWG 目前维护的核心规范包括：
| 规范名称 | 内容 | 状态 |
|---|---|---|
| HTML | HTML 语法、元素、属性、API | 持续更新（活标准） |
| DOM | 文档对象模型 | 持续更新 |
| Fetch | 网络请求 API | 持续更新 |
| Streams | 流处理 API | 持续更新 |
| URL | URL 标准化 | 持续更新 |
| Fullscreen | 全屏 API | 持续更新 |
| Console | 控制台 API | 持续更新 |
| Encoding | 字符编码标准 | 持续更新 |
活标准（Living Standard）模式
WHATWG 采用了一种与传统标准制定不同的模式：
text
活标准（Living Standard）的特点：
传统模式（W3C 旧方式）：
HTML 4.0 → HTML 4.01 → HTML5 → HTML 5.1 → HTML 5.2 ...
每个版本是独立的快照，有明确的版本号
活标准模式（WHATWG 方式）：
HTML Living Standard
持续演进，没有版本号
浏览器持续跟进最新版本
规范文档永远反映最新状态
优势：
- 标准 can keep up with browser 的发展速度
- 避免版本号带来的碎片化
- 更灵活地响应开发者需求
劣势：
- 难以确定"某个特性在哪个版本引入"
- 规范内容可能频繁变化
- 缺乏稳定的参考基准W3C 与 WHATWG 的关系演变
关键时间线
text
W3C 与 WHATWG 的合作历程：
2004 年 WHATWG 成立，独立于 W3C
2006 年 W3C 成立 HTML Working Group，与 WHATWG 开始合作
2008 年 HTML5 草案共同发布
2012 年 W3C HTML5 成为候选推荐标准
2014 年 W3C HTML5 成为正式推荐标准（REC）
2017 年 W3C 发布 HTML 5.1 和 HTML 5.2
2019 年 W3C 与 WHATWG 签署合作协议
HTML 规范移交 WHATWG 维护
W3C 专注于 CSS、无障碍等其他标准
2023 年 合作延续，WHATWG 持续维护 HTML/DOM2019 年协议的核心内容
2019 年，W3C 和 WHATWG 签署了一份重要协议，明确了双方分工：
text
协议要点：
1. HTML 规范
→ 由 WHATWG 独立维护
→ W3C 不再发布 HTML 版本
→ WHATWG 的 HTML Living Standard 是唯一权威规范
2. W3C 的角色
→ 参与 WHATWG 的审查流程
→ 在 W3C 仓库中维护 HTML 规范的副本
→ 处理与 HTML 相关的专利政策
3. 分工
→ WHATWG 负责：HTML、DOM、Fetch、Streams 等"浏览器 API"类规范
→ W3C 负责：CSS、无障碍（WCAG/ARIA）、国际化、安全、隐私等规范
→ 两者共同审查交叉领域的规范当前分工格局
| 领域 | 负责组织 | 说明 |
|---|---|---|
| HTML | WHATWG | 唯一 HTML 规范 |
| DOM | WHATWG | 文档对象模型 |
| Fetch API | WHATWG | 网络请求标准 |
| CSS | W3C | CSS 各级别规范 |
| WCAG | W3C | Web 内容无障碍指南 |
| WAI-ARIA | W3C | 无障碍富互联网应用 |
| Web Components | 两者协作 | 涉及 HTML 和 DOM |
| SVG | W3C | 可缩放矢量图形 |
| WebRTC | W3C | 实时通信 |
| WebAssembly | W3C | WASM 标准 |
| WebGL | W3C（Khronos） | Web 图形 |
详细说明
对开发者的实际影响
HTML5 这个名称现在已经不再更新版本号。对于前端开发者而言：
text
实际影响：
1. 不再有 "HTML 5.1"、"HTML 5.2" 等版本
→ 我们现在只说 "HTML"
→ 但习惯上仍称现代 HTML 为 "HTML5"
2. 新特性持续加入
→ 如 <dialog>、<search>、<details> 等元素
→ popover API、<search> 元素等较新特性
→ 不需要等待版本发布，浏览器实现后即可使用
3. 规范查询方式变化
→ 查询 HTML 规范时，访问 WHATWG 的 Living Standard
→ 而非 W3C 的 HTML5 快照版本如何参与标准制定
text
参与方式：
1. WHATWG
→ GitHub 仓库提交 Issue
→ 参与邮件列表讨论
→ 加入工作组（需成员组织支持）
2. W3C
→ 加入 W3C 工作组
→ 参与公开的草案审查
→ 通过 W3C 会员组织（如公司、高校）参与
3. 日常贡献
→ 在 GitHub 上提交规范文档的 Bug 报告
→ 在浏览器 Bug Tracker 中报告规范实现问题
→ 参与社区讨论（如 Reddit、Discord、论坛）实战示例
示例：使用 WHATWG 规范中较新的 HTML 元素
以下示例使用了 WHATWG Living Standard 中定义的一些较新 HTML 元素：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WHATWG 新特性演示</title>
<style>
:root {
--primary: #2563eb;
--bg: #f8fafc;
--text: #1e293b;
--muted: #64748b;
--white: #ffffff;
--border: #e2e8f0;
--radius: 8px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
padding: 2rem;
}
.container {
max-width: 700px;
margin: 0 auto;
}
h1 { color: var(--primary); margin-bottom: 0.5rem; }
.subtitle { color: var(--muted); margin-bottom: 2rem; }
/* <dialog> 元素样式 */
dialog {
border: none;
border-radius: var(--radius);
padding: 2rem;
max-width: 500px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
dialog h2 {
margin-bottom: 1rem;
color: var(--primary);
}
dialog p {
margin-bottom: 1.5rem;
color: var(--muted);
}
.btn {
display: inline-block;
padding: 0.5rem 1.2rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.95rem;
transition: opacity 0.2s;
text-decoration: none;
}
.btn-primary {
background: var(--primary);
color: var(--white);
}
.btn-secondary {
background: var(--border);
color: var(--text);
}
/* <details> 元素样式 */
details {
background: var(--white);
border-radius: var(--radius);
margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
summary {
padding: 1rem 1.5rem;
cursor: pointer;
font-weight: 600;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
summary::after {
content: '+';
font-size: 1.2rem;
color: var(--primary);
transition: transform 0.2s;
}
details[open] summary::after {
content: '-';
}
details[open] summary {
border-bottom: 1px solid var(--border);
}
details .content {
padding: 1rem 1.5rem;
color: var(--muted);
}
/* <search> 元素样式 */
search {
display: block;
margin-bottom: 2rem;
}
search input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid var(--border);
border-radius: var(--radius);
font-size: 1rem;
transition: border-color 0.2s;
outline: none;
}
search input:focus {
border-color: var(--primary);
}
/* 信息卡片 */
.info-card {
background: #dbeafe;
border: 1px solid #93c5fd;
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 2rem;
}
.info-card h3 {
margin-bottom: 0.5rem;
}
.info-card p {
color: var(--muted);
font-size: 0.95rem;
}
</style>
</head>
<body>
<div class="container">
<h1>WHATWG 新特性演示</h1>
<p class="subtitle">
本页面使用了 WHATWG HTML Living Standard 中定义的较新 HTML 元素
</p>
<!-- <search> 元素（WHATWG 较新特性） -->
<search>
<input type="search" placeholder="搜索内容..." aria-label="搜索">
</search>
<!-- <dialog> 元素 -->
<div class="info-card">
<h3>1. dialog 元素</h3>
<p>原生 HTML 对话框元素，替代 alert/confirm/prompt，支持模态和非模态模式。</p>
</div>
<button class="btn btn-primary" onclick="document.getElementById('myDialog').showModal()">
打开模态对话框
</button>
<button class="btn btn-secondary" onclick="document.getElementById('myDialog').show()">
打开非模态对话框
</button>
<dialog id="myDialog">
<h2>这是 dialog 元素</h2>
<p>
dialog 元素是 WHATWG HTML 规范中定义的原生对话框元素。
它比 JavaScript 的 alert() 更加灵活，支持自定义样式、表单绑定和模态行为。
</p>
<form method="dialog">
<button class="btn btn-secondary" value="cancel">关闭</button>
<button class="btn btn-primary" value="confirm">确认</button>
</form>
</dialog>
<br><br>
<!-- <details> / <summary> 元素 -->
<div class="info-card">
<h3>2. details / summary 元素</h3>
<p>原生可折叠面板，无需 JavaScript 即可实现展开/收起功能。</p>
</div>
<details>
<summary>WHATWG 是什么？</summary>
<div class="content">
WHATWG（Web 超文本应用技术工作组）是由浏览器厂商组成的组织，
负责维护 HTML Living Standard。自 2019 年起，
WHATWG 成为 HTML 规范的唯一维护者。
</div>
</details>
<details>
<summary>W3C 还负责什么？</summary>
<div class="content">
W3C 仍负责 CSS、WCAG（无障碍）、SVG、WebRTC、WebAssembly 等
Web 技术标准的制定。W3C 和 WHATWG 在各自领域互补协作。
</div>
</details>
<details>
<summary>什么是 "Living Standard"？</summary>
<div class="content">
Living Standard（活标准）是一种持续演进的规范维护模式。
规范没有版本号，随时更新以反映最新的标准定义。
浏览器持续跟进规范的最新状态，开发者可以直接使用已实现的新特性。
</div>
</details>
<details>
<summary>HTML5 这个名称还有意义吗？</summary>
<div class="content">
"HTML5" 作为营销术语仍有广泛使用，但从标准角度，
HTML 不再有版本号。WHATWG 的规范称为 "HTML"，
但我们习惯上仍将现代 HTML 功能泛称为 HTML5。
</div>
</details>
<br>
<!-- <output> 元素 -->
<div class="info-card">
<h3>3. output 元素</h3>
<p>用于展示计算结果或操作输出的语义化元素。</p>
</div>
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<label for="a">数值 A：</label>
<input type="number" id="a" value="10"> +
<label for="b">数值 B：</label>
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>
</div>
<script>
// dialog 元素的关闭事件
var dialog = document.getElementById('myDialog');
dialog.addEventListener('close', function () {
console.log('对话框关闭，返回值:', this.returnValue);
});
// details 元素的切换事件
document.querySelectorAll('details').forEach(function (detail) {
detail.addEventListener('toggle', function () {
if (this.open) {
console.log('展开了:', this.querySelector('summary').textContent);
}
});
});
</script>
</body>
</html>注意事项
- HTML 不再有版本号：不要期待 "HTML 6"，规范将持续演进。关注具体特性的浏览器支持情况比关注版本号更有意义
- 规范不等于浏览器实现：规范中定义的特性需要浏览器实际实现才能使用。部分规范中的特性可能尚无任何浏览器实现
- W3C 和 WHATWG 不是竞争关系：它们是合作关系，各自负责不同领域的标准。W3C 专注于 CSS、无障碍等，WHATWG 专注于 HTML、DOM 等
- 标准制定需要时间：一个新特性从提案到被所有主流浏览器支持，通常需要数年时间。过早使用新特性需做好兼容性处理
最佳实践
- 关注 WHATWG Living Standard：这是 HTML 和 DOM 的唯一权威规范，定期浏览可了解最新特性
- 关注 MDN 的浏览器兼容性数据：MDN 会标注每个特性的浏览器支持情况，是开发时最实用的参考
- 渐进式使用新特性：先确认新特性的浏览器支持率，对不支持的浏览器提供降级方案
- 参与标准讨论：WHATWG 的规范维护在 GitHub 上公开进行，任何人都可以提交 Issue 参与讨论
- 不要被版本号束缚：将 HTML 视为一个持续演进的平台，按特性而非版本号来学习和使用
下一节
继续学习：HTML 规范文档