很多人在安装前端开发环境或搭建网站时，常会看到项目要求里写着‘支持HTML5’，不禁疑惑：HTML5和以前的HTML到底有什么不同？其实它们之间的差异远不止版本号变大那么简单。
语法更宽松，写法更自由
老版HTML，比如HTML 4.01，对语法要求比较严格。标签必须闭合，属性必须加引号，否则容易出错。而HTML5在这方面做了大量简化。比如文档声明变得极简：
<!DOCTYPE html>就这么一行，不用记复杂的DTD路径，浏览器也能正确识别。这对新手来说友好太多。
新增语义化标签，结构更清晰
以前写网页，几乎全靠<div>堆结构，像导航、页脚、文章区都用div加class区分，代码看起来一堆“盒子”。HTML5引入了<header>、<nav>、<article>、<section>、<footer>等语义标签，让代码本身就能表达内容含义。
<article>
<header>
<h1>文章标题</h1>
</header>
<p>这是正文内容...</p>
</article>这种结构不仅便于维护，也利于搜索引擎抓取和屏幕阅读器识别，对无障碍访问帮助很大。
原生支持多媒体，不再依赖插件
过去在网页嵌入视频或音频，基本靠Flash或第三方插件，用户得手动安装，体验差还容易卡顿。HTML5直接提供了<video>和<audio>标签，本地文件或网络资源都能直接播放。
<video src="demo.mp4" controls></video>
<audio src="bgm.mp3" autoplay loop></audio>现在主流浏览器都支持，省去了用户额外安装软件的麻烦，尤其在移动端效果明显。
增强表单功能，提升交互体验
HTML5给表单增加了多种新输入类型，比如email、url、date、number、range等。手机端打开时，会自动调起对应键盘，比如邮箱输入会显示@符号，日期选择弹出日历。
<input type="email" placeholder="请输入邮箱">
<input type="date">这些细节让填写表单更顺畅，减少出错概率，开发者也不用额外写JS验证基础格式。
支持本地存储，减轻服务器负担
HTML5引入了localStorage和sessionStorage，可以在浏览器本地保存数据。比如记住用户的偏好设置、登录状态，即使刷新页面也不会丢失。
<script>
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));
</script>相比早期只能依赖cookie，容量更大、操作更方便，还不随每次请求发给服务器，性能更好。
兼容性良好，现代开发标配
虽然老版本IE对HTML5支持有限，但如今Chrome、Firefox、Edge、Safari都已全面支持。大多数新项目默认采用HTML5标准，软件安装包或建站工具也优先适配HTML5环境。
如果你正在配置本地开发环境，比如安装VS Code、Node.js或前端框架，基本都会接触到基于HTML5的模板和组件，了解其特性有助于快速上手。