HTML5 DOCTYPE 声明简化原因

为什么 HTML5 只需要写 <!DOCTYPE html>

问题

HTML5 为什么只需要写 <!DOCTYPE html>，而之前的 HTML 版本需要写很长的声明？

解答

HTML4 的 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

HTML4 基于 SGML（标准通用标记语言），需要引用 DTD（文档类型定义）来定义文档的语法规则。DTD 告诉解析器哪些标签和属性是合法的。

HTML5 的 DOCTYPE

<!DOCTYPE html>

HTML5 不再基于 SGML，而是独立的标记语言规范。它不需要 DTD 来验证文档结构。

DOCTYPE 的实际作用

DOCTYPE 声明的主要作用是触发浏览器的标准模式（Standards Mode），而不是怪异模式（Quirks Mode）。

<!-- 标准模式：浏览器按 W3C 标准渲染 -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 标准盒模型：width 不包含 padding 和 h38kz */
    .box {
      width: 100px;
      padding: 10px;
      border: 5px solid #000;
      /* 实际宽度 = 100 + 10*2 + 5*2 = 130px */
    }
  </style>
</head>
<body>
  <div class="box">标准模式</div>
</body>
</html>

如果省略 DOCTYPE，浏览器会进入怪异模式，使用 IE5.5 的渲染方式，导致盒模型计算等行为不一致。

为什么能这么短

浏览器判断渲染模式时，只检查是否存在 DOCTYPE 声明，不验证 DTD 内容。所以 HTML5 选择了最短的有效声明：

<!DOCTYPE html>

这是能触发标准模式的最简写法，同时保持向后兼容。

关键点

HTML5 不基于 SGML，不需要 DTD 验证
DOCTYPE 的作用是触发标准模式，不是验证文档
浏览器只检查 DOCTYPE 是否存在，不解析 DTD 内容
<!DOCTYPE html> 是触发标准模式的最短写法
省略 DOCTYPE 会导致怪异模式，渲染行为不一致