HTML5并不是简单在旧版HTML基础上增加几个标签，而是从文档结构、媒体处理、表单控制、客户端存储到图形绘制等多个层面进行了系统性升级。旧版HTML（如HTML 4.01）在设计时主要面向桌面文档展示，许多能力需要借助外部插件或脚本实现。HTML5则把这些常用能力内置为语言级特性，同时强化了语义表达能力。
一、语义化标签的结构差异
旧版HTML中，开发者通常使用<div>配合class名称来划分页面区域，例如用<div class="header">表示页头。这种做法对人类阅读尚可，但搜索引擎和辅助技术难以准确判断区块含义。HTML5定义了诸如<header>、<nav>、<main>、<article>、<section>、<footer>等语义标签，使文档结构自描述。
使用语义标签不仅提升可访问性，也减少了冗余class定义。下面是一段旧版结构示例：
<div class="header"> <div class="nav">菜单</div> </div> <div class="content"> <div class="post">文章</div> </div> <div class="footer">底部</div>
同样的布局用HTML5改写后更加清晰：
<header> <nav>菜单</nav> </header> <main> <article>文章</article> </main> <footer>底部</footer>
语义化标签的缺点在于旧版IE需要JS兼容方案，但现代浏览器已完全原生支持。对于新项目，直接使用语义标签能降低维护成本。
二、多媒体与图形处理能力
旧版HTML播放视频或音频必须嵌入Flash、Silverlight等第三方插件，既存在安全风险也增加加载负担。HTML5通过<video>和<audio>标签提供原生媒体支持，开发者只需指定src即可。
以下代码展示HTML5播放视频的基础用法：
<video controls width="640"> <source src="demo.mp4" type="video/mp4"> 您的浏览器不支持video标签 </video>
在图形方面，旧版通常依赖图片或插件绘图，HTML5则提供<canvas>元素与JavaScript API进行位图绘制，以及增强的SVG支持。Canvas适合游戏与像素级操作，SVG适合矢量缩放。旧版若要实现类似效果需调用外部库甚至ActiveX控件。
这种内置能力让页面摆脱插件依赖，在移动设备上尤为关键，因为iOS很早就禁止了Flash，HTML5成为唯一可行方案。
三、表单控件的增强
旧版HTML表单仅有text、radio、checkbox等少数类型，日期选择、邮箱校验都需写JavaScript。HTML5新增了email、url、date、number、range、color等input类型，浏览器原生提供校验与专用输入界面。
示例展示HTML5表单的新输入类型：
<form> <input type="email" required placeholder="请输入邮箱"> <input type="date" name="birth"> <input type="range" min="0" max="100" value="50"> <button type="submit">提交</button> </form>
这些新类型在移动端会弹出对应键盘或选择器，提升用户输入效率。旧版若要实现相同体验，需要引入jQuery UI等库并自行处理兼容。HTML5也引入了placeholder、required、pattern等属性，使基础校验无需脚本参与。
不过需要注意，旧浏览器可能将未知type降级为text，因此关键业务校验仍应在服务端完成，不能只依赖前端。
四、客户端存储与离线能力
旧版HTML只能通过cookie在客户端保存少量文本，且每次请求自动携带，影响性能。HTML5提供localStorage与sessionStorage，以键值对形式存储较大数据，且不随请求发送。
简单使用示例：
// 保存数据
localStorage.setItem('user', '张三');
// 读取数据
var name = localStorage.getItem('user');
console.log(name);
此外，HTML5通过Manifest或后来的Service Worker支持离线缓存，使网页在无网络时仍可使用。旧版HTML没有标准离线方案，通常只能借助浏览器收藏或第三方工具。存储API的缺点是同源策略限制以及用户清理浏览器时会丢失，但用于本地偏好设置已经足够。
五、文档声明与元信息变化
旧版HTML文档开头需要较长DOCTYPE声明，如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">。HTML5简化为<!DOCTYPE html>，降低书写错误概率。同时HTML5推荐在<head>中使用viewport元标签适配移动端。
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>示例</title> </head>
旧版常用<meta http-equiv="Content-Type" content="text/html; charset=utf-8">，HTML5直接用charset属性即可。这些改动虽小，却显著降低了入门门槛并统一了跨设备渲染基础。
六、对比总结
从整体看，旧版HTML侧重于文档标记，HTML5则面向应用平台。下表列出主要升级点：
| 能力维度 | 旧版HTML | HTML5 |
|---|---|---|
| 结构语义 | div+class | header/article等语义标签 |
| 媒体播放 | 依赖Flash插件 | 原生video/audio |
| 表单类型 | 基础文本类 | email/date/range等 |
| 客户端存储 | cookie | localStorage/sessionStorage |
| 图形绘制 | 图片或插件 | canvas/SVG |
理解这些区别后，新项目应优先采用HTML5标准，旧系统迁移时可逐步替换插件依赖，用语义标签重构布局，从而获得更优的性能与可维护性。