HTML 和 HTML5 不是两个要选的东西
你写的 就是 HTML5 —— 它不是独立语言，而是 HTML 的当前标准版本。所谓“HTML4”或“XHTML”早已淘汰，现代浏览器根本不按老规则解析。如果你还在纠结“用 HTML 还是 HTML5”，说明文档类型声明可能写错了，或者用了过时的教程。
DOCTYPE 写错就全盘失效
很多页面看似能显示，但表单验证、语义标签、localStorage 行为异常，根源常在这一行：
❌ 错误写法：<br>✅ 正确写法（且唯一推荐）：<code>
- 只要开头不是严格这个字符串，浏览器就进“怪异模式”（Quirks Mode），CSS 盒模型、JS API 行为全变样
- 不要加任何 URL、版本号、SYSTEM 声明——HTML5 明确废弃这些
- 大小写不敏感，但惯例全小写；前面不能有空格、注释或 BOM
语义化标签不是“为了好看”才用
<header></header>、<nav></nav>、<article></article> 这些不是 div 的替代品，它们自带隐式 ARIA 角色和默认样式逻辑：
- 屏幕阅读器靠这些标签理解结构，
<div class="nav"> 对无障碍完全无效 <li> <code><main></main>页面只能有一个，且不能嵌套在<article></article>或<aside></aside>里 - 旧版 IE8 及以下不识别这些标签，但只需一行
document.createElement('article')就能补全（现代项目基本不用管） -
<input type="email">在 iOS Safari 上会弹出带 @ 符号的键盘，但校验只在form.submit()时触发，JS 调用checkValidity()才能手动触发 -
<video></video>必须提供src或多个<source></source>，否则 Chrome 会显示黑屏+播放按钮不可点（不是报错，容易误判） -
localStorage.setItem('key', {a:1})会静默转成"[object Object]"，必须显式JSON.stringify()
表单和多媒体 API 是最常踩坑的点
HTML5 把一堆 JS 才能做的事直接塞进原生标签里，但浏览器支持度和 fallback 逻辑得自己兜底：
立即学习“前端免费学习笔记（深入）”；
真正麻烦的从来不是“怎么用新特性”，而是“什么时候该退回到 JS 或 polyfill”。比如 dialog 元素虽已稳定，但 Safari 直到 16.4 才支持 showModal()，之前只能用 open 属性 + 手动管理焦点和 backdrop。
