，结果反而破坏结构逻辑。HTML5 语义标签是“有含义的容器”，不是“换皮工具”。例如：

要求有标题（

–

），

应代表独立可复用的内容单元（如一篇博客、一条新闻），而

必须与主内容相关但非核心。

常见误用现象：

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

• 把导航栏外层包一层
  

  却没配标题 → 应用

• 整个页脚写成


  ，但里面混着广告位、友情链接等无关内容 → 需拆分，仅版权信息部分用

• 用
  包含侧边栏或页头 →
  必须只含页面唯一主导内容，且不可嵌套

DOCTYPE 和字符编码声明必须精简且正确

HTML4 常见的长 DOCTYPE（如 xhtml 1.0 Strict）在 HTML5 中不仅多余，还可能触发怪异模式。HTML5 只接受一种写法：，大小写不敏感，但必须顶格、无空格、无注释前缀。

字符编码也必须用 ，且放在 最前面（早于任何其他标签，包括 ）。旧式写法如 虽仍生效，但冗余且易因顺序错位导致乱码。

关键细节：

• 服务器返回的 http Content-Type 头若含 charset，需与 HTML 内声明一致，否则以 HTTP 头为准，可能覆盖 meta 设置
• UTF-8 不带 bom；用 VS Code、Sublime 等编辑器保存时选 “UTF-8” 而非 “UTF-8 with BOM”
• 如果页面含中文路径、CSS/JS 文件名或 URL 参数，确保 Web 服务器也默认 UTF-8 解析（如 apache 的 AddDefaultCharset UTF-8）

表单控件和验证行为变化直接影响 JS 交互

HTML5 新增了 required、email、number、date 等输入类型及属性，它们不只是加个样式，而是改变原生验证逻辑和移动端键盘类型。但问题在于：不同浏览器对这些特性的支持程度和报错方式差异极大，尤其在 android webview 或旧版 safari 中。

实际踩坑点：

• 在 chrome 显示日期选择器，在 firefox 仍为文本框，ios Safari 支持但可能不触发 change 事件 → 必须配合 JS 做降级（如用 type="text" + 第三方日历库）
• required 属性触发表单提交前验证，但 form.checkValidity() 返回 true 并不表示后端安全 —— 它只校验 HTML5 规则，不替代服务端验证
• 自定义 input 的 valueAsNumber 或 valueAsDate 属性在 IE 完全无效，需用 parseFloat() 或 Date.parse() 兜底

HTML5 转换不是格式替换，而是结构重审。最常被跳过的一步，是检查旧页面中那些“能用就行”的内联 JS 事件绑定（比如 onclick="doSubmit()"）是否与新语义标签的冒泡行为冲突，或是否依赖已废弃的 dom 属性（如 document.all）。这类问题往往上线后才暴露，且难以复现。