内容摘要：打开任何一个现代网页，右键查看源代码，你看到的骨架大概率是HTML5。这不是什么新鲜事，但很多人写HTML5代码的方式，还停留在十年前。 先看一段真实代码。某电商网站的商品卡片，2015年可能是这样写

打开任何一个现代网页，网页右键查看源代码，设计你看到的代码骨架大概率是HTML5。这不是网页什么新鲜事，但很多人写HTML5代码的设计方式，还停留在十年前。代码

先看一段真实代码。网页某电商网站的设计商品卡片，2015年可能是代码这样写的：

```html ```

现在换成HTML5的写法：

```html

运动鞋

¥399 购买

```

区别在哪？<article>、<data>、网页<button>这些标签自带语义。设计屏幕阅读器能识别"这是代码一篇文章"，搜索引擎知道"这个价格是网页机器可读的"，键盘用户按Tab键能直接聚焦到按钮上。设计一个标签的代码替换，背后是可用性和可访问性的差距。

语义标签不是装饰品

我见过太多项目，通篇都是<div>。问为什么不用<nav>，回答是"反正CSS能控制样式"。确实能控制，但代价是什么？

去年帮一个朋友改他的博客。他用<div class="header">包住导航栏，用<div class="main">包住文章列表。代码能跑，样式也对。但用Lighthouse跑分，可访问性只有62分。把<div class="header">换成<header>，<div class="main">换成<main>，导航区域换成<nav>，分数跳到91。改动时间：不到十分钟。

语义标签解决的是机器理解问题。搜索引擎爬虫、屏幕阅读器、浏览器阅读模式，它们不关心你的CSS类名叫什么，只认标签本身。

表单验证：一行代码省一百行JS

HTML5之前，邮箱格式验证要写正则，必填项要监听提交事件，数字范围要手动判断。现在：

```html ```

浏览器原生处理这些逻辑。用户输入非法邮箱，提交时自动弹出提示，根本不需要JavaScript介入。pattern属性支持正则表达式，title属性定义错误提示文案。

有个细节：type="number"在移动端会唤起数字键盘，type="tel"唤起电话键盘，type="email"唤起带@符号的键盘。这些体验优化，一行属性就搞定。

视频和音频标签干掉了Flash

2010年乔布斯发公开信炮轰Flash，理由之一是耗电。当时网页视频几乎被Flash垄断。HTML5的<video>标签出现后，事情变了：

```html ```

poster指定封面图，controls显示播放控件，多个<source>让浏览器选支持的格式。最后那行文字是降级方案，老浏览器会显示它。

现在YouTube、Netflix、B站，底层全是HTML5视频。Flash在2020年底正式停止支持，HTML5赢了。

本地存储：cookie的替代方案

以前存用户偏好设置，只能塞进cookie。每个HTTP请求都带着cookie来回传，浪费带宽。HTML5的localStorage和sessionStorage把数据留在客户端：

```html ```

localStorage永久保存，除非用户手动清除。sessionStorage关闭标签页就消失。容量都是5MB左右，比cookie的4KB大得多。

注意：别存敏感信息。localStorage没有加密，任何能执行JavaScript的脚本都能读取。

写HTML5的几个习惯

声明用<!DOCTYPE html>，别写那一长串DTD。字符编码用<meta charset="UTF-8">，放在<head>第一行。语言属性别漏：<html lang="zh-CN">，屏幕阅读器靠它选择发音引擎。

图片加alt，装饰图用alt=""。链接文字别写"点击这里"，写"查看价格详情"。按钮用<button>，别用<div onclick>——前者支持键盘回车触发，后者不行。

HTML5不是新版本号，是一套更合理的标记规范。代码写对了，浏览器、搜索引擎、辅助工具都省事。写错了，也能跑，但总有人在某个地方为此付出代价。