HTML5和HTML4有什么区别_主要差异对比说明说明

作者：袖梨 2026-06-28

HTML5是重写规范的全新起点，非HTML4补丁：DOCTYPE统一为<!DOCTYPE html>，字符编码用<meta charset="UTF-8">；语义标签（如<article><nav>）影响DOM与可访问性；原生表单校验、<video>/<audio>替代Flash；localStorage/sessionStorage取代Cookie；部分结束标签可省略但需保证嵌套正确。

HTML5 不是 HTML4 的“升级补丁”，而是重写规范后的全新起点——它不兼容 HTML4 的部分解析逻辑，浏览器对两者的处理方式有本质差异。直接混用旧写法可能触发怪异模式（quirks mode），导致布局错乱或 API 不可用。

DOCTYPE 和字符编码声明怎么写才不掉坑

HTML4 的 <!DOCTYPE> 有三种变体（Strict/Transitional/Frameset），必须带完整 URL，漏掉或写错会强制浏览器降级到怪异模式；HTML5 统一为 <!DOCTYPE html>，大小写不敏感，但不能加任何其他内容（比如注释或空格）。
字符编码方面，HTML4 依赖 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，而 HTML5 支持更简洁的 <meta charset="UTF-8">。两者不能共存，否则部分老浏览器可能忽略后者。

语义化标签不是“换汤不换药”，而是影响 DOM 结构和可访问性

HTML4 几乎全靠 <div> 堆结构，屏幕阅读器、搜索引擎无法识别内容意图；HTML5 的 <article>、<nav>、<aside>、<footer> 等标签自带隐含 ARIA role，会直接影响 DOM 树层级和辅助技术行为。
注意：<section> 必须有标题（<h1>–<h6>），否则语义失效；<article> 可嵌套，但 <main> 全局只能出现一次。

表单和多媒体标签不用再拼插件或 hack

HTML4 中实现邮箱校验要靠 JavaScript 正则 + 提示文案，HTML5 直接支持 type="email"、type="date"、type="number"，原生触发输入约束和移动端软键盘适配。
音视频不再需要 Flash 包裹：用 <video> 或 <audio> 即可播放，但需注意格式兼容性（如 Safari 不支持 WebM，IE 完全不支持）；<canvas> 是位图绘制接口，和 SVG 互不替代——前者适合动态图形（游戏、图表），后者适合缩放无损图标。

立即学习“前端免费学习笔记（深入）”；

localStorage 和 sessionStorage 替代 Cookie 要小心作用域和容量

HTML4 仅能靠 document.cookie 存少量字符串，且每次 HTTP 请求都自动携带；HTML5 的 localStorage 和 sessionStorage 是纯前端键值存储，最大通常 5–10 MB，但只在同源下可用，且不随请求发送。
关键区别：sessionStorage 关闭标签页即清空，localStorage 持久存在，但不会自动过期——你得自己用时间戳字段控制有效期；另外，它们只接受字符串，存对象必须先 JSON.stringify()。

最常被忽略的一点：HTML5 允许省略某些结束标签（如 <li>、<p>），但这是解析器行为，不是语法自由——省略后仍需保证嵌套逻辑正确；否则看似能运行，实则 DOM 树可能意外扁平化，影响 CSS 选择器或 JS 查询结果。